Riferimento alle funzionalità CSS

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

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

Per informazioni di base, consulta 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 nella struttura ad albero DOM è l'elemento selezionato. A destra, gli stili dell'elemento vengono visualizzati nella scheda Stili. A sinistra, l'elemento è evidenziato nel viewport, ma solo perché il mouse è sopra di esso nell'albero DOM.

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

Esistono molti modi per selezionare un elemento:

• Nel viewport, fai clic con il tasto destro del mouse sull'elemento e seleziona Ispeziona.
• In Strumenti per gli sviluppatori, fai clic su Seleziona un elemento o premi Comando+Maiusc+C (Mac) o Ctrl+Maiusc+C (Windows, Linux), quindi fai clic sull'elemento nel viewport.
• 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, quindi seleziona Mostra nel riquadro Elementi.

Visualizza CSS

Utilizza le schede Elementi > Stili ed Elaborato per visualizzare le regole CSS e diagnosticare i problemi relativi al CSS.

Navigare con i link

La scheda Stili mostra link in varie posizioni ad altri punti, tra cui:

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

Eccone alcuni in evidenza:

Lo stile dei link può variare. Se non sai con certezza se si tratta di un link, prova a fare clic per scoprirlo.

Visualizzare descrizioni comando con documentazione CSS, specificità e 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 una descrizione comando con una breve descrizione CSS, passa il mouse sopra il nome della proprietà nella scheda Stili.

Nota: DevTools estrae le descrizioni delle descrizioni comando dai dati personalizzati di VS Code.

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

Per disattivare le descrizioni comando, 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 per visualizzare una descrizione comando con il relativo peso di specificità.

Visualizzare i valori delle proprietà personalizzate

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

Visualizzare CSS non validi, sostituiti, inattivi e di altro tipo

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

Consulta Comprendere il CSS nella scheda Stili.

Visualizza 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 interessano le dichiarazioni sottoposte a override, utilizza la scheda 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 Informazioni sul CSS nella scheda Elaborato.

Visualizzare le proprietà CSS in ordine alfabetico

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

Visualizzare le proprietà CSS ereditate

Seleziona la casella di controllo Mostra tutto nella scheda Calcolata. 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>.

Visualizza le regole at-rule CSS

Le regole at 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

Visualizza @property regole at-rule

La regola at @property CSS ti consente di definire esplicitamente 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 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 browser supporta la funzione lab(), l'elemento è verde, altrimenti è viola.

Nota: al momento della stesura di questo articolo, solo Safari supporta lo spazio di colore CIELAB.

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

Nota: la funzionalità della regola at @scope è sperimentale. Per testarla, attiva il flag Experimental Web Platform features in chrome://flags/#enable-experimental-web-platform-features. altrimenti l'anteprima successiva non va a buon fine.

Visualizza la regola @scope nell'anteprima seguente:

1. Esamina il testo nella 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 su di essa.

Visualizza @font-palette-values regole at-rule

La regola at 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 nell'anteprima successiva:

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 hanno la precedenza su quelli predefiniti del carattere colorato.

Per modificare i valori personalizzati, fai doppio clic su di essi.

Visualizza @position-try regole at-rule

La regola CSS @position-try insieme alla proprietà position-try-options ti 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 della proprietà 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 nell'anteprima successiva:

Demo dell'utilizzo di un'ancora con popover

1. Nell'anteprima, apri il sottomenu, ovvero fai clic su IL TUO ACCOUNT e poi su NEGOZIO.
2. Ispeziona l'elemento con id="submenu" nell'anteprima.
3. In Stili, individua 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 su di essi.

Visualizzare il modello di casella 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 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 Calcolata, raggruppa le proprietà filtrate in categorie comprimibili selezionando Raggruppa.

Emula una pagina con lo stato attivo

Se trasferisci lo stato attivo dalla pagina a 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 ti consente di eseguire il debug di un elemento come se fosse attivo.

Attenzione: se questa opzione è attiva, il valore document.visibilityState è impostato su visible e l'evento visibilitychange non viene attivato. Per ulteriori informazioni, consulta l'API Page Visibility.

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 è attiva la finestra DevTools anziché la 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 nel riquadro Rendering.

Per scoprire altri modi per bloccare un elemento, consulta la sezione Bloccare lo schermo e ispezionare gli elementi scomparsi.

Attivare/disattivare una pseudo-classe

Per attivare/disattivare una pseudo-classe:

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

In questo esempio, puoi vedere che DevTools applica la dichiarazione background-color all'elemento, anche se in realtà non viene 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 possono avere le proprie pseudo-classi. Quando selezioni un elemento di questo tipo, la scheda Stili mostra la sezione Forza stato dell'elemento specifico che puoi espandere e attivare pseudo-classi specifiche dell'elemento.

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

Visualizzare gli pseudo-elementi di evidenziazione ereditati

Gli pseudo-elementi ti consentono di applicare stili a parti specifiche degli elementi. Gli pseudo-elementi evidenziano le parti del documento con lo stato "Selezionato" e vengono definiti come "evidenziati" 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.

