Impariamo ad amare le parti noiose di CSS

Unità di misure relative#section1

È probabile che, dato che siete dei developer illuminati, avrete già lavorato con le misure relative, ossia con gli em o con le percentuali; pertanto, conoscerete il problema: dover usare una calcolatrice per trovare le misure a causa dell’ereditarietà. Ad esempio, al giorno d’oggi è piuttosto comune impostare nel proprio documento una dimensione di base per i font e poi usare delle misure relative per impostare i propri font nel resto della pagina. In CSS, tutto ciò probabilmente somiglia a questo:

html { font-size: 10px; }
p { font-size: 1.4em; }

Questa cosa va bene, non è affatto un problema, finché non si ha un elemento figlio a cui volete dare una dimensione di font differente. Ad esempio, in un markup come questo:

The cat sat on the <span>mat</span>.

Se volete che lo span abbia un font size più piccolo, diciamo 1.2em, cosa dovete fare? Tirate fuori la calcolatrice e calcolate 1.2 diviso 1.4. Il risultato è questo:

p span { font-size: 0.85714em; }

Inoltre, il problema non si limita nemmeno ad usare em. Se state creando un sito fluido usando le percentuali, saprete che la percentuale è relativa al suo contenitore: quindi, se avete un elemento che volete che sia il 40% del suo genitore, la cui lunghezza è 75%, allora la larghezza dell’elemento deve essere impostata al 53.33333%.

Non è il massimo.

Lunghezze relative alla root#section2

Per combattere questo problema della dimensione dei font, abbiamo ora accesso all’unità rem (root em). Si tratta sempre di un’unità relativa, ma è sempre relativa a un valore base fisso, che è la font size dell’elemento root del documento (in HTML, è sempre l’elemento html). Presumendo la stessa dimensione del font di 10px che abbiamo usato nell’esempio precedente, le regole CSS richieste in questo caso sono:

p { font-size: 1.4rem; }
p span { font-size: 1.2rem; }

Ora entrambe le regole sono relative alla dimensione del font size della root: un modo molto più elegante e semplice in cui lavorare, specialmente se avete una base semplice, come 10px o 12px. È come tornare indietro e usare di nuovo i valori espressi in px, solo che in questo modo sono scalabili.

Questa è una delle features meglio supportate tra quelle che descriverò in questo articolo: la si trova in tutti i browser moderni, incluso IE9 e manca solo in Opera Mobile.

Lunghezze relative alla viewport#section3

Se pensiate che l’unità rem sia cool (io lo penso), sarete felici di sapere che c’è un altro nuovo insieme di unità di lunghezza per combattere il problema delle percentuali. Queste funzionano in maniera simile a rem, tranne che sono relative non ad un valore definito dall’utente della root del documento, ma alle dimensioni stesse della viewport del dispositivo.

Le due unità principali sono vh e vw, che sono relative rispettivamente all’altezza e alla larghezza della viewport. Ciascuna prende come valore un numero, che equivale alla stessa percentuale della lunghezza specificata. Siccome mi ricordo ancora delle lezioni di scrittura di sceneggiature a scuola, lasciate che vi mostri come funzionano piuttosto che cercare di spiegarvelo:

div { height: 50vh; }

In questo esempio, l’altezza del div sarebbe esattamente la metà dell’altezza della viewport: 1vh = 1% dell’altezza della viewport, così ha senso immaginare che 50vh = 50% dell’altezza della viewport.

Al cambiare della dimensione della viewport cambia il valore dell’unità, ma il vantaggio di questa rispetto alle percentuali è che non dovete preoccuparvi degli elementi contenitori: un oggetto con un valore di 10vw avrà sempre questa larghezza, indipendentemente dalla larghezza dei suoi genitori.

C’è anche un’unità vmin, che equivale alla minima dimensione di vh o vw ed è stato recentemente annunciato che una corrispondente unità vmax verrà aggiunta alla specifica (sebbene non lo sia ancora al momento in cui scrivo).

Al momento, le si trova in IE9+, Chrome e Safari 6.

Valori calcolati#section4

Quando si realizza un sito fluido e/o responsive, si incontra sicuramente il problema della combinazione di più unità, poiché si vuole una griglia che abbia le dimensioni in percentuale ma i margini fissi. Per esempio:

div {
  margin: 0 20px;
  width: 33%; 
}

Se il vostro layout utilizza solo padding e border, allora potete usare box-sizing per aiutarvi ad aggirare il problema, ma non vi sarà d’aiuto con i margin. Un approccio migliore e più flessibile consiste nell’usare la funzione valore calc(), che vi permette di fare operazioni matematiche con diverse unità, come:

div {
  margin: 0 20px;
  width: calc(33% - 40px);
}

Non siete limitati ad usarla solo su width: potete usarla con qualunque valore di lunghezza e se volete davvero andare in fondo alla tana del coniglio, potete anche usare calc() all’interno di calc().

IE9+ usa la versione senza prefisso (!), Firefox la usa con il prefisso -moz- (ma dovrebbe apparire senza prefisso nella versione 16 o 17) e Chrome e Safari l’hanno implementata con il prefisso -webkit-. Tuttavia, pare che non ci sia ancora in Webkit mobile.

Caricare un sottoinsieme di caratteri#section5

Le performance brillanti sono sempre state importanti, ma la vasta gamma di dispositivi mobili presenti al momento sul mercato (con un’ampia variabilità e incertezza nella velocità di connessione) forse le rende ancora più importanti. Un modo per rendere più veloce il caricamento di una pagina consiste nel tenere ridotta la dimensione dei files esterni, il che rende molto ben gradita l’introduzione di una nuova proprietà per @font-face che aiuta a fare proprio questo.

