Riferimento alle funzionalità CSS

Scopri i nuovi flussi di lavoro in questo riferimento completo delle funzionalità di Chrome DevTools relative a la visualizzazione e la modifica di CSS.

Per apprendere le nozioni di base, consulta la sezione Visualizzare e modificare il CSS.

Seleziona un elemento

Il riquadro Elementi di DevTools consente di visualizzare o modificare il CSS di un elemento alla volta.

Nello screenshot, l'elemento h1 evidenziato in blu nell'albero DOM è l'elemento selezionato. A destra, gli stili dell'elemento sono visualizzati nella scheda Stili. A sinistra, l'elemento è evidenziato nell'area visibile, ma solo perché vi passa sopra il mouse nel DOM Albero.

Consulta Visualizzare il CSS di un elemento per seguire un tutorial.

Esistono molti modi per selezionare un elemento:

• Nell'area visibile, fai clic con il tasto destro del mouse sull'elemento e seleziona Ispeziona.
• In DevTools, fai clic su Seleziona un elemento. oppure premi Comando+Maiusc+C (Mac) Ctrl+Maiusc+C (Windows, Linux), quindi fai clic sull'elemento in nell'area visibile.
• In DevTools, fai clic sull'elemento nell'albero DOM.
• In DevTools, esegui una query come document.querySelector('p') nella console, fai clic con il tasto destro del mouse il risultato e seleziona Mostra nel riquadro Elementi.

Visualizza CSS

Utilizza Elementi > Schede Stili e Elaborato per visualizzare le regole CSS e diagnosticare i problemi CSS.

Naviga con i link

La scheda Stili mostra link in varie posizioni a varie altre posizioni, inclusi, a titolo esemplificativo:

• Accanto alle regole CSS, ai fogli di stile e alle origini CSS. Questi link aprono il riquadro Origini. Se il foglio di stile viene minimizzato, consulta la sezione Rendere leggibile un file minimizzato.
• Nelle sezioni Ereditate da ..., agli elementi principali.
• Nelle chiamate var(), alle dichiarazioni di proprietà personalizzate.
• Nelle proprietà abbreviate di animation, a @keyframes.
• Link Scopri di più nelle descrizioni comando della documentazione.
• e molto altro.

Eccone alcuni evidenziati:

Lo stile dei link potrebbe essere diverso. Se non sei sicuro che un link sia presente, prova a fare clic sul link per scoprirlo.

Visualizza le descrizioni comando con documentazione CSS, specificità e valori delle proprietà personalizzate

Elementi > La scheda Stili mostra descrizioni comando con informazioni utili quando passi il mouse sopra elementi specifici.

Visualizza la documentazione CSS

Per visualizzare una descrizione comando con una breve descrizione CSS, passa il mouse sopra il nome della proprietà nella scheda Stili.

Fai clic su Scopri di più per accedere a un riferimento CSS MDN su questa proprietà.

Per disattivare le descrizioni comando, seleziona Non mostrare.

Per riattivarle, controlla Impostazioni > Preferenze > Elementi > Mostra descrizione comando della documentazione CSS.

Visualizza specificità del selettore

Passa il mouse sopra un selettore per visualizzare una descrizione comando con la ponderazione della specificità.

Visualizza i valori delle proprietà personalizzate

Passa il mouse sopra una --custom-property per visualizzarne il valore in una descrizione comando.

Visualizza CSS non validi, sostituiti, non attivi e altri tipi di CSS

La scheda Stili riconosce molti tipi di problemi CSS e li mette in evidenza in vari modi.

Consulta la sezione Informazioni su CSS nella scheda Stili.

Visualizzare solo il CSS effettivamente applicato a un elemento

La scheda Stili mostra tutte le regole che si applicano a un elemento, incluse le dichiarazioni che sono state sostituite. Se non ti interessa le dichiarazioni con override, utilizza il campo Elaborato per visualizzare solo il CSS effettivamente applicato a un elemento.

1. Seleziona un elemento.
2. Vai alla scheda Elaborato nel riquadro Elementi.

Seleziona la casella di controllo Mostra tutto per visualizzare tutte le proprietà.

