Ridimensionamento delle unità

Podcast CSS - 008: Dimensionamento delle unità .

Il web è un mezzo reattivo, ma a volte potresti voler controllare le sue 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 equivale alla larghezza di uno "0" nel carattere visualizzato con le dimensioni calcolate. Questa unità consente di limitare la larghezza del testo con un'unità progettata per ridimensionare testo, che a sua volta consente un controllo prevedibile indipendentemente dalla dimensione 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 anche per i valori dei canali 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 a seconda del 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 equivale al 150% delle dimensioni del carattere in pixel calcolati dell'elemento p. Ciò significa che se p ha un font-size di 24px, l'altezza della riga sarà 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 seppia 50% all'elemento.
• Quando imposti l'opacità: opacity: 0.5 applica un'opacità pari a 50%.
• Nei canali a colori: rgb(50, 50, 50), in cui i valori 0-255 sono accettabili per l'impostazione di un valore di colore. Guarda la lezione sui colori.
• Per trasformare un elemento: transform: scale(1.2) scala l'elemento del 120% rispetto alle 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 precedente, sia margin-top che padding-left calcoleranno il valore di 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 l'insieme di trasformazione. In questo esempio, p ha un valore translateX pari a 10% e un valore width pari a 50%. Innanzitutto, calcola quale sarà la larghezza: 150px perché rappresenta il 50% della larghezza dell'elemento principale. Poi prendi 10% di 150px, ovvero 15px.

Dimensioni e lunghezze

Se aggiungi 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.

Lunghezze assolute

Tutte le lunghezze assolute si risolvono nella stessa base, rendendoli prevedibili ovunque vengano utilizzati nel tuo CSS. Ad esempio, se utilizzi cm per ridimensionare l'elemento e poi stamparlo, dovrebbe essere precisa se lo hai confrontato con un 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 i CSS non vengono utilizzati solo per i contenuti digitali, ma anche per lo stile dei contenuti stampati. Le lunghezze assolute possono davvero essere utili quando si progetta per la stampa.

Lunghezze relative

La lunghezza relativa viene calcolata rispetto a un valore base, proprio come 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). La lunghezza relativa è particolarmente utile sul web grazie alla sua natura reattiva.

Unità relative alla dimensione del carattere

CSS fornisce unità utili in relazione alle dimensioni degli elementi tipografici visualizzati, ad esempio le dimensioni del testo stesso (em unità) o la larghezza dei caratteri tipografici (ch unità).

Unità relative all'area visibile

Puoi utilizzare le dimensioni dell'area visibile (finestra del browser) come base relativa. Queste unità ripartiscono lo spazio visibile disponibile.

div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

In questo esempio, il valore div sarà il 10% della larghezza dell'area visibile perché 1vw corrisponde all'1% della larghezza dell'area visibile. L'elemento p ha un valore max-width di 60ch quindi non può superare la larghezza di 60 "0" caratteri nel carattere e nella dimensione calcolati.

Unità varie

Esistono altre unità che sono state specificate per gestire particolari tipi di valori.

Unità angolari

Nel modulo Colore, abbiamo esaminato le unità angolari, che sono utili per definire i valori dei gradi, come la tonalità 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à 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 sta per punti per pollice. Un contesto utile per questo è l'individuazione di schermi a risoluzione molto elevata, come Retina in una query multimediale e che mostra un'immagine a risoluzione più elevata.

Verifica le tue conoscenze

Verifica le tue conoscenze in materia di taglie

Risorse

• Valori delle specifiche CSS e livello 4 delle unità
• Dimensioni e unità su MDN
• Tutto sugli Ems
• Un messaggio esplicativo sulle percentuali