Riferimento alle funzionalità CSS

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

Consulta Visualizzare e modificare CSS per scoprire le nozioni di base.

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 nella struttura DOM è l'elemento selezionato. A destra, gli stili dell'elemento vengono visualizzati nella scheda Stili. A sinistra, l'elemento è evidenziato nella finestra, ma solo perché il mouse lo sta sorvolando nell'albero DOM.

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

Esistono molti modi per selezionare un elemento:

• Nella finestra, fai clic con il tasto destro del mouse sull'elemento e seleziona Ispeziona.
• In DevTools, fai clic su Seleziona un elemento o premi Cmd+Maiusc+C (Mac) o Ctrl+Maiusc+C (Windows, Linux), quindi fai clic sull'elemento nella finestra.
• 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.

Visualizzare il CSS

Utilizza le schede Elementi > Stili e Calcolato per visualizzare le regole CSS e diagnosticare i problemi CSS.

Navigare con i link

La scheda Stili mostra i link in varie posizioni ad altre posizioni, tra cui, a titolo esemplificativo:

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

Ecco alcuni dei più importanti:

I link potrebbero avere uno stile diverso. Se non sai se un elemento è un link, prova a farci clic sopra per scoprirlo.

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

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

Visualizzare 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 i suggerimenti, seleziona Non mostrare.

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

Visualizzare la specificità del selettore

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

Visualizzare i valori delle proprietà personalizzate

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

Visualizzare CSS non validi, sottoposti a override, inattivi e altri

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

Consulta Comprendere il 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. Quando non ti interessano le dichiarazioni sottoposte a override, utilizza la scheda Calcolato per visualizzare solo il CSS effettivamente applicato a un elemento.

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

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

Consulta Informazioni sul CSS nella scheda Elaborato.

Visualizzare le proprietà CSS in ordine alfabetico

Utilizza la scheda Calcolati. Consulta Visualizzare solo il CSS effettivamente applicato a un elemento.

Visualizzare le proprietà CSS ereditate

Seleziona la casella di controllo Mostra tutto nella scheda Calcolati. Consulta Visualizzare solo il CSS effettivamente applicato a un elemento.

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

Visualizzare le regole CSS

Le regole @ sono istruzioni CSS che ti consentono di controllare il comportamento del CSS. Elementi > Stili mostra le seguenti regole at in sezioni dedicate:

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

Visualizzare le @regole di @property

La regola @@property CSS ti consente di definire in modo esplicito le proprietà personalizzate CSS e di registrarle in un foglio di stile senza eseguire 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 registrazione della proprietà nella sezione comprimibile @property nella parte inferiore della scheda Stili.

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

Visualizzare le @regole di @supports

La scheda Stili mostra le regole CSS @supports se vengono applicate a un elemento. Ad esempio, esamina il seguente elemento:

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

Visualizzare le @regole di @scope

La scheda Stili mostra le regole CSS @scope@ se vengono applicate a un elemento.

Le nuove regole @scope fanno parte della specifica CSS Cascading and Inheritance Level 6. 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. Ispeziona 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.

Per modificare la regola @scope, fai doppio clic.

Visualizzare le @regole di @font-palette-values

La regola CSS @@font-palette-values ti consente di personalizzare i valori predefiniti della proprietà font-palette. Elementi > Stili mostra questa regola at 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, trova la sezione @font-palette-values.

In questo esempio, i valori della tavolozza dei caratteri --New sostituiscono quelli predefiniti del carattere colorato.

Per modificare i valori personalizzati, fai doppio clic.

Visualizzare le @regole di @position-try

La regola CSS @position-try insieme alla proprietà position-try-options ti consente di definire posizioni di ancoraggio alternative per gli elementi. Per saperne di più, consulta Introduzione dell'API CSS Anchor Positioning.

Elementi > Stili risolve e collega quanto segue:

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

Controlla i valori position-try-options e le sezioni @position-try nell'anteprima successiva:

1. Nell'anteprima, apri il sottomenu facendo 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(). Il riquadro Elementi seleziona l'elemento con l'attributo popovertarget corrispondente e la scheda Stili mostra il CSS dell'elemento.

Per modificare i valori, fai doppio clic.

Visualizzare il box model di un elemento

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

Per modificare un valore, fai doppio clic.

Cercare e filtrare il CSS di un elemento

Utilizza la casella Filtra nelle schede Stili e Calcolato 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 Calcolate, raggruppa le proprietà filtrate in categorie comprimibili selezionando Raggruppa.

Emula una pagina in primo piano

Se sposti il focus dalla pagina a DevTools, alcuni elementi di overlay vengono nascosti automaticamente se vengono attivati dal focus. 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 fosse attivo.

Prova a emulare una pagina in primo piano in questa pagina dimostrativa:

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

