Riferimento alle funzionalità CSS

Scopri nuovi workflow in questo riferimento completo delle funzionalità di Chrome DevTools relative alla visualizzazione e alla modifica del CSS.

Consulta Visualizzare e modificare il 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 nell'albero DOM è l'elemento selezionato. A destra, gli stili dell'elemento vengono visualizzati nella scheda Stili. A sinistra, l'elemento è evidenziato nell'area visibile, ma solo perché il mouse è posizionato sopra l'elemento nell'albero DOM.

Per un tutorial, consulta Visualizza 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 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 Calcolato per visualizzare le regole CSS e diagnosticare i problemi CSS.

Navigare con i link

La scheda Stili mostra i link in varie posizioni, tra cui, 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 è compresso, consulta l'articolo Rendere leggibile un file compresso.
• Nelle sezioni Ereditato da…, agli elementi principali.
• Nelle chiamate var(), alle dichiarazioni di proprietà personalizzate.
• Nelle proprietà abbreviate animation, in @keyframes.
• Link Scopri di più nei tooltip della documentazione.
• e molto altro.

Di seguito sono evidenziati alcuni di questi:

I link possono avere uno stile diverso. Se non sai con certezza se un elemento è un link, prova a fare clic per scoprirlo.

Visualizza i tooltip 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.

Visualizza la documentazione CSS

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

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

Per disattivare i suggerimenti, seleziona Non mostrare.

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

Specificità del selettore di visualizzazione

Passa il mouse sopra un selettore nella scheda Stili, inclusi i selettori principali nelle regole CSS nidificate, le regole nidificate ereditate e le regole @nested-declarations, per visualizzare una descrizione comando con il relativo peso di specificità ed evidenziare gli elementi corrispondenti nell'area visibile.

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, sostituiti, 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.

Visualizza solo il CSS effettivamente applicato a un elemento

La scheda Stili mostra tutte le regole applicate 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 Calcolati.

Visualizzare le proprietà CSS in ordine alfabetico

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

Visualizzare le proprietà CSS ereditate

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

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

Visualizza le at-rule CSS

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

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

Visualizza @property regole at

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

Passa il mouse sopra il nome di questa proprietà nella scheda Stili per visualizzare un tooltip con il valore della proprietà, i descrittori e un link alla relativa registrazione 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 @menzioni di @supports

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

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

Visualizzare le @menzioni di @scope

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

Le nuove regole @scope fanno parte delle specifiche 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 nell'anteprima seguente:

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 sulla regola.

Visualizza @font-palette-values at-rule

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 su di essi.

Visualizza @position-try at-rule

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

Elementi > Stili risolve e collega quanto segue:

• I valori delle proprietà position-try-options in una sezione @position-try --name dedicata.
• Valori delle proprietà position-anchor e argomenti anchor() agli 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, ovvero fai clic su IL TUO ACCOUNT e poi su STOREFRONT.
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 indirizza 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 modello a scatola 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 su di esso.

Cerca e filtra il CSS di un elemento

Utilizza la casella Filtra nelle schede Stili e Calcolato per cercare selettori CSS specifici (inclusi i selettori principali nelle regole nidificate), proprietà o valori.

Per cercare anche le proprietà ereditate nella scheda Calcolate, 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 della data. 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 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é 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 anche nel riquadro Rendering.

Per scoprire altri modi per bloccare un elemento, consulta Blocca lo schermo e ispeziona gli elementi che scompaiono.

Attiva/disattiva una pseudoclasse

Per attivare/disattivare una pseudoclasse:

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 non viene effettivamente passato il mouse sopra l'elemento.

La scheda Stili mostra le seguenti pseudoclassi per tutti gli elementi:

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

Inoltre, alcuni elementi potrebbero avere le proprie pseudoclassi. 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 una classe.

Visualizza gli pseudo-elementi di evidenziazione ereditati

I pseudo-elementi ti consentono di applicare uno stile a parti specifiche degli elementi. Gli pseudo-elementi evidenziati sono parti del documento con 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 struttura a 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 di seguito.

   Ho ereditato lo stile dello pseudo-elemento di evidenziazione del mio elemento principale. 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 i livelli a cascata

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

Per visualizzare gli strati 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 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 dei comandi.
2. Inizia a digitare Rendering e seleziona Show Rendering.
3. Nel menu a discesa Emula contenuti multimediali CSS, seleziona print.

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 è in primo piano 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 rosso rappresenta il CSS non utilizzato.

5. Fai clic su un file CSS per visualizzare una suddivisione riga per riga del CSS utilizzato nell'anteprima riportata 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 modalità di anteprima di stampa

Consulta Forzare la modalità di anteprima di stampa in DevTools.

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 la 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 il valore calcolato. Ti porta alla scheda Calcolati.