Consulta Comprendere CSS nella scheda Elaborati.

Visualizza le proprietà CSS in ordine alfabetico

Usa la scheda Elaborato. Consulta Visualizzare solo il CSS effettivamente applicato a un elemento.

Visualizza proprietà CSS ereditate

Seleziona la casella di controllo Mostra tutto nella scheda Elaborato. Consulta la sezione Visualizzare solo il CSS effettivamente applicata a un elemento.

In alternativa, scorri la scheda Stili e trova le sezioni denominate Inherited from <element_name>.

Visualizza at-rules del CSS

Le regole at sono istruzioni CSS che ti consentono di controllare il comportamento CSS. Elementi > Gli stili mostrano le seguenti regole at-rule in sezioni dedicate:

• @property
• @supports
• @scope
• @font-palette-values
• @position-try

Visualizza @property regole at-rule

La regola at-rule di CSS @property ti consente di definire le proprietà personalizzate CSS in modo esplicito e di registrarle in un foglio di stile senza eseguire alcun codice JavaScript.

Passa il mouse sopra il nome di questa proprietà nella scheda Stili per visualizzare una descrizione comando con il valore, i descrittori e un link alla relativa registrazione nella sezione @property comprimibile nella parte inferiore della scheda Stili.

Per modificare una regola @property, fai doppio clic sul nome o sul valore.

Visualizza @supports regole at-rule

La scheda Stili mostra le regole at-rule del CSS @supports se applicate a un elemento. Ad esempio, ispeziona il seguente elemento:

Se il tuo browser supporta la funzione lab(), l'elemento è verde, altrimenti è viola.

Visualizza @scope regole at-rule

La scheda Stili mostra le regole at-rule di @scope CSS se sono applicate a un elemento.

Le nuove regole at-rule di @scope fanno parte della specifica Cascading and Inheritance Level 6 del CSS. Queste regole ti consentono di definire l'ambito degli stili CSS, ovvero di applicare esplicitamente gli stili a elementi specifici.

Visualizza la regola @scope nella seguente anteprima:

1. Esamina il testo sulla scheda nell'anteprima.
2. Nella scheda Stili, individua la regola @scope.

In questo esempio, la regola @scope sostituisce la dichiarazione background-color CSS globale per tutti gli elementi <p> all'interno di elementi con una classe card.

Per modificare la regola @scope, fai doppio clic sulla regola.

Visualizza @font-palette-values regole at-rule

La regola at-regola di @font-palette-values CSS ti consente di personalizzare i valori predefiniti della proprietà font-palette. Elementi > La sezione Stili mostra la regola at-rule in una sezione dedicata.

Visualizza la sezione @font-palette-values nella prossima anteprima:

1. Esamina la seconda riga di testo nell'anteprima.
2. In Stili, individua la sezione @font-palette-values.

In questo esempio, i valori della tavolozza dei caratteri --New hanno la precedenza su quelli predefiniti del carattere colorato.

Fai doppio clic sui valori personalizzati per modificarli.

Visualizza @position-try regole at-rule

La regola CSS @position-try e la proprietà position-try-options consentono di definire posizioni di ancoraggio alternative per gli elementi. Per saperne di più, consulta Presentazione dell'API di posizionamento dell'ancoraggio CSS.

Elementi > Lo strumento Stili risolve e collega quanto segue:

• position-try-options in una sezione @position-try --name dedicata.
• Valori delle proprietà position-anchor e argomenti anchor() per gli elementi corrispondenti con attributi popovertarget.

Controlla i valori position-try-options e le sezioni @position-try nella prossima anteprima:

1. Nell'anteprima, apri il sottomenu, ovvero fai clic su IL TUO ACCOUNT e poi su VETRINA.
2. Ispeziona l'elemento con id="submenu" nell'anteprima.
3. In Stili, trova la proprietà position-try-options e fai clic sul relativo valore --bottom. La scheda Stili ti porta alla sezione @position-try corrispondente.
4. Fai clic sul link del valore position-anchor o sugli stessi argomenti anchor(). Nel riquadro Elementi viene selezionato l'elemento con l'attributo popovertarget corrispondente, mentre nella scheda Stili viene visualizzato il codice CSS dell'elemento.