La proprietà in questione è unicode-range e prende come valore un range di caratteri unicode. Quando importate le risorse esterne, solo i caratteri specificati qui dentro vengono caricati dal file del font al posto dell’intero insieme. Questo codice dimostra come caricare solo tre caratteri dal file foo.ttf:

@font-face {
  font-family: foo;
  src: url('foo.ttf');
  unicode-range: U+31-33;
}

È particolarmente utile se state usando delle font icon e volete mostrarne solo un sottoinsieme in una data pagina. In un test che ho fatto, l’utilizzo di unicode-range ha permesso di togliere in media 0.85 secondi dal tempo di caricamento di un file di font, che non è una cosa da poco. Ovviamente, i vostri dati possono variare.

Questa proprietà è attualmente implementata in IE9+ e nei browser WebKit come Chrome e Safari.

Nuove pseudo-classi#section6

Le unità e i valori sono una cosa buona e giusta, ma mi entusiasmano particolarmente i selettori e le pseudo-classi. Uscirsene con un intelligente pattern di selezione, anche se è nascosto dove solo pochi potrebbero vederlo, mi fa sentire come un artigiano. Parafrasando il padre di Steve Jobs: devi fare il retro della cancellata bello quanto il davanti anche se nessun altro saprà che l’hai fatto, perché tu lo saprai.

La prima volta che ho usato :nth-of-type() ho avuto una rivelazione, come se avessi abbattuto le porte della percezione. Ok, sto un po’ esagerando, ma ci sono un paio di pseudo-classi CSS per cui vale davvero la pena di entusiasmarsi.

La pseudo-classe “negation”#section7

Probabilmente, non vi renderete conto di quanto sia utile la pseudo-classe :not() finché non l’avrete provata. L’argomento che si passa a :not() è un semplice selettore, niente di più. Quando un selettore crea una lista di soggetti che include :not(), tutti gli elementi che corrispondono all’argomento verranno esclusi dalla lista. Lo so, suona complicato anche a me, ma è in realtà piuttosto semplice.

Immaginatevi questo: avete una lista di item e volete applicare una regola a tutti gli item dispari, ma mai all’ultimo della lista. Al momento, dovreste fare qualcosa del genere:

li { color: #00F; }
li:nth-child(odd) { color: #F00; }
li:last-child { color: #00F; } 

Con la pseudo-classe “negazione” potete escludere l’ultimo item dalla regola utilizzando :last-child come argomento, riducendo così il numero di regole di una e rendendo il codice un po’ più semplice da gestire:

li { color: #00F; }
li:nth-child(odd):not(:last-child) { color: #F00; }

Non è nulla di eclatante e come ho già mostrato potete farne a meno, ma è piuttosto utile. Ho avuto l’opportunità di usarla in un progetto creato con WebKit integrato e ha dimostrato il suo valore in maniera coerente. Onestamente, è una delle mie pseudo-classi preferite.

È proprio così, ho le mie pseudo-classi preferite.

Questa è la feature più implementata tra quelle di cui parlo in questo articolo: la si trova in IE9+ e in tutti i browser moderni, senza prefisso. E se avete familiarità con jQuery, potreste essere abituati ad usarla: ne fa parte fin dalla versione 1.0, insieme all’analogo metodo not().

La pseudo-class “matches-any”#section8

La pseudo-classe :matches() accetta come argomento un semplice selettore, un selettore composto, un elenco separato da virgole o una qualsiasi combinazione di questi item. Grande! Ma cosa fa?

È maggiormente utile per ridurre la ridondanza dei selettori multipli. Come caso d’uso, immaginate di avere un certo numero di elementi p in diversi container, ma volete selezionarne solo alcuni. La regola di stile che scrivereste potrebbe assomigliare a questa:

.home header p,
.home footer p,
.home aside p {
  color: #F00;
}

Con :matches() potete accorciarla notevolmente cercando degli elementi in comune tra i selettori: nel nostro esempio hanno tutti .home all’inizio e alla fine nel p, pertanto possiamo usare :matches() per raggruppare tutti gli elementi tra questi. Confusi? Ecco come appare:

.home :matches(header,footer,aside) p { color: #F00; }

In realtà, fa parte di CSS4 (CSS Selectors Level 4, per essere precisi) e nella stessa specifica si dice anche che saremo in grado di usare la stessa sintassi per più selettori, separati da virgole, nelle versioni future di :not(). Forte!

Al momento, :matches() è presente in Chrome e Safari con il prefisso -webkit- e in Firefox con il suo vecchio nome, :any(), con il prefisso -moz-.

Vi siete già innamorati dei cavalli da traino?#section9

L’aspetto migliore di tutte queste nuove feature presentate in questo articolo è che risolvono dei problemi reali, dalle piccole ma noiose ripetizioni dei selettori alle nuove e continue sfide poste dalla creazione di siti responsive ad alta performance. Infatti, posso benissimo immaginare l’uso di ciascuna di queste feature in maniera regolare.

Nuove feature come i filtri potrebbero avere maggior visibilità, ma è molto più probabile che troviate quelle presentate qui utili in tutto quello che create.

Ciascuna di queste renderà un po’ più semplice la vostra vita professionale, espandendo il ventaglio di possibilità di quello che potete ottenere, e non c’è niente di noioso in tutto questo!

Illustrazioni: {carlok}