Corso di CSS / Esaminare CSS con DevTools: Styles e Computed

Gli strumenti per sviluppatori del browser permettono di ispezionare quali dichiarazioni CSS corrispondono a un elemento e quali valori sono effettivamente utilizzati. Il pannello Styles (Stili) mostra le regole corrispondenti e quelle sovrascritte, mentre Computed aiuta a controllare i valori delle proprietà risultanti; le modifiche in DevTools sono normalmente temporanee.

Prepara l'esempio e il risultato previsto

Salva l'intero codice qui sotto come index.html in formato UTF-8 e aprilo nel tuo browser. In questo esempio, il paragrafo sugli orari di apertura è mostrato in verde e il primo paragrafo generale è mostrato in grigio. L'avviso includeva un padding di 16px e uno sfondo chiaro per permettere il confronto dei risultati per attributo.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    h1 { color: #087f5b; }
    p { color: #666; }
    .notice {
      color: #087f5b;
      padding: 16px;
      border: 1px solid #087f5b;
      background-color: #e9f7ef;
    }
  </style>
</head>
<body>
<h1>Small Garden</h1>
  <p>A place to grow plants and take a break.</p>
  <p class="notice">We open at 9 a.m. every day.</p>
</body>
</html>

Poiché abbiamo inserito il CSS nell'elemento style insieme all'HTML del body, la fonte dell'esercizio è un unico file. Se stai già praticando con CSS esterni, puoi mettere la stessa regola in style.css, ma il nome del file e il numero di riga mostrati negli strumenti per sviluppatori saranno diversi. Dopo aver confermato che il testo previsto appare sullo schermo, apri gli strumenti per sviluppatori.

Seleziona l’elemento corretto in Elements

1. Fai clic con il tasto destro sulla frase “We open at 9 a.m. every day.” (apriamo ogni giorno alle 9) sulla pagina e scegli Ispeziona. In Chrome o Edge su Windows, puoi anche aprire gli Strumenti per sviluppatori con F12 o Ctrl+Shift+I.
2. Nella scheda Elements (Elementi), verifica che la riga selezionata sia <p class="notice">. Se viene selezionato un altro elemento, premi lo strumento di selezione degli elementi e seleziona nuovamente l'avviso. La posizione degli strumenti e la lingua del menu possono variare a seconda del browser/versione.
3. Apri Styles (Stili) accanto o sotto l'elemento selezionato. Nota che sono visibili sia le regole .notice che p. In finestre strette, i pannelli possono essere posizionati in basso o alcune schede possono trovarsi in un menu aggiuntivo delle schede nascoste.

Ciò che Elements espone è il Document Object Model (DOM), che è la struttura del documento interpretata dal browser. Non appare sempre uguale al codice sorgente della pagina. Quando un browser corregge HTML errato o il JavaScript sostituisce un elemento, la selezione effettiva deve essere determinata in base alla struttura mostrata in Elements.

Il diagramma riassume la relazione tra le regole di corrispondenza in Styles e il valore finale in Computed. È un'illustrazione esplicativa, non uno screenshot di un nuovo test. In DevTools, apri Computed e filtra per color per ispezionare lo stesso valore. I pannelli possono apparire in posizioni diverse a seconda del layout e della versione del browser.

Confronta Styles e Computed

Il pannello Styles mostra le regole che corrispondono all'elemento selezionato, gli stili inline scritti direttamente sull'elemento e le regole relative all'ereditarietà. Sia p { color: #666; } che .notice { color: #087f5b; } corrispondono all'avviso, ma il colore finale del testo è verde. Questo perché il selettore di classe ha una precedenza maggiore rispetto al selettore dell'elemento nella stessa condizione di origine/importanza/livello in questo esempio.

Se vedi una dichiarazione barrata in grigio, prima controlla la possibilità che non sia "la sintassi era sbagliata" ma piuttosto "un'altra dichiarazione ha vinto". Il significato delle barrature e dei segni di avviso può variare a seconda del luogo e della situazione, quindi passa il mouse sopra la dichiarazione e leggi la spiegazione. padding: 16px imposta una proprietà diversa da color, quindi anche se c'è un conflitto di colori, possono essere applicati insieme.

Computed viene utilizzato per controllare lo stile calcolato finale dell'elemento selezionato. Apri la scheda e inserisci color nel filtro per trovare il colore del testo. #087f5b potrebbe essere visualizzato come rgb(8, 127, 91), e sono dello stesso colore. Espandi una proprietà per tracciare le regole e le fonti correlate. Alcune proprietà potrebbero essere nascoste nell'elenco predefinito, quindi controlla anche le opzioni di visualizzazione.

La documentazione delle funzionalità CSS di Chrome DevTools spiega i pannelli e come modificare le dichiarazioni. Per capire perché le dichiarazioni confliggono, confronta gli esempi condizionali in Ereditarietà, specificità e cascata CSS.

Attiva/disattiva le dichiarazioni e modifica i valori

1. Nel pannello Styles, cerca la dichiarazione .notice di color: #087f5b. Deselezionando la casella accanto a una dichiarazione, questa verrà esclusa solo temporaneamente. Di conseguenza, conferma che il colore dell'avviso cambi in grigio per la regola p.
2. Riattiva la casella di controllo per riportarla al suo colore originale verde. Poi clicca sul valore del colore e cambialo in #1d4ed8 e premi Invio. Verifica che solo il testo nell'avviso cambi in blu e il colore di sfondo rimanga verde chiaro.
3. Controlla di nuovo il colore del testo in Computed. Se indica rgb(29, 78, 216), corrisponde al colore blu che hai cambiato. Lo sfondo è una proprietà separata chiamata background-color.
4. Questo esercizio presuppone che non siano attivi il collegamento ai file locali o Local Overrides, quindi quando aggiorni la pagina, il colore che hai modificato negli Strumenti per sviluppatori scomparirà e tornerai al colore verde originale. Dopo aver confermato che l'originale non è stato modificato, procedi al passo successivo.

Le dichiarazioni che sono state disattivate possono essere ripristinate riattivando la casella di controllo, e i valori modificati in modo errato possono essere ripristinati reinserendo i valori esistenti. Se vuoi rimuovere tutte le altre modifiche in una volta sola, aggiorna senza attivare la funzione di salvataggio, come in questo esercizio. Se hai attivato il collegamento dell'area di lavoro o la sostituzione locale, il modo in cui viene salvato e mantenuto può cambiare, quindi non presumere che sarà ripristinato con un aggiornamento.

Salva una modifica confermata nel file di origine

Fai clic sul nome del file sorgente e sul numero di riga di una regola in Stili per individuarla. Poiché questo esempio incorpora il CSS nell'HTML, modifica la regola corrispondente nell'originale index.html. Per un foglio di stile esterno, apri il file indicato lì, come style.css. Controlla il percorso prima di modificare una copia con un nome simile. Per ulteriori dettagli, consulta Applica CSS con stili Inline, Interni ed Esterni.

1. Apri il index.html che avevi effettivamente aperto in un editor di testo. Se hai copiato il file in più cartelle, assicurati che il percorso del file corrisponda all'indirizzo del browser.
2. Cambia il valore del colore della regola originale .notice in #1d4ed8 e salva.
3. Aggiorna il tuo browser. Se l’avviso rimane blu anche dopo un nuovo caricamento, la modifica è stata salvata nel file sorgente.
4. Per tornare al design originale dopo aver completato l'esercizio, ripristina il colore originale su #087f5b e salva/aggiorna.

Distingui tre errori comuni di CSS

Per ogni situazione, modifica quella originale una alla volta, salva/aggiorna, verifica e poi ripristina. Nella prima situazione, le regole .notcie che non corrispondono all'elemento selezionato potrebbero non apparire nell'elenco delle regole comunemente applicate di Styles. Nella terza situazione, il modo in cui appare l'avviso varia a seconda di dove è stato creato e della versione del browser. Dividendo i casi in casi dove non c'è alcuna regola, c'è una regola ma è stata sovrascritta, e la dichiarazione stessa è invalida, puoi vedere dove correggerlo.