Riferimento alle funzionalità CSS

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

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

Seleziona un elemento

Il riquadro Elementi di DevTools ti 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 mostrati nella scheda Stili. A sinistra, l'elemento viene evidenziato nell'area visibile, ma solo perché viene passato il mouse sopra l'albero DOM.

Per un tutorial, consulta Visualizzare il codice CSS di un elemento.

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) o Ctrl+Maiusc+C (Windows, Linux), quindi fai clic sull'elemento 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 sul risultato e seleziona Mostra nel riquadro Elementi.

Visualizza CSS

Utilizza le schede Elementi > Stili e Elaborati per visualizzare le regole CSS e diagnosi dei problemi CSS.

Navigare con i link

La scheda Stili mostra in varie posizioni i link che rimandano a varie altre posizioni, incluse, 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 è minimizzato, consulta Rendere leggibile un file minimizzato.
• Nelle sezioni Ereditate da ..., agli elementi principali.
• Nelle chiamate var(), alle dichiarazioni della proprietà personalizzata.
• In animation proprietà abbreviate, per @keyframes.
• Link Scopri di più nelle descrizioni comando della documentazione.
• e molto altro.

Eccone alcune in evidenza:

I link potrebbero avere uno stile diverso. Se non sei sicuro che un elemento sia un link, prova a fare clic per scoprirlo.

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

Elementi > Stili mostra le 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 in questa proprietà.

Per disattivare le descrizioni comando, seleziona Non mostrare.

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

Visualizza la specificità del selettore

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

Visualizzare 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 di altro tipo

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

Consulta Comprendere il codice CSS nella scheda Stili.

Visualizzare solo il CSS applicato effettivamente a un elemento

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

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

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

Consulta Comprendere il CSS nella scheda Elaborato.

Visualizza le proprietà CSS in ordine alfabetico

Utilizza la scheda Elaborato. Consulta l'articolo Visualizzare solo il CSS applicato a un elemento.

Visualizza le proprietà CSS ereditate

Seleziona la casella di controllo Mostra tutto nella scheda Elaborato. Consulta l'articolo Visualizzare solo il CSS applicato a un elemento.

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

Visualizza regole at-rule CSS

Le istruzioni "AT-rule" sono istruzioni CSS che consentono di controllare il comportamento del CSS. Elementi > Stili mostra le seguenti regole atmosferiche nelle sezioni dedicate:

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

Visualizza @property at-rule

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

Passa il mouse sopra il nome di questa proprietà nella scheda Styles 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 at-rule

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

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

Visualizza @scope at-rule

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

Le nuove regole at-rule @scope fanno parte della specifica Cascading and Inheritance Level 6 di 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. Controlla il testo sulla scheda nell'anteprima.
2. Nella scheda Stili, individua la regola @scope.

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

Fai doppio clic sulla regola @scope per modificarla.

Visualizza @font-palette-values at-rule

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

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

1. Controlla 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 sostituiscono quelli predefiniti del carattere colorato.

Fai doppio clic sui valori personalizzati per modificarli.

Visualizzare il modello riquadro di un elemento

Per visualizzare il modello a riquadro 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 Elaborati per cercare proprietà o valori CSS specifici.

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 sulla pagina per DevTools, alcuni elementi in overlay vengono nascosti automaticamente se vengono attivati dallo stato attivo. Ad esempio, elenchi a discesa, menu o selettori di date. L'opzione check_box Emula una pagina con lo stato attivo consente di eseguire il debug di un elemento di questo tipo come se fosse attivo.

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. Ora la finestra DevTools è attiva al posto della 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.

Attiva/disattiva 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 quest'ultimo.

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

Visualizza gli pseudo-elementi di evidenziazione ereditati