Cambia CSS

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

Inoltre, puoi:

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

Modifica il CSS con il completamento del codice

Per sperimentare combinazioni più complesse di proprietà CSS, come gradienti o ombreggiature, senza dover ricordare la sintassi esatta, o per creare rapidamente layout di griglia e flessibili, basandoti 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 modi diversi:

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

Quale workflow dovresti utilizzare? Nella maggior parte degli scenari, probabilmente vorrai utilizzare il flusso di lavoro di dichiarazione incorporata. Le dichiarazioni in linea hanno una specificità maggiore rispetto a quelle esterne, quindi il flusso di lavoro in linea garantisce che le modifiche vengano applicate all'elemento come previsto. Per saperne di più sulla specificità, consulta 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.

Aggiungi una dichiarazione incorporata

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 riflesse nell'attributo style dell'elemento.

Aggiungi 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, consentendoti di inserire il testo.
3. Inserisci il nome di una 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.

Modifica il nome o il valore di una dichiarazione

Fai doppio clic sul nome o sul valore di una dichiarazione per modificarlo. Consulta la sezione Modifica i valori enumerabili con le scorciatoie da tastiera per 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+Su (Mac) o Ctrl+Maiusc+Pag Su (Windows, Linux) per aumentare il valore di 100.

Anche la riduzione 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 misura della 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 in orizzontale per aumentare o diminuire il valore.

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

Aggiungi 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 della classe nella casella Aggiungi nuova classe.
4. Premi Invio.

Emula le preferenze per il tema chiaro e scuro e attiva la modalità Buio automatica

Per attivare o disattivare la modalità Buio automatica o emulare la preferenza dell'utente per i temi chiaro o scuro:

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 la funzionalità dei contenuti multimediali del CSS prefers-color-scheme e Attiva la 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 nuova classe sono riportate tutte le classi applicate a questo elemento.
3. Seleziona la casella di controllo accanto al corso che vuoi attivare o disattivare.

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.

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.

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 barra 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 semplici e fluide con l'API View Transitions.

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

Consulta la sezione corrispondente in Ispeziona la griglia CSS.

Modificare i colori con il selettore colori

Consulta Ispeziona ed esegui il debug dei colori HD e non HD con il selettore colori.

Modifica il valore dell'angolo con l'orologio degli angoli

Angle Clock fornisce una GUI per modificare le <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 sulla casella Anteprima angolo accanto al valore dell'angolo.

   

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

3. Fai clic sull'anteprima per aprire l'orologio con gli angoli.

   

4. Modifica il valore dell'angolo facendo clic sul cerchio Orologio angolo o scorri con 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 del riquadro Stili.

Modificare le ombre di caselle e testo con l'editor delle ombre

Shadow Editor fornisce una GUI per modificare le 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 ombra accanto alla dichiarazione text-shadow o box-shadow.

   

3. Fai clic sull'icona Ombra per aprire l'editor Ombra.

   

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.
   • Diffusione (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 easing 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, ad esempio 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 easing:

Utilizza i preset per regolare le tempistiche

Per regolare le tempistiche con un clic, utilizza i preset nell'editor di easing:

1. Nell'Editor di easing, per impostare un valore di parola chiave, fai clic su uno dei pulsanti di selezione:
   • linear
   • 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)
	In ingresso e uscita, quadratica	cubic-bezier(0.46, 0.03, 0.52, 0.96)
	In Out, Cubic	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	Ingresso, seno	cubic-bezier(0.47, 0, 0.75, 0.72)
	In, Quadratic	cubic-bezier(0.55, 0.09, 0.68, 0.53)
	In, cubica	cubic-bezier(0.55, 0.06, 0.68, 0.19)
	In, Back	cubic-bezier(0.6, -0.28, 0.74, 0.05)
	Fast Out, Linear In	cubic-bezier(0.4, 0, 1, 1)
variazione in uscita	Out, Sine	cubic-bezier(0.39, 0.58, 0.57, 1)
	In uscita, quadratica	cubic-bezier(0.25, 0.46, 0.45, 0.94)
	In uscita, cubica	cubic-bezier(0.22, 0.61, 0.36, 1)
	Linear Out, Slow In	cubic-bezier(0, 0, 0.2, 1)
	Andata, ritorno	cubic-bezier(0.18, 0.89, 0.32, 1.28)

Configura tempistiche personalizzate

Per impostare valori personalizzati per le funzioni di timing, 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 curva di Bézier cubica, trascina uno dei punti di controllo.

  

Qualsiasi modifica attiva un'animazione della pallina nell'Anteprima nella parte superiore dell'editor.

(Sperimentale) Copia modifiche CSS

Con questo esperimento attivato, la scheda Stili evidenzia le modifiche al 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 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.