Fai doppio clic sui valori per modificarli.

Visualizzare il modello del riquadro di un elemento

Per visualizzare il modello box di un elemento, vai alla scheda Stili e fai clic sul pulsante Mostra barra laterale nella barra delle azioni.

Fai doppio clic su un valore per modificarlo.

Cercare e filtrare il CSS di un elemento

Utilizza la casella Filtro nelle schede Stili e Elaborato per cercare CSS specifici proprietà o valori.

Per cercare anche le proprietà ereditate nella scheda Elaborato, seleziona la casella di controllo Mostra tutto.

Per navigare nella scheda Elaborato, raggruppa le proprietà filtrate in categorie comprimibili selezionando Gruppo.

Emula una pagina con lo stato attivo

Se imposti lo stato attivo dalla pagina a DevTools, alcuni elementi di overlay vengono nascosti automaticamente se attivati dall'elemento attivo. Ad esempio, elenchi a discesa, menu o selettori di date. L'opzione check_box Emula una pagina con lo stato attivo ti consente di eseguire il debug di un elemento come se lo fosse.

Prova a emulare una pagina con lo stato attivo in questa pagina demo:

1. Imposta lo stato attivo sull'elemento di input. Sotto viene visualizzato un altro elemento.
2. Apri DevTools. La finestra DevTools è ora attiva anziché sulla pagina, quindi l'elemento scompare di nuovo.
3. In Elementi > Stili, fai clic su :hov, seleziona check_box Emula una pagina con lo stato attivo e assicurati che l'elemento di input sia selezionato. Ora puoi ispezionare l'elemento sottostante.

Puoi trovare la stessa opzione anche nel riquadro Rendering.

Attivare/disattivare una pseudo-classe

Per attivare/disattivare una pseudo-classe, ad esempio :active, :focus, :focus-within, :target, :hover, :visited o focus-visible:

1. Seleziona un elemento.
2. Nel riquadro Elementi, vai alla scheda Stili.
3. Fai clic su :hov.
4. Seleziona la pseudo-classe che vuoi attivare.

Nell'area visibile, puoi vedere che DevTools applica la dichiarazione background-color all'elemento, anche se in realtà non viene passato il mouse sopra l'elemento.

Per un tutorial interattivo, consulta Aggiungere uno pseudostato a un corso.

Visualizza pseudo-elementi evidenziazione ereditati

Gli pseudo-elementi ti consentono di applicare uno stile a parti specifiche degli elementi. Gli pseudo-elementi di evidenziazione sono parti di documenti con l'indicazione "selected" stato e hanno lo stile "evidenziato" per indicare questo stato all'utente. Ad esempio, questi pseudo-elementi sono ::selection, ::spelling-error, ::grammar-error e ::highlight.

Come menzionato nella specifica, quando più stili entrano in conflitto, lo stile vincente viene determinato a cascata.

Per comprendere meglio l'ereditarietà e la priorità delle regole, puoi visualizzare gli pseudo elementi ereditati di evidenziazione:

1. Esamina il testo qui sotto.

   Ho ereditato lo stile dello pseudo-elemento evidenziazione del mio genitore. Seleziona me!

2. Seleziona una parte del testo in alto.

3. Nella scheda Stili, scorri verso il basso per trovare la sezione Inherited from ::selection pseudo of....

Visualizza livelli a cascata

I livelli a cascata consentono un controllo più esplicito dei file CSS per evitare conflitti tra le specifiche degli stili. Ciò è utile per codebase di grandi dimensioni, sistemi di progettazione e durante la gestione di stili di terze parti nelle applicazioni.

Per visualizzare i livelli a cascata, controlla l'elemento successivo e apri Elementi > Stili.

Nella scheda Stili, visualizza i tre livelli a cascata e i relativi stili: page, component e base.

Per visualizzare l'ordine dei livelli, fai clic sul nome del livello o sul pulsante Attiva/disattiva la visualizzazione dei livelli CSS.