Gli pseudo-elementi ti consentono di definire parti specifiche degli elementi. Gli pseudo-elementi evidenziati sono parti del documento con lo stato "selezionato" e sono definiti come "evidenziati" per indicare questo stato all'utente. Ad esempio, questi pseudo-elementi sono ::selection, ::spelling-error, ::grammar-error e ::highlight.

Come accennato nella specifica, quando più stili sono in conflitto, l'applicazione a cascata determina quello migliore.

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

1. Esamina il testo seguente.

   Ho ereditato lo stile dello pseudo elemento dei momenti salienti del mio genitore. Selezionami

2. Seleziona una parte del testo sopra.

3. Nella scheda Stili, scorri verso il basso fino alla sezione Inherited from ::selection pseudo of....

Visualizza livelli Cascade

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

Per visualizzare i livelli Cascade, inspect 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.

Visualizzare una pagina in modalità di stampa

Per visualizzare una pagina in modalità di stampa:

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

Visualizzare il CSS utilizzato e inutilizzato con la scheda Copertura

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

1. Mentre è attivo DevTools, premi Comando+Maiusc+P (Mac) o Ctrl+Maiusc+P (Windows, Linux, ChromeOS) 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 viene ricaricata e la scheda Copertura offre una panoramica della quantità di CSS (e JavaScript) utilizzata da ogni file caricato dal browser.

   

   Il verde rappresenta il CSS utilizzato. Il rosso rappresenta il CSS inutilizzato.

5. Fai clic su un file CSS per visualizzare una suddivisione riga per riga di ciò che CSS utilizza 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 utilizzate le righe da 59 a 63.

Forza la modalità di anteprima di stampa

Consulta l'articolo Forzare l'attivazione della modalità di anteprima di stampa in DevTools.

Copia CSS

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

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

Per copiare il codice CSS:

1. Seleziona un elemento.
2. Nella scheda Elementi > 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 dell'elemento property.
   • Copia valore. Copia solo il 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 propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

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

   • Visualizza valore calcolato. Passa alla scheda Elaborato.

Modifica CSS

Questa sezione elenca tutti i modi in cui puoi modificare il CSS in Elementi > Stili.

Inoltre puoi:

• Esegui l'override del CSS nei caricamenti delle pagine.
• Salva il 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 le dichiarazioni in diversi modi:

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

Quale flusso di lavoro dovresti usare? Per la maggior parte degli scenari, conviene utilizzare il flusso di lavoro della dichiarazione in linea. Le dichiarazioni in linea hanno una specificità maggiore rispetto a quelle esterne, pertanto il flusso di lavoro incorporato garantisce che le modifiche vengano applicate all'elemento come previsto. Per saperne di più sulla specificità, consulta Tipi di selettore.

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

Aggiungi una dichiarazione integrata

Per aggiungere una dichiarazione integrata:

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

4. Inserisci un valore valido per quella proprietà e premi Invio. Nell'albero DOM puoi vedere 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 vedere 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 attiva e ti consente di inserire testo.
3. Inserisci il nome di una proprietà e premi Invio.
4. Inserisci un valore valido per quella 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 modificarla. Consulta Modifica i valori enumerabili con le scorciatoie da tastiera per conoscere le scorciatoie per aumentare o diminuire rapidamente un valore di 0, 1, 1, 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 incrementare il valore di un importo fisso:

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

Funziona anche la riduzione. Devi solo sostituire ogni istanza di Up menzionata in precedenza con Down.

Modificare i valori di 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 è sottolineato.

2. Fai clic sul nome dell'unità per selezionarne una dal menu 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 orizzontalmente 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 le preferenze dell'utente relative ai temi chiari o scuri:

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

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

   • prefers-color-scheme: chiaro. Indica che l'utente preferisce il tema chiaro.
   • prefers-color-scheme: scuro. Indica che l'utente preferisce il tema scuro.
   • Modalità Buio automatica. Visualizza 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 elementi multimediali del 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. Consulta la sezione Aggiungere una classe a un elemento. Sotto la casella Aggiungi nuovo corso ci sono tutte le classi applicate a questo elemento.