Puoi trovare la stessa opzione nel riquadro Rendering.

Per scoprire altri modi per bloccare un elemento, vedi Bloccare lo schermo e ispezionare gli elementi che scompaiono.

Attivare/disattivare una pseudo-classe

Per attivare o disattivare una pseudo-classe:

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.

In questo esempio, puoi vedere che DevTools applica la dichiarazione background-color all'elemento, anche se l'elemento non è effettivamente passato con il mouse sopra.

La scheda Stili mostra le seguenti pseudo-classi per tutti gli elementi:

• :active
• :focus
• :focus-within
• :target
• :hover
• focus-visible

Inoltre, alcuni elementi potrebbero avere le proprie pseudo-classi. Quando selezioni un elemento di questo tipo, nella scheda Stili viene visualizzata una sezione Forza stato elemento specifico che puoi espandere e attivare le pseudo-classi specifiche dell'elemento.

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

Visualizza gli pseudo-elementi di evidenziazione ereditati

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

Come indicato nella specifica, quando più stili sono in conflitto, la cascata determina lo stile vincente.

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

1. Esamina il testo riportato di seguito.

   Ho ereditato lo stile dello pseudo-elemento di evidenziazione del mio elemento principale. Scegli me!

2. Seleziona una parte del testo riportato sopra.

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

Visualizzare i livelli a cascata

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

Per visualizzare i livelli a cascata, ispeziona 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 layer 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 dei comandi.
2. Inizia a digitare Rendering e seleziona Show Rendering.
3. Nel menu a discesa Emula CSS Media, seleziona stampa.

Visualizzare il CSS utilizzato e non utilizzato con la scheda Copertura

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

1. Premi Comando+Maiusc+P (Mac) o 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 viene ricaricata e la scheda Copertura fornisce una panoramica della quantità di CSS (e JavaScript) utilizzata da ogni file caricato dal browser.

   

   Il verde rappresenta il CSS utilizzato. Il colore rosso indica i CSS inutilizzati.

5. Fai clic su un file CSS per visualizzare una suddivisione riga per riga del CSS utilizzato nell'anteprima sopra.

   

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

Forza la modalità di anteprima di stampa

Consulta Forzare DevTools in 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 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 di property.
   • Copia valore. Copia solo 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 apportate nella scheda Stili in tutte le dichiarazioni.

   • Visualizza valore calcolato. Ti porta alla scheda Calcolati.

Modificare CSS

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

Inoltre, puoi:

• Eseguire l'override del CSS durante i caricamenti di pagina.
• Salva il CSS modificato nelle origini locali in un workspace.

Modificare il CSS con il completamento del codice

Per sperimentare combinazioni più complesse di proprietà CSS, come gradienti o ombre delle caselle, senza dover ricordare la sintassi esatta, o per creare rapidamente layout a griglia e flessibili, basandosi su più proprietà correlate, puoi iniziare a digitare una proprietà CSS e utilizzare il completamento del codice.

Aggiungere una dichiarazione CSS a un elemento

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

• Aggiungi una dichiarazione in linea. Equivalente all'aggiunta di un attributo style all'HTML dell'elemento.
• Aggiungere una dichiarazione a una regola di stile.

Quale flusso di lavoro dovresti utilizzare? Nella maggior parte dei casi, probabilmente vorrai utilizzare il flusso di lavoro di dichiarazione in linea. Le dichiarazioni inline hanno una specificità maggiore rispetto a quelle esterne, quindi il flusso di lavoro inline garantisce che le modifiche vengano applicate all'elemento come previsto. Per saperne di più sulla specificità, consulta la sezione Tipi di selettori.

Se esegui il debug degli stili di un elemento e devi testare in modo specifico cosa succede quando una dichiarazione viene definita in posizioni diverse, utilizza l'altro flusso di lavoro.

Aggiungere una dichiarazione inline

Per aggiungere una dichiarazione inline:

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

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

   

   Nello screenshot, le proprietà margin-top e background-color sono state applicate all'elemento selezionato. Nell'albero DOM puoi vedere le dichiarazioni riportate 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 viene messo a fuoco, consentendoti di inserire il testo.
3. Inserisci un nome di 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. Consulta la sezione Modificare i valori enumerabili con scorciatoie da tastiera per le scorciatoie per incrementare o decrementare 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+Su (Mac) o Alt+Su (Windows, Linux) per aumentare di 0,1.
• Su per modificare il valore di 1 o di 0, 1 se il valore attuale è compreso tra -1 e 1.
• Maiusc+Freccia su per incrementare di 10.
• Maiusc+Cmd+Su (Mac) o Ctrl+Maiusc+Pagina su (Windows, Linux) per aumentare il valore di 100.

Anche il decremento funziona. Basta sostituire ogni istanza di Up menzionata in precedenza con Down.