Il livello page ha la specificità più elevata, pertanto lo sfondo dell'elemento è verde.

Visualizza una pagina in modalità di stampa

Per visualizzare una pagina in modalità di stampa:

1. Apri il menu dei comandi.
2. Inizia a digitare Rendering e seleziona Show Rendering.
3. Nel menu a discesa Emula CSS Media, seleziona print.

Visualizzare il CSS usato e inutilizzato con la scheda Copertura

La scheda Copertura mostra il CSS effettivamente utilizzato da una pagina.

1. Premi Comando+Maiusc+P (Mac) oppure Ctrl+Maiusc+P (Windows, Linux, ChromeOS) mentre DevTools è attivo per aprire il menu Comando.

2. Inizia a digitare coverage.

   

3. Seleziona Mostra copertura. Viene visualizzata la scheda Copertura.

   

4. Fai clic su Ricarica. La pagina si ricarica e la scheda Copertura fornisce una panoramica del livello di utilizzo di CSS (e JavaScript) utilizzata da ogni file caricato dal browser.

   

   Il verde rappresenta i CSS utilizzati. Il rosso rappresenta i CSS inutilizzati.

5. Fai clic su un file CSS per visualizzare un'analisi riga per riga dei CSS utilizzati nell'anteprima in alto.

   

   Nello screenshot, le righe da 55 a 57 e da 65 a 67 di devsite-google-blue.css non sono utilizzate, mentre vengono usate le righe da 59 a 63.

Forza la modalità di anteprima di stampa

Consulta Forza DevTools per la modalità di anteprima di stampa.

Copia CSS

Da un unico menu a discesa nella scheda Stili, puoi copiare regole, dichiarazioni, proprietà e valori CSS separati.

Inoltre, puoi copiare le proprietà CSS nella sintassi JavaScript. Questa opzione è utile se utilizzi librerie CSS-in-JS.

Per copiare il codice CSS:

1. Seleziona un elemento.
2. Nella sezione Elementi > Nella scheda Stili, fai clic con il tasto destro del mouse su una proprietà CSS.