3. Attiva/disattiva la casella di controllo accanto al corso da 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 una 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 a quale foglio di stile aggiungere una regola

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

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. Accanto a ogni dichiarazione vengono visualizzate delle caselle di controllo.
3. Seleziona o deseleziona la casella di controllo accanto alla dichiarazione. Quando cancelli una dichiarazione, DevTools la cancella per indicare che non è più attivo.

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

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

Consulta la sezione corrispondente in Animazioni.

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

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

Consulta la sezione corrispondente nella griglia di Ispeziona CSS.

Modificare i colori con il selettore colori

Consulta la sezione Ispezionare ed eseguire il debug dei colori HD e non HD con il selettore colori.

Cambiare il valore dell'angolo con l'orologio ad angolo

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

Per aprire l'opzione Orologio angolare:

1. Seleziona un elemento con dichiarazione dell'angolo.

2. Nella scheda Stili, trova la dichiarazione transform o background che vuoi modificare. Fai clic sulla 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 Orologio ad angolo o fai scorrere il mouse per aumentare / diminuire il valore dell'angolo di 1.

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

Modifica la casella e le ombre del testo con l'editor di 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 ombre:

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

2. Nella scheda Stili, trova un'icona di ombra accanto alla dichiarazione text-shadow o box-shadow.

   

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

   

4. Modifica le proprietà dell'ombra:

   • Tipo (solo per box-shadow). Seleziona Outset o Inset.
   • Offset X e Y. Trascina il punto blu o specifica i valori.
   • Sfoca. Trascina il dispositivo di scorrimento o specifica un valore.
   • Distribuito (solo per box-shadow). Trascina il dispositivo di scorrimento o specifica un valore.

5. Osserva le modifiche applicate all'elemento.

Modifica i tempi di animazione e transizione con l'editor di adattamento

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 della funzione di temporizzazione, come l'elemento <body> in questa pagina.
2. Nella scheda Stili, trova l'icona viola accanto alle dichiarazioni transition-timing-function, animation-timing-function o alla proprietà abbreviata transition.
3. Fai clic sull'icona per aprire l'Easing Editor:

Usa le preimpostazioni per regolare la sincronizzazione

Per regolare la sincronizzazione con un clic, usa le preimpostazioni nell'Easing Editor:

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

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

   • Temperature preimpostate lineari: elastic, bounce o emphasized.
   • Preimpostazioni Cubic Bézier:

Parola chiave tempi	Preimpostati	Bézier cubica
variazione in entrata e uscita	Inspirazione, seno	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, cubica	cubic-bezier(0.65, 0.05, 0.36, 1)
	Veloce, lento	cubic-bezier(0.4, 0, 0.2, 1)
	In entrata, in uscita	cubic-bezier(0.68, -0.55, 0.27, 1.55)
variazione in entrata	In, seno	cubic-bezier(0.47, 0, 0.75, 0.72)
	In, quadratico	cubic-bezier(0.55, 0.09, 0.68, 0.53)
	In, cubico	cubic-bezier(0.55, 0.06, 0.68, 0.19)
	Dentro, indietro	cubic-bezier(0.6, -0.28, 0.74, 0.05)
	Fast out, ingresso lineare	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, ingresso lento	cubic-bezier(0, 0, 0.2, 1)
	Fuori, indietro	cubic-bezier(0.18, 0.89, 0.32, 1.28)

Configura sincronizzazioni personalizzate

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

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

  

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

  

Qualsiasi modifica attiva un'animazione con la palla in Anteprima nella parte superiore dell'editor.

(Sperimentale) Copia delle modifiche CSS

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

Per copiare una singola modifica alla 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 qualsiasi dichiarazione e seleziona Copia tutte le modifiche CSS.

Inoltre, puoi monitorare le modifiche apportate con la scheda Modifiche.