Il CSS Podcast - 008: Dimensioni delle unità
Il web è un mezzo adattabile, ma a volte potresti voler controllare le sue dimensioni per migliorare la qualità complessiva dell'interfaccia. Un buon esempio è limitare la lunghezza delle righe per migliorare la leggibilità. Come lo 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 con le dimensioni calcolate.
Questa unità consente di limitare la larghezza del testo con un'unità progettata per ridimensionare il testo, il che a sua volta consente un controllo prevedibile indipendentemente dalle dimensioni del testo.
L'unità ch
è una di alcune unità utili per contesti specifici come questo esempio.
Numeri
I numeri vengono utilizzati per definire opacity
, line-height
e anche per i valori dei canali colore in rgb
.
I numeri sono numeri interi senza unità (1, 2, 3, 100) e decimali (.1, .2, .3).
I numeri hanno un significato in base al loro contesto.
Ad esempio, quando definisci line-height
, un numero è rappresentativo di un rapporto se lo definisci senza un'unità di supporto:
p {
font-size: 24px;
line-height: 1.5;
}
In questo esempio, 1.5
è uguale al 150% delle dimensioni dei caratteri in pixel calcolati dell'elemento p
.
Ciò significa che se p
ha un valore font-size
di 24px
,
l'altezza della riga verrà calcolata come 36px
.
I numeri possono essere utilizzati anche nelle seguenti posizioni:
- Quando imposti i valori dei filtri:
filter: sepia(0.5)
applica un filtro seppia50%
all'elemento. - Quando imposti l'opacità:
opacity: 0.5
applica un'opacità50%
. - Nei canali colore:
rgb(50, 50, 50)
, in cui i valori 0-255 sono accettabili per impostare un valore di colore. Vedi la lezione sui colori. - Per trasformare un elemento:
transform: scale(1.2)
ridimensiona l'elemento del 120% delle sue 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, saranno 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, i valori margin-top
e padding-left
verranno entrambi calcolati in 150px
.
div {
width: 300px;
height: 100px;
}
div p {
width: 50%; /* calculated: 150px */
transform: translateX(10%); /* calculated: 15px */
}
Se imposti un valore transform
come percentuale, questo si basa sull'elemento con il set di trasformazione.
In questo esempio, p
ha un valore translateX
di 10%
e un valore di width
di 50%
.
Innanzitutto, calcola la larghezza 150px
perché è il 50% della larghezza dell'elemento principale.
Poi, prendi 10%
di 150px
, che costa 15px
.
Dimensioni e lunghezze
Se alleghi un'unità a un numero, questa diventa una dimensione.
Ad esempio, 1rem
è una dimensione.
In questo contesto, l'unità associata a un numero nelle specifiche viene indicata come token dimensione.
Le lunghezze sono dimensioni che fanno riferimento alla distanza e possono essere assolute o relative.
Lunghezze assolute
Tutte le lunghezze assolute vengono risolte sulla stessa base,
rendendole prevedibili ovunque vengano utilizzate nel tuo CSS.
Ad esempio, se utilizzi cm
per ridimensionare l'elemento e poi stamparlo,
il valore dovrebbe risultare preciso se lo hai confrontato con un righello.
div {
width: 10cm;
height: 5cm;
background: black;
}
Se stampi questa pagina, il div
verrebbe 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 applicare uno stile ai contenuti stampati.
La lunghezza assoluta può tornare utile quando si progetta per la stampa.
Unità | Nome | Equivalente a |
---|---|---|
cm | Centimetri | 1 cm = 96 px/2,54 |
mm | Millimetri | 1 mm = 1/10 di 1 cm |
D | Quarti di millimetri | 1Q = 1/40° di 1 cm |
in | Pollici | 1 in = 2,54 cm = 96 px |
pc | Picas | 1 pz = 1/6 di 1 pollice |
pt | Punti | 1 pt = 1/72 di 1 pollice |
px | Pixel | 1px = 1/96 di 1 pollice |
Lunghezze relative
Una lunghezza relativa viene calcolata in base a un valore di base, proprio come una percentuale.
La differenza tra queste percentuali è che puoi ridimensionare gli elementi in base al contesto.
Ciò significa che il CSS ha unità, come ch
, che utilizzano le dimensioni 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 reattiva.
Unità relative alla dimensione dei caratteri
Il CSS fornisce unità utili relative alle dimensioni degli elementi degli elementi tipografici visualizzati, ad esempio le dimensioni del testo stesso (em
unità) o la larghezza dei caratteri (ch
unità).
unità | rispetto a: |
---|---|
e | Rispetto alla dimensione del carattere, ad esempio, 1,5 em sarà superiore del 50% rispetto alla dimensione del carattere calcolata di base per l'elemento padre. (In passato, l'altezza della lettera "M" in maiuscolo). |
ad es. | Euristica per determinare se utilizzare l'altezza della x, una lettera "x" o ".5em" nelle dimensioni dei caratteri calcolate attualmente per l'elemento. |
berretto | Altezza delle lettere maiuscole nell'attuale dimensione del carattere calcolata per l'elemento. |
ch | L'avanzamento medio di caratteri di un glifo stretto nel carattere dell'elemento (rappresentato dal glifo "0"). |
ic | L'avanzamento medio dei caratteri di un glifo a larghezza intera nel carattere dell'elemento, come rappresentato dal glifo "水" (ideografo dell'acqua CJK, U+6C34). |
rim | La dimensione dei caratteri 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à occupano lo spazio disponibile nell'area visibile.
unità | rispetto a |
---|---|
vw | 1% della larghezza dell'area visibile. Gli utenti utilizzano questa unità per fare trucchetti, ad esempio ridimensionando il carattere di un'intestazione in base alla larghezza della pagina in modo che l'utente ridimensioni e anche il carattere verrà ridimensionato. |
VH | 1% dell'altezza dell'area visibile. Puoi utilizzarla per organizzare gli elementi in una UI, se ad esempio disponi di una barra degli strumenti a piè di pagina. |
vi | 1% delle dimensioni dell'area visibile nell'asse in linea dell'elemento principale. Il termine asse si riferisce alle modalità di scrittura. Nelle modalità di scrittura orizzontale come l'inglese, l'asse in linea è orizzontale. Nelle modalità di scrittura verticale come alcuni caratteri giapponesi, l'asse in linea viene eseguito dall'alto verso il basso. |
vb | 1% delle dimensioni dell'area visibile nell'asse dei blocchi dell'elemento principale. Per l'asse dei blocchi, corrisponde alla direzione del linguaggio. Le lingue LTR come l'inglese avrebbero un asse verticale a blocchi, poiché i lettori di lingua inglese analizzano la pagina dall'alto verso il basso. Una modalità di scrittura verticale ha un asse orizzontale a blocchi. |
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
è l'1% della larghezza dell'area visibile.
L'elemento p
ha un valore 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 determinati tipi di valori.
Unità angolo
Nel modulo colore,
abbiamo esaminato le unità angolari,
utili per definire i valori dei gradi,
come la tonalità in hsl
.
Sono utili anche per ruotare elementi all'interno di funzioni di trasformazione.
div {
width: 150px;
height: 150px;
transform: rotate(60deg);
}
Utilizzando l'unità angolare deg
, puoi ruotare div
di 90° sul suo 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 punti per pollice.
Un contesto utile è il rilevamento degli schermi a risoluzione molto elevata, come i display Retina in una query supporti e la pubblicazione di un'immagine a risoluzione più elevata.
Verifica la tua comprensione
Verifica le tue conoscenze sulle taglie
Quali delle seguenti sono dimensioni valide?
Qual è la differenza tra le unità assolute e relative?
Le unità dell'area visibile sono assolute.