Corso di CSS / Colori e unità CSS: px, em, rem e percentuali

I colori CSS possono essere scritti usando nomi, valori esadecimali e funzioni come rgb(). Le unità di lunghezza usano diversi punti di riferimento: px è una lunghezza CSS assoluta, em dipende dalla dimensione del font, rem usa la dimensione del font radice e le percentuali dipendono dalla proprietà impostata.

Confronta nomi di colori, notazione esadecimale e RGB

teal, #008080 e rgb(0, 128, 128) esprimono lo stesso colore. I nomi dei colori sono facili da leggere, ma esistono nomi predefiniti che possono essere utilizzati, e il formato esadecimale e RGB sono utili per controllare numericamente la quantità di rosso, verde e blu. RGB abbrevia Red, Green, Blue: rosso, verde e blu.

L'alfa descrive l'opacità del colore: il 20% permette a gran parte del colore sottostante di mostrarsi, mentre il 100% è opaco. Il risultato visualizzato dipende dal colore sottostante. Aggiungere alfa solo allo sfondo è diverso dall’impostare opacity sull'intero elemento, il che rende semitrasparenti anche il suo testo e i suoi discendenti. Vedi MDN: colore.

Capire i punti di riferimento di px, em e rem

px è un pixel CSS. Questo non equivale sempre a un pixel fisico sullo schermo e può apparire diversamente a seconda della scala dello schermo e della densità di pixel del dispositivo. Usare 16px non significa che la funzione di ingrandimento dello schermo non funzioni.

In font-size, em utilizza la dimensione del font ereditata. In una dichiarazione come padding: 1em, utilizza la dimensione del font dell'elemento stesso. rem utilizza la dimensione del font dell'elemento radice. I seguenti calcoli assumono che sia la dimensione del font radice sia quella del genitore siano 16px. Per ulteriori dettagli, vedere Font CSS, dimensioni dei caratteri e interlinea.

Se ripeti font-size: 1.25em ad ogni passaggio in cui la dimensione del genitore aumenta, essa aumenta da 16 → 20 → 25px. Ripeti 1.25rem sulla stessa struttura, entrambi i passaggi sono 20px. em è comodo per piccoli componenti che devono essere proporzionali alle lettere circostanti, e rem è comodo per condividere un riferimento costante in tutta la pagina. Scegli i criteri da seguire piuttosto che la risposta assolutamente corretta. Per la definizione dell'unità, fai riferimento al valore CSS di MDN e alla guida all'unità .

Trova il riferimento per la larghezza in percentuale

width: 50% viene solitamente calcolato in base alla larghezza del contenuto del blocco contenitore. Non tutte le percentuali delle proprietà sono basate sullo stesso obiettivo. Ad esempio, font-size: 125% si basa sulla dimensione del font ereditata dal genitore, quindi deve essere separata dalla % della larghezza.

.wrapper { width: 100%; max-width: 640px; padding: 1rem; }

.inner { width: 50%; font-size: 1.25rem; padding: 1em; }

Questo esempio utilizza border-box, quindi il padding rientra nella larghezza dichiarata. Con un font radice di 16px, spazio sufficiente e senza bordi, il box esterno è largo 640px. Il suo padding di 16px su ciascun lato lascia 608px di larghezza del contenuto. La larghezza del 50% del box interno è 304px; il suo padding di 20px su ciascun lato lascia 264px per il contenuto. Per ulteriori dettagli, vedere Dimensioni CSS, limiti min/max e box-sizing.

Se lo schermo è stretto, anche la larghezza della scatola esterna verrà ridotta. In questo caso, la larghezza interna non è fissata a 304px ma viene ricalcolata in base alla nuova larghezza del contenuto della scatola esterna. max-width nell'esempio è un'impostazione secondaria che limita la larghezza della scatola a un massimo di 640px.

Esegui l'esempio completo

Inserisci il codice sottostante in units.html salvato come UTF-8 e aprilo nel tuo browser. Il codice include il confronto dei colori, l'annidamento delle unità e i calcoli delle larghezze. Il valore 100% impostato sulla radice segue la dimensione del font predefinita del browser, quindi la condizione di 16px nell'esercizio sottostante viene verificata prima negli strumenti per sviluppatori.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing colors and units</title>
  <style>
    html { font-size: 100%; }
    * { box-sizing: border-box; }
    body { margin: 16px; font-family: sans-serif; line-height: 1.7; }
    .wrapper { width: 100%; max-width: 640px; padding: 1rem; background: #e9f7ef; }
    .inner { width: 50%; padding: 1em; font-size: 1.25rem; background: white; }
    .color-name { color: teal; }
    .color-hex { color: #008080; }
    .color-rgb { color: rgb(0, 128, 128); }
    .alpha { padding: 1rem; background: rgb(0 128 128 / 20%); }
    .nest { font-size: 16px; }
    .em-step { font-size: 1.25em; }
    .rem-step { font-size: 1.25rem; }
  </style>
</head>
<body>
  <h1>Colors and units</h1>
  <h2>Three notations of the same color</h2>
  <p class="color-name">Character specified by teal</p>
  <p class="color-hex">Characters specified as #008080</p>
  <p class="color-rgb">Character specified by rgb(0, 128, 128)</p>
  <p class="alpha">Only this box's background color has 20% opacity.</p>
  <h2>Width and spacing</h2>
  <div class="wrapper"><div class="inner">Text and padding in the inner box</div></div>
  <h2>Nested em</h2>
  <div class="nest"><div class="em-step">First step<div class="em-step">Second step</div></div></div>
  <h2>Nested rem</h2>
  <div class="nest"><div class="rem-step">First step<div class="rem-step">Second step</div></div></div>
</body>
</html>

Modifica un valore alla volta

1. Controlla la dimensione del font calcolata dell'html negli strumenti per sviluppatori. Se è 16px, assicurati che l'em annidato sia 20px·25px e il rem annidato sia 20px·20px. Se la radice ha una dimensione diversa, ricalcola i valori rem con quella misura. In questo esempio .nest rimane fissato a 16px: i due livelli em restano quindi 20px e 25px finché non modifichi anche .nest.
2. Cambiamo brevemente l'html a font-size: 20px. Tutti i testi basati su rem sono 25px, e .nest mantiene i 16px specificati, quindi il livello em è 20px·25px. Il padding di .inner è 25px. Dopo il confronto, torna al 100% originale.
3. Allarga la finestra e controlla le dimensioni dei box di .wrapper e .inner. Nella condizione originale di 16px, è 640px·304px. Riducendo la finestra, assicurati che entrambi i lati si restringano insieme.
4. Controlla i colori calcolati dei tre paragrafi colorati. Devono avere tutti lo stesso valore RGB. Assicurati che cambiare lo sfondo di .alpha non sfumi il testo stesso.

Se non è ciò che ti aspettavi, controlla i criteri di calcolo prima di cambiare semplicemente le unità. La dimensione del font del genitore e della radice, il padding, il box-sizing e le regole CSS che sovrascrivono possono avere un effetto. Le modifiche fatte negli strumenti per sviluppatori di solito scompaiono al refresh, e le modifiche salvate nei file devono essere ripristinate manualmente ai valori originali.