Share
Abbiamo creato una guida completa per aiutarti a imparare i CSS, se hai appena iniziato con le nozioni di base o se vuoi esplorare CSS più avanzati.
È facile rimanere bloccati lavorando con le tecniche CSS che conosciamo bene, ma farlo ci mette in una posizione di svantaggio quando emergono nuovi problemi.
Mentre il web continua a crescere, anche la domanda di nuove soluzioni continuerà a crescere. Pertanto, come web designer e sviluppatori di front-end, non abbiamo altra scelta che conoscere il nostro set di strumenti e conoscerlo bene.
Ciò significa conoscere anche gli strumenti speciali, quelli che non vengono utilizzati più spesso, ma quando sono necessari, sono esattamente lo strumento giusto per il lavoro.
Oggi, vi presenterò alcuni strumenti CSS che potreste non sapere prima. Questi strumenti sono ciascuna unità di misura, come pixel o em, ma è possibile che non ne abbia mai sentito parlare! Tuffiamoci dentro.
Inizieremo con qualcosa che è simile a qualcosa che probabilmente già conosci. Il em l'unità è definita come corrente dimensione del font. Quindi, ad esempio, se imposti una dimensione del font sull'elemento body, il file em il valore di qualsiasi elemento figlio all'interno del corpo sarà uguale a quella dimensione del carattere.
Test
body font-size: 14px; div font-size: 1.2em; // calcolato a 14px * 1.2 o 16.8px
Qui, abbiamo detto che il div avrà un dimensione del font di 1.2em. Questo è 1,2 volte qualunque sia la dimensione del font che ha ereditato, in questo caso 14px. Il risultato è 16.8px.
Tuttavia, che cosa accade quando si sovrappongono le dimensioni dei caratteri all'interno di un altro? Nello snippet seguente applichiamo esattamente lo stesso CSS di cui sopra. Ogni div eredita la sua dimensione del font dal suo genitore, dandoci un aumento graduale delle dimensioni dei caratteri.
TestTestTest
Sebbene ciò possa essere desiderato in alcuni casi, spesso potresti voler semplicemente fare affidamento su una singola metrica su cui fare scala. In questo caso, dovresti usare rem. La "r" in rem sta per "root"; questo è uguale alla dimensione della font impostata nell'elemento root; nella maggior parte dei casi questo è il html elemento.
html font-size: 14px; div font-size: 1.2rem;
In tutti e tre i tuffatori nidificati nell'esempio precedente, il font verrebbe valutato 16.8px.
Gli Rems non sono utili solo per il dimensionamento dei font. Ad esempio, è possibile basare un intero sistema di griglia o una libreria di stili dell'interfaccia utente utilizzando la dimensione del carattere HTML radice rem, e utilizzare il ridimensionamento di em in luoghi specifici. Ciò ti darebbe un dimensionamento e un ridimensionamento dei caratteri più prevedibili.
.container width: 70rem; // 70 * 14 px = 980 px
Concettualmente, l'idea alla base di una strategia come questa è consentire alla tua interfaccia di adattarsi alle dimensioni del tuo contenuto. Tuttavia, potrebbe non essere necessariamente più sensato per ogni caso.
Funzionalità: rem (root em) unità su caniuse.com
Le tecniche di progettazione web reattiva fanno molto affidamento sulle regole percentuali. Tuttavia, la percentuale CSS non è sempre la soluzione migliore per ogni problema. La larghezza CSS è relativa all'elemento padre contenente più vicino. Cosa fare se si desidera utilizzare la larghezza o l'altezza della vista anziché la larghezza dell'elemento genitore? Questo è esattamente ciò che il vh e vw unità forniscono.
Il vh l'elemento è uguale a 1/100 dell'altezza del viewport. Ad esempio, se l'altezza del browser è 900px, 1VH valuterà a 9px. Allo stesso modo, se la larghezza della vista è 750px, 1vw valuterà a 7.5px.
Ci sono usi apparentemente infiniti per queste regole. Ad esempio, un modo molto semplice di fare diapositive a tutta altezza o quasi a tutta altezza può essere ottenuto con una singola riga di CSS:
.slide height: 100vh;
Immagina di volere un titolo che è stato impostato per riempire il larghezza dello schermo. Per fare ciò, devi impostare una dimensione del carattere vw. Quella dimensione si ridimensiona con la larghezza del browser.
Funzionalità: unità Viewport: vw, vh su caniuse.com
Mentre vh e vm sono sempre correlati all'altezza e alla larghezza della vista, rispettivamente, Vmin e vmax sono legati al massimo o minimo di quelle larghezze e altezze, a seconda di quale è più piccolo e più grande. Ad esempio, se il browser è stato impostato su 1100 px di larghezza e 700 px di altezza, 1vmin sarebbe 7px e 1vmax sarebbe 11px. Tuttavia, se la larghezza era impostata su 800 px e l'altezza impostata su 1080px, Vmin sarebbe uguale a 8px mentre vmax sarebbe impostato su 10.8px.
Quindi, quando potresti usare questi valori?
Immagina di aver bisogno di un elemento sempre visibile sullo schermo. Utilizzando un'altezza e una larghezza impostate su a Vmin valore inferiore a 100 consentirebbe questo. Ad esempio, un elemento quadrato che tocca sempre almeno due lati dello schermo potrebbe essere definito in questo modo:
.box height: 100vmin; larghezza: 100vmin;
Se avevi bisogno di una scatola quadrata che sempre coperture il viewport visibile (toccando tutti e quattro i lati dello schermo in ogni momento), usa le stesse regole tranne con vmax.
.box height: 100vmax; larghezza: 100vmax;
Combinazioni di queste regole offrono un modo molto flessibile di utilizzare la dimensione del tuo viewport in modi nuovi ed entusiasmanti.
Funzionalità: unità Viewport: vmin, vmax su caniuse.com
Le unità ex e ch, simile a em e rem, si basano sul carattere corrente e sulla dimensione del carattere. Tuttavia, a differenza em e rem, queste unità si basano anche sul famiglia di font, poiché sono determinati in base a misure specifiche dei font.
Il ch unità, o il personaggio unità è definita come "misura avanzata" della larghezza del carattere zero, 0. Alcune discussioni molto interessanti su ciò che questo significa possono essere trovate sul blog di Eric Meyers, ma il concetto di base è che, dato un font monospace, una scatola con una larghezza di N unità di caratteri, come larghezza: 40ch;, può sempre contenere una stringa con 40 caratteri in quel particolare tipo di carattere. Mentre gli usi convenzionali di questa particolare regola riguardano la stesura del braille, le possibilità di creatività qui si estendono certamente oltre queste semplici applicazioni.
Il ex l'unità è definita come "l'altezza x del carattere corrente O la metà di uno" em”. Ilx-altezza di un determinato carattere è l'altezza della x minuscola di quel tipo di carattere. Spesso, si tratta del segno centrale del carattere.
x-altezza; l'altezza della minuscola x (leggi di più su The Anatomy of Web Typography)Ci sono molti usa per questo tipo di unità, molte delle quali sono per microregolazioni tipografiche. Ad esempio, il cenare elemento, che sta per indice, può essere spinto nella riga usando la posizione relativa e un valore inferiore di 1ex. Allo stesso modo, puoi trascinare verso il basso un elemento pedice. I valori predefiniti del browser per questi utilizzano apice e pedice specifico vertical-align regole, ma se si desidera un controllo più granulare, è possibile gestire il tipo più esplicitamente in questo modo:
sup position: relativo; fondo: 1ex; sub position: relativo; fondo: -1ex;
Il ex unità è stata in giro dai CSS1, anche se non troverete un supporto così solido per il ch unità. Per informazioni sul supporto, controlla le unità e i valori CSS sul blog di Eric Meyer.
Tenere d'occhio lo sviluppo e l'espansione continui dei CSS è incredibilmente importante in modo da conoscere tutti gli strumenti del set di strumenti. Forse incontrerai un particolare problema che richiede una soluzione inaspettata utilizzando una di queste unità di misura più oscure. Prenditi del tempo per leggere le nuove specifiche. Iscriviti per aggiornamenti di notizie da grandi risorse come cssweekly. E non dimenticare, iscriviti ora per aggiornamenti settimanali, corsi, tutorial gratuiti e risorse come questa da Web Design su Tuts+!
Più bontà delle unità CSS.
Accentsconagua