The CSS Podcast - 008: Sizing Units
Il web è un mezzo adattabile, ma a volte è necessario controllarne le dimensioni per migliorare la qualità complessiva dell'interfaccia. Un buon esempio è la limitazione della lunghezza delle righe per migliorare la leggibilità. Come faresti in un mezzo flessibile come il web?
In questo caso, puoi utilizzare un'unità ch
, che corrisponde alla larghezza di un carattere "0" nel carattere visualizzato alle dimensioni calcolate.
Questa unità ti consente di limitare la larghezza del testo con un'unità progettata per ridimensionare il testo,
che a sua volta consente un controllo prevedibile indipendentemente dalle dimensioni del testo.
L'unità ch
è una delle poche unità utili per contesti specifici come questo esempio.
Numeri
I numeri vengono utilizzati per definire opacity
, line-height
e persino per i valori dei canali di colore in rgb
.
I numeri sono numeri interi senza unità (1, 2, 3, 100) e decimali (0,1, 0,2, 0,3).
I numeri hanno un significato diverso a seconda del contesto.
Ad esempio, quando definisci line-height
,
un numero è rappresentativo di una proporzione se lo definisci senza un'unità di misura di supporto:
p {
font-size: 24px;
line-height: 1.5;
}
In questo esempio, 1.5
è uguale al 150% delle dimensioni dei caratteri in pixel calcolate dell'elemento p
.
Ciò significa che se p
ha un font-size
di 24px
,
l'altezza della riga verrà calcolata come 36px
.
I numeri possono essere utilizzati anche nei seguenti punti:
- Quando imposti i valori per i filtri:
filter: sepia(0.5)
applica all'elemento un filtro seppia50%
. - Quando imposti l'opacità:
opacity: 0.5
applica un'opacità pari a50%
. - Nei canali colore:
rgb(50, 50, 50)
, dove i valori 0-255 sono accettabili per impostare un valore del colore. Guarda la lezione sui colori. - Per trasformare un elemento:
transform: scale(1.2)
ne modifica le dimensioni del 120% rispetto alle dimensioni iniziali.
Percentuali
Quando utilizzi una percentuale in CSS, devi sapere come viene calcolata.
Ad esempio,width
viene calcolato come percentuale della larghezza disponibile nell'elemento principale.
div {
width: 300px;
height: 100px;
}
div p {
width: 50%;
}
Nell'esempio precedente, la larghezza di div p
è 150px
, supponendo che il layout utilizzi il valore predefinito box-sizing: content-box
.
Se imposti margin
o padding
come percentuale,
si tratterà di una parte della larghezza dell'elemento principale,
indipendentemente dalla direzione.
div {
width: 300px;
height: 100px;
}
div p {
margin-top: 50%; /* calculated: 150px */
padding-left: 50%; /* calculated: 150px */
}
Nello snippet riportato sopra, sia margin-top
che padding-left
verranno calcolati come 150px
.
div {
width: 300px;
height: 100px;
}
div p {
width: 50%; /* calculated: 150px */
transform: translateX(10%); /* calculated: 15px */
}
Se imposti un valore transform
come percentuale,
si basa sull'elemento con la trasformazione impostata.
In questo esempio, p
ha un valore translateX
pari a 10%
e un valore width
pari a 50%
.
Innanzitutto, calcola la larghezza: 150px
perché corrisponde al 50% della larghezza del contenitore.
Poi, prendi 10%
di 150px
, che è 15px
.
Dimensioni e lunghezze
Se colleghi un'unità a un numero, questa diventa una dimensione.
Ad esempio, 1rem
è una dimensione.
In questo contesto, l'unità associata a un numero è indicata nelle specifiche come token di dimensione.
Le lunghezze sono dimensioni che fanno riferimento alla distanza e possono essere assolute o relative.
Lunghezza assoluta
Tutte le lunghezze assolute vengono risolte in base alla stessa base,
rendendole prevedibili ovunque vengano utilizzate nel CSS.
Ad esempio, se utilizzi cm
per impostare le dimensioni dell'elemento e poi lo stampi, dovrebbe essere preciso se lo confronti con una righello.
div {
width: 10cm;
height: 5cm;
background: black;
}
Se stampassi questa pagina, div
verrà stampato come un rettangolo nero di 10 x 5 cm.
Tieni presente che il CSS viene utilizzato non solo per i contenuti digitali, ma anche per dare stile ai contenuti stampati.
Le lunghezze assolute possono essere molto utili quando si progetta per la stampa.
Lunghezza relativa
Una lunghezza relativa viene calcolata in base a un valore di base, in modo simile a una percentuale.
La differenza tra questi valori e le percentuali è che puoi assegnare dimensioni contestuali agli elementi.
Ciò significa che il CSS ha unità quali ch
che utilizzano la dimensione del testo come base
e vw
che si basa sulla larghezza dell'area visibile (la finestra del browser).
Le lunghezze relative sono particolarmente utili sul web grazie alla loro natura adattabile.
Unità relative alle dimensioni dei caratteri
Il CSS fornisce unità utili relative alle dimensioni degli elementi della tipografia visualizzata, come le dimensioni del testo stesso (unità em
) o la larghezza dei caratteri dei caratteri (unità em
).
unità | rispetto a: |
---|---|
em | In relazione alla dimensione dei caratteri, ovvero 1,5 em sarà il 50% più grande della dimensione dei caratteri calcolata di base del relativo elemento principale. (storicamente, l'altezza della lettera maiuscola "M"). |
ex | Procedura di euristica per determinare se utilizzare l'altezza x, una lettera "x" o ".5em" nella dimensione del carattere calcolata corrente dell'elemento. |
cappello | Altezza delle lettere maiuscole nelle dimensioni del carattere calcolate correnti dell'elemento. |
ch | Avanzamento del carattere medio di un glifo stretto nel carattere dell'elemento (rappresentato dal glifo "0"). |
ic | Avanzamento del carattere medio di un glifo a larghezza intera nel carattere dell'elemento, rappresentato dal glifo "水" (ideogramma CJK ad acqua, U+6C34). |
rem | La dimensione del carattere dell'elemento principale (il valore predefinito è 16 px). |
lh | Altezza della riga dell'elemento. |
rlh | Altezza della riga dell'elemento principale. |
Unità relative all'area visibile
Puoi utilizzare le dimensioni dell'area visibile (finestra del browser) come base relativa. Queste unità suddividono lo spazio del viewport disponibile.
unità | rispetto a |
---|---|
vw | 1% della larghezza dell'area visibile. Le persone usano questa unità per fare trucchi interessanti con i caratteri, come ridimensionare un carattere dell'intestazione in base alla larghezza della pagina in modo che, quando l'utente ridimensiona la pagina, anche il carattere venga ridimensionato. |
vh | 1% dell'altezza dell'area visibile. Puoi utilizzarlo per organizzare gli elementi in un'interfaccia utente, ad esempio se hai una barra degli strumenti del piè di pagina. |
vi | 1% delle dimensioni dell'area visibile nell'asse in linea dell'elemento principale. Asse si riferisce alle modalità di scrittura. Nelle modalità di scrittura orizzontali come l'inglese, l'asse in linea è orizzontale. Nelle modalità di scrittura verticale, come alcuni caratteri tipografici giapponesi, l'asse in linea viene eseguito dall'alto verso il basso. |
vb | 1% delle dimensioni dell'area visibile nell'asse del blocco dell'elemento principale. Per l'asse del blocco, questa è la direzione del linguaggio. Le lingue LTR, come l'inglese, avranno un asse verticale dei blocchi, poiché i lettori anglofoni analizzano la pagina dall'alto verso il basso. Una modalità di scrittura verticale ha un asse di blocco orizzontale. |
vmin | 1% della dimensione più piccola dell'area visibile. |
vmax | 1% della dimensione più grande dell'area visibile. |
div {
width: 10vw;
}
p {
max-width: 60ch;
}
In questo esempio, div
sarà pari al 10% della larghezza dell'area visibile perché 1vw
è pari all'1% della larghezza dell'area visibile.
L'elemento p
ha un max-width
di 60ch
il che significa che non può superare la larghezza di 60 caratteri "0" nel carattere e nelle dimensioni calcolati.
Unità varie
Esistono altre unità che sono state specificate per gestire particolari tipi di valori.
Unità di misura degli angoli
Nel modulo Colore,
abbiamo esaminato le unità angolari,
che sono utili per definire i valori dei gradi,
come la tonalità in hsl
.
Sono utili anche per ruotare gli elementi all'interno delle funzioni di trasformazione.
div {
width: 150px;
height: 150px;
transform: rotate(60deg);
}
Utilizzando l'unità di misura dell'angolo deg
, puoi ruotare un div
di 90° sull'asse centrale.
div {
background-image: url('a-low-resolution-image.jpg');
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
div {
background-image: url('a-high-resolution-image.jpg');
}
}
Unità di risoluzione
Nell'esempio precedente, il valore di min-resolution
è 192dpi
.
L'unità dpi
indica i punti per pollice.
Un contesto utile per questo è il rilevamento di schermi a risoluzione molto elevata, come i display Retina in una query multimediale e la pubblicazione di un'immagine a risoluzione più alta.
Verifica le tue conoscenze
Verifica le tue conoscenze sul dimensionamento
Quali delle seguenti sono dimensioni valide?
Quali sono le differenze tra le unità assolute e relative?
Le unità dell'area visibile sono assolute.