Nota: per attivare questa funzionalità, esegui Chrome con il flag --enable-blink-features=HighlightInheritance.

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

1. Esamina il testo di seguito.

   Ho ereditato lo stile dell'elemento pseudo-highlight del mio elemento principale. Selezionami!

2. Seleziona una parte del testo qui sopra.

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

Visualizza i livelli in cascata

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

Per visualizzare i livelli in cascata, esamina 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 contenuti multimediali CSS, seleziona stampa.

Visualizzare il CSS utilizzato e inutilizzato 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 di 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 volume di CSS (e JavaScript) utilizzato da ciascun 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 un'analisi dettagliata riga per riga dei CSS utilizzati nell'anteprima qui sopra.

   

   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.

Forzare la modalità di anteprima di stampa

Consulta Forzare DevTools in modalità 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 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 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 apportate nella scheda Stili in tutte le dichiarazioni.

   • Visualizza valore calcolato. Viene visualizzata la scheda Calcolata.

Cambia CSS

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

Inoltre, puoi:

• Sovrascrivi il CSS nei vari caricamenti della 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 le 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? Per la maggior parte degli scenari, probabilmente ti consigliamo di utilizzare il flusso di lavoro della dichiarazione in linea. Le dichiarazioni in linea hanno una specificità maggiore di quelle esterne, per cui il flusso di lavoro in linea garantisce che le modifiche vengano applicate all'elemento come previsto. Per saperne di più sulla specificità, consulta la sezione 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 posizioni diverse, utilizza l'altro flusso di lavoro.

Aggiungere una dichiarazione in linea

Per aggiungere una dichiarazione in linea:

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

4. Inserisci un valore valido per la proprietà e premi Invio. Nella struttura ad 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. Nella struttura a 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 concentra e ti consente di inserire 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 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+Su (Mac) o Alt+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+Su per incrementare di 10.
• Maiusc+Comando+Su (Mac) o Ctrl+Maiusc+Pagina su (Windows, Linux) per aumentare il valore di 100.

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

Modificare i valori di lunghezza

Ritiro: questa funzionalità è stata ritirata in Chrome 123. Per riattivarlo temporaneamente, deseleziona settings Impostazioni > Esperimenti > check_box Rimuovi lo strumento di creazione CSS <length> nella scheda Stili. Non esitare a lasciare un feedback su crbug/1522657.

Puoi utilizzare il puntatore per modificare qualsiasi proprietà di 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 noterai che è sottolineato.

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

Emulare le preferenze relative ai temi chiaro e scuro e attivare 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: 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à scura 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.

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 classe sono elencate tutte le classi applicate a questo elemento.
3. Attiva/disattiva la casella di controllo accanto alla classe 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.

Scegli il foglio di stile a cui aggiungere una regola

Quando aggiungi una nuova regola di stile, fai clic su Nuova regola di stile e tieni premuto 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 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ù, vedi Transizioni semplici e fluide 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 Controllare e eseguire il debug dei colori HD e non HD con il selettore colori.

Modificare il valore dell'angolo con l'orologio Angolo

Angolo orologio fornisce una GUI per modificare i valori <angle> nelle proprietà CSS.

Per aprire 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 angolazione accanto al valore dell'angolo.

   

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

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

   

4. Modifica il valore dell'angolo facendo clic sul cerchio Angolo orario o scorri con 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ù sulle scorciatoie da tastiera del riquadro Stile.

Modifica le ombre della casella e del 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 delle ombre:

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 dell'ombra per aprire l'editor delle ombre.

   

4. Modifica le proprietà dell'ombra:

   • Tipo (solo per box-shadow). Seleziona Premessa o Interno.
   • Offset X e Y. Trascina il punto blu o specifica i valori.
   • Sfocatura. Trascina il cursore o specifica un valore.
   • Espansione (solo per box-shadow). Trascina il dispositivo di scorrimento o specifica un valore.

5. Osserva le modifiche applicate all'elemento.

Modificare la durata dell'animazione e delle transizioni con l'editor Easing

L'editor di animazioni 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, 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 animazioni:

Usa i preset per regolare la sincronizzazione

Per regolare i tempi con un clic, utilizza le preimpostazioni nell'editor di transizione:

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

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

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

Parola chiave relativa alla tempistica	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)
	Uscita veloce, entrata lenta	cubic-bezier(0.4, 0, 0.2, 1)
	In Out, Indietro	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, cubici	cubic-bezier(0.55, 0.06, 0.68, 0.19)
	Dentro, schiena	cubic-bezier(0.6, -0.28, 0.74, 0.05)
	Uscita rapida, ingresso lineare	cubic-bezier(0.4, 0, 1, 1)
variazione in uscita	Out, 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)

Configurare i tempi personalizzati

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

Nota: per attivare questa funzionalità sperimentale, seleziona Sincronizza le modifiche CSS nella scheda Stili in Impostazioni > Esperimenti e ricarica DevTools.

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.