3. Seleziona una delle seguenti opzioni dal menu a discesa:

   • Copia dichiarazione. Copia la proprietà e il relativo valore nella sintassi CSS: css property: value;
   • Copia proprietà. Copia solo il nome property.
   • Copia valore. Copia solo l'elemento value.
   • Copia regola. Copia l'intera regola CSS: css selector[, selector] { property: value; property: value; ... }
   • Copia dichiarazione come JS. Copia la proprietà e il relativo valore nella sintassi JavaScript: js propertyInCamelCase: 'value'
   • Copia tutte le dichiarazioni. Copia tutte le proprietà e i relativi valori nella regola CSS: css property: value; property: value; ...

   • Copia tutte le dichiarazioni come JS. Copia tutte le proprietà e i relativi valori nella sintassi JavaScript: ```js proprietàInCamelCase: 'value', proprietàInCamelCase: 'value', ...

   • Copia tutte le modifiche CSS. Copia le modifiche apportate nella scheda Stili in tutte le dichiarazioni.

   • Visualizza il valore calcolato. Apre la scheda Elaborato.

Cambia CSS

In questa sezione sono elencati tutti i modi in cui puoi modificare il codice CSS in Elementi > Stili.

Inoltre, puoi:

• Esegui l'override del codice CSS nei caricamenti pagina.
• Salva il codice CSS modificato nelle origini locali in un'area di lavoro.

Aggiungere una dichiarazione CSS a un elemento

Poiché l'ordine delle dichiarazioni influisce sullo stile di un elemento, puoi aggiungere dichiarazioni in in vari modi:

• Aggiungi una dichiarazione incorporata. Equivale ad aggiungere un attributo style al codice HTML dell'elemento.
• Aggiungere una dichiarazione a una regola di stile.

Quale flusso di lavoro dovresti usare? Nella maggior parte degli scenari, probabilmente è consigliabile utilizzare flusso di lavoro della dichiarazione. Le dichiarazioni incorporate hanno una specificità maggiore di quelle esterne, assicura che le modifiche abbiano effetto nell'elemento come previsto. Vedi Selettore Tipi per ulteriori informazioni sulla specificità.

Se stai eseguendo il debug degli stili di un elemento e devi verificare in modo specifico cosa succede quando la dichiarazione è definita in punti diversi, utilizza l'altro flusso di lavoro.

Aggiungi una dichiarazione incorporata

Per aggiungere una dichiarazione incorporata:

1. Seleziona un elemento.
2. Nella scheda Stili, fai clic tra le parentesi della sezione element.style. Il cursore e ti consente di inserire il testo.
3. Inserisci un nome della proprietà e premi Invio.

4. Inserisci un valore valido per la proprietà e premi Invio. Nell'albero DOM puoi: vedrai che è stato aggiunto un attributo style all'elemento.

   

   Nello screenshot, le proprietà margin-top e background-color sono state applicate all'elemento selezionato. Nell'albero DOM puoi visualizzare le dichiarazioni riflesse nell'attributo style dell'elemento.

Aggiungere una dichiarazione a una regola di stile

Per aggiungere una dichiarazione a una regola di stile esistente:

1. Seleziona un elemento.
2. Nella scheda Stili, fai clic tra le parentesi della regola di stile a cui vuoi aggiungere. la dichiarazione. Il cursore si concentra e ti consente di inserire testo.
3. Inserisci un nome della proprietà e premi Invio.
4. Inserisci un valore valido per la proprietà e premi Invio.

Nello screenshot, una regola di stile riceve la nuova dichiarazione border-bottom-style:groove.

Modificare il nome o il valore di una dichiarazione

Fai doppio clic sul nome o sul valore di una dichiarazione per modificarlo. Vedi Modificare i valori enumerabili con scorciatoie da tastiera per le scorciatoie che consentono di aumentare o diminuire rapidamente un valore di 0, 1, 1 o 10 o 100 unità.

Modificare i valori enumerabili con le scorciatoie da tastiera

Durante la modifica di un valore enumerabile di una dichiarazione, ad esempio font-size, puoi utilizzare le seguenti scorciatoie da tastiera per aumentare il valore di un importo fisso:

• Opzione+Freccia su (Mac) o Alt+Freccia su (Windows, Linux) per di 0,1.
• Su per modificare il valore di 1 o di 0, 1 se il valore corrente è compreso tra -1 e 1.
• Maiusc+Su per incrementare di 10.
• Maiusc+Comando+su (Mac) o Ctrl+Maiusc+Pagina su (Windows, Linux) per incrementare il valore di 100.

Funziona anche il decremento. Basta sostituire ogni istanza di Up menzionata in precedenza con Giù.

Modifica i valori della lunghezza

Puoi utilizzare il puntatore per modificare qualsiasi proprietà di lunghezza, ad esempio larghezza, altezza, spaziatura interna, margine o bordo.

Per modificare l'unità di lunghezza:

1. Passa il mouse sopra il nome dell'unità e nota che è sottolineata.

2. Fai clic sul nome dell'unità per selezionarne una dall'elenco a discesa.

Per modificare il valore della lunghezza:

1. Passa il mouse sopra il valore dell'unità e nota che il puntatore assume la forma di una freccia orizzontale a due punte.

2. Trascina in orizzontale per aumentare o diminuire il valore.

Per regolare il valore di 10, tieni premuto Maiusc durante il trascinamento.

Aggiungere una classe a un elemento

Per aggiungere una classe a un elemento:

1. Seleziona l'elemento nell'albero DOM.
2. Fai clic su .cls.
3. Inserisci il nome del corso nella casella Aggiungi nuovo corso.
4. Premi Invio.

Emula le preferenze dei temi chiaro e scuro e attiva la modalità Buio automatica

Per attivare/disattivare la modalità Buio automatica o emulare la preferenza dell'utente relativa a temi chiaro o scuro:

1. Nella sezione Elementi > Nella scheda Stili, fai clic su Attiva/disattiva le emulazioni di rendering più comuni.

2. Seleziona una delle seguenti opzioni dall'elenco a discesa:

   • prefers-color-scheme: luce. Indica che l'utente preferisce il tema chiaro.
   • prefers-color-scheme: scuro. Indica che l'utente preferisce il tema scuro.
   • Modalità Buio automatica. Mostra la pagina in modalità Buio anche se non l'hai implementata. Inoltre, imposta automaticamente prefers-color-scheme su dark.

Questo menu a discesa è una scorciatoia per le opzioni Emula la funzionalità multimediale CSS prefers-color-scheme e Attiva modalità Buio automatica della scheda Rendering.

Attiva/disattiva un corso

Per attivare o disattivare una classe su un elemento:

1. Seleziona l'elemento nell'albero DOM.
2. Apri la sezione Classi elemento. Vedi Aggiungere un corso a un elemento. Sotto il pulsante Aggiungi nuovo Classe contiene tutte le classi applicate a questo elemento.
3. Seleziona/deseleziona la casella di controllo accanto al corso che vuoi abilitare o disabilitare.

Aggiungi una regola di stile

Per aggiungere una nuova regola di stile:

1. Seleziona un elemento.
2. Fai clic su Nuova regola di stile. . DevTools inserisce un nuova regola sotto la regola element.style.

Nello screenshot, DevTools aggiunge la regola di stile h1.devsite-page-title dopo aver fatto clic su Nuova regola di stile.

Scegli il foglio di stile a cui aggiungere una regola

Quando aggiungi una nuova regola di stile, fai clic e tieni premuto su Nuova regola di stile. per scegliere il foglio di stile a cui aggiungere la regola di stile.

Attiva/disattiva una dichiarazione

Per attivare o disattivare una singola dichiarazione:

1. Seleziona un elemento.
2. Nella scheda Stili, passa il mouse sopra la regola che definisce la dichiarazione. Le caselle di controllo vengono visualizzate dopo a ogni dichiarazione.
3. Seleziona o deseleziona la casella di controllo accanto alla dichiarazione. Quando cancelli una dichiarazione, DevTools lo barra per indicare che non è più attivo.

Nello screenshot, la proprietà color per l'elemento attualmente selezionato è disattivata.

Modificare gli pseudo-elementi ::view-transition durante un'animazione

Consulta la sezione corrispondente in Animazioni.

Per ulteriori informazioni, vedi Transizioni semplici e fluide con l'API View Transizione.

Allinea gli elementi della griglia e i relativi contenuti con l'editor della griglia

Consulta la sezione corrispondente nella griglia Ispeziona CSS.

Modificare i colori con il selettore colori

Consulta Controllare ed eseguire il debug dei colori HD e non HD con il selettore colori.

Modificare il valore dell'angolo con l'angolo orologio

L'orologio angolare fornisce una GUI per la modifica dei <angle> nei valori delle proprietà CSS.

Per aprire l'orologio ad angolo:

1. Seleziona un elemento con la dichiarazione dell'angolo.

2. Nella scheda Stili, trova la dichiarazione transform o background che vuoi modificare. Fai clic nella casella Anteprima angolo accanto al valore dell'angolo.

   

   I piccoli orologi a sinistra di -5deg e 0.25turn sono le anteprime angolari.

3. Fai clic sull'anteprima per aprire l'orologio angolare.

   

4. Modifica il valore dell'angolo facendo clic sul cerchio Angolo orologio o fai scorrere il mouse per aumenta / diminuisci il valore dell'angolo di 1.

5. Esistono altre scorciatoie da tastiera per modificare il valore dell'angolo. Scopri di più nel riquadro Stili scorciatoie da tastiera.

Modifica le ombre della casella e del testo con l'editor delle ombre

L'Editor shadow fornisce una GUI per la modifica delle dichiarazioni CSS text-shadow e box-shadow.

Per modificare le ombre con l'Editor shadow:

1. Seleziona un elemento con una dichiarazione shadow. Ad esempio, seleziona l'elemento successivo.

2. Nella scheda Stili, individua l'icona con ombra accanto alla dichiarazione text-shadow o box-shadow.

   

3. Fai clic sull'icona ombra per aprire l'editor shadow.

   

4. Modifica le proprietà dell'ombra:

   • Tipo (solo per box-shadow). Seleziona Iniziale o Interno.
   • Offset asse X e Y. Trascina il punto blu o specifica i valori.
   • Sfocatura. Trascina il cursore o specifica un valore.
   • Distribuito (solo per box-shadow). Trascina il cursore o specifica un valore.

5. Osserva le modifiche applicate all'elemento.

Modificare l'animazione e i tempi di transizione con l'editor Easing

L'Easing Editor fornisce una GUI per modificare i valori di transition-timing-function e animation-timing-function.

Per aprire l'Easing Editor:

1. Seleziona un elemento con una dichiarazione di funzione di temporizzazione, come l'elemento <body> in questa pagina.
2. Nella scheda Stili, individua l'icona viola accanto alle dichiarazioni transition-timing-function, animation-timing-function o alla proprietà breve transition.
3. Fai clic sull'icona per aprire l'Easing Editor:

Usa i preset per regolare la sincronizzazione

Per regolare la sincronizzazione con un clic, utilizza le preimpostazioni in Easing Editor:

1. In Easing Editor, per impostare un valore per la parola chiave, fai clic su uno dei pulsanti del selettore:
   • lineare
   • ease-in-out
   • ease-in
   • ease-out

2. Nel selettore dei preset, fai clic sui pulsanti o per scegliere uno dei seguenti preset:

   • Predefiniti lineari: elastic, bounce o emphasized.
   • Preimpostazioni di Bézier cubica:

Parola chiave tempo	Preimpostato	Bézier cubica
variazione in entrata e uscita	In-out, Sine	cubic-bezier(0.45, 0.05, 0.55, 0.95)
	In-out, quadratico	cubic-bezier(0.46, 0.03, 0.52, 0.96)
	In fuori, cubico	cubic-bezier(0.65, 0.05, 0.36, 1)
	Veloce in uscita, lento	cubic-bezier(0.4, 0, 0.2, 1)
	In e fuori, dietro	cubic-bezier(0.68, -0.55, 0.27, 1.55)
variazione in entrata	Interno, seno	cubic-bezier(0.47, 0, 0.75, 0.72)
	In formato quadratico	cubic-bezier(0.55, 0.09, 0.68, 0.53)
	In, cubico	cubic-bezier(0.55, 0.06, 0.68, 0.19)
	Dentro, schiena	cubic-bezier(0.6, -0.28, 0.74, 0.05)
	Fast Out, Linear In	cubic-bezier(0.4, 0, 1, 1)
variazione in uscita	Fuori, seno	cubic-bezier(0.39, 0.58, 0.57, 1)
	Fuori, quadratico	cubic-bezier(0.25, 0.46, 0.45, 0.94)
	Fuori, cubico	cubic-bezier(0.22, 0.61, 0.36, 1)
	Uscita lineare, entrata lenta	cubic-bezier(0, 0, 0.2, 1)
	Fuori, Indietro	cubic-bezier(0.18, 0.89, 0.32, 1.28)

Configura tempistiche personalizzate

Per impostare valori personalizzati per le funzioni di temporizzazione, utilizza i punti di controllo sulle linee:

• Per le funzioni lineari, fai clic in un punto qualsiasi della linea per aggiungere un punto di controllo e trascinalo. Fai doppio clic per rimuovere il punto.

  

• Per le funzioni di Bézier cubica, trascina uno dei punti di controllo.

  

Ogni modifica attiva l'animazione di una palla nella sezione Anteprima nella parte superiore dell'editor.

(Sperimentale) Copia modifiche CSS

Quando questo esperimento è attivato, la scheda Stili evidenzia le modifiche CSS in verde.

Per copiare una singola modifica della dichiarazione CSS, passa il mouse sopra la dichiarazione evidenziata e fai clic sul pulsante Copia.

Per copiare contemporaneamente tutte le modifiche CSS nelle dichiarazioni, fai clic con il tasto destro del mouse su una dichiarazione e seleziona Copia tutte le modifiche CSS.

Inoltre, puoi tenere traccia delle modifiche apportate con la scheda Modifiche.