Modificare i valori di lunghezza

Puoi utilizzare il puntatore per modificare qualsiasi proprietà con 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 noterai 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 noterai che il puntatore si trasforma in una freccia orizzontale a doppia punta.

2. Trascina orizzontalmente per aumentare o diminuire il valore.

Per regolare il valore di 10 unità, 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 del tema chiaro e scuro e attiva la modalità Buio automatica

Per attivare/disattivare la modalità Buio automatica o emulare la preferenza dell'utente per i temi chiari o scuri:

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

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

   • prefers-color-scheme: light. Indica che l'utente preferisce il tema chiaro.
   • prefers-color-scheme: dark. 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 prefers-color-scheme della funzionalità dei contenuti multimediali del CSS prefers-color-scheme e Attiva modalità buio automatica della scheda Rendering.

Attivare/disattivare 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 una classe a un elemento. Sotto la casella Aggiungi nuovo stile sono elencati tutti gli stili applicati a questo elemento.
3. Attiva o disattiva la casella di controllo accanto al corso che vuoi attivare o disattivare.

Aggiungere 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.

Scegliere il foglio di stile a cui aggiungere una regola

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

Attivare/disattivare 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 le caselle di controllo.
3. Seleziona o deseleziona la casella di controllo accanto alla dichiarazione. Quando cancelli una dichiarazione, DevTools la sbarra per indicare che non è più attiva.

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 saperne di più, consulta Transizioni fluide e semplici con l'API View Transitions.

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

Consulta la sezione corrispondente in Ispeziona griglia CSS.

Modificare i colori con il selettore colori

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

Modificare il valore dell'angolo con l'orologio angolare

Orologio angolare fornisce una GUI per modificare i <angle> nei valori delle proprietà CSS.

Per aprire l'orologio angolare:

1. Seleziona un elemento con la 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 dell'angolazione.

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

   

4. Modifica il valore dell'angolo facendo clic sul cerchio Orologio angolare o scorrendo il mouse per aumentare / diminuire il valore dell'angolo di 1.

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

Modificare le ombreggiature di caselle e testo con l'editor di ombreggiature

Shadow Editor fornisce una GUI per modificare le dichiarazioni CSS text-shadow e box-shadow.

Per modificare le ombre con l'editor delle ombre:

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

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

   

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

   

4. Modifica le proprietà dell'ombra:

   • Tipo (solo per box-shadow). Scegli Inizio o Interno.
   • Offset X e Y. Trascina il punto blu o specifica i valori.
   • Sfocatura. Trascina il cursore o specifica un valore.
   • Spread (solo per box-shadow). Trascina il cursore o specifica un valore.

5. Osserva le modifiche applicate all'elemento.

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

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

Per aprire l'editor di interpolazione:

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à abbreviata transition.
3. Fai clic sull'icona per aprire l'editor di interpolazione:

Utilizzare i preset per regolare i tempi

Per regolare i tempi con un clic, utilizza i preset nell'editor di interpolazione:

1. Nell'editor di interpolazione, per impostare un valore della 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:

   • Preset lineari: elastic, bounce o emphasized.
   • Preset curva di Bézier cubica:

Parola chiave di temporizzazione	Predefinito	Curva di Bézier cubica
variazione in entrata e uscita	In Out, Sine	cubic-bezier(0.45, 0.05, 0.55, 0.95)
	Ingresso e uscita, quadratica	cubic-bezier(0.46, 0.03, 0.52, 0.96)
	Curva cubica in ingresso e uscita	cubic-bezier(0.65, 0.05, 0.36, 1)
	Fast Out, Slow In	cubic-bezier(0.4, 0, 0.2, 1)
	In Out, Back	cubic-bezier(0.68, -0.55, 0.27, 1.55)
variazione in entrata	In, Sine	cubic-bezier(0.47, 0, 0.75, 0.72)
	In, Quadratic	cubic-bezier(0.55, 0.09, 0.68, 0.53)
	In, Cubic	cubic-bezier(0.55, 0.06, 0.68, 0.19)
	In, Back	cubic-bezier(0.6, -0.28, 0.74, 0.05)
	Dissolvenza rapida in uscita, dissolvenza lineare in entrata	cubic-bezier(0.4, 0, 1, 1)
variazione in uscita	Out, Sine	cubic-bezier(0.39, 0.58, 0.57, 1)
	Quadratico in uscita	cubic-bezier(0.25, 0.46, 0.45, 0.94)
	Out, Cubic	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)

Configurare 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.

  

Qualsiasi modifica attiva un'animazione a forma di palla nell'anteprima nella parte superiore dell'editor.

(Sperimentale) Copia modifiche CSS

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

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

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

Inoltre, puoi monitorare le modifiche apportate nella scheda Modifiche.