![](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2012\/08\/n58b.png\")
Il futuro di CSS ci d\u00e0 molte ragioni per cui essere emozionati: da un lato, c’\u00e8 una vasta gamma di nuovi metodi che rivoluzioneranno il modo in cui creiamo le nostre pagine sul web; dall’altro, c’\u00e8 un nuovo insieme di effetti grafici che ci permetteranno l’uso di filtri e ombreggiature al volo. Le persone adorano queste cose e i magazine e i blog sono pieni di articoli che li riguardano.<\/p>\n
Ma se questi strumenti fanno la parte dello show di CSS, allora penso che sia ora di dare un po’ del nostro amore ai cavalli da traino: i dettagli pratici dei componenti del linguaggio, come i selettori, le unit\u00e0 e le funzioni. Spesso li chiamo “le parti noiose”, sebbene lo dico solo con un grande affetto, un amore che penso dovreste condividere con me.<\/p>\n
Per capire perch\u00e9, diamo un’occhiata ad alcune delle migliori nuove parti noiose in CSS, le parti su cui si lavora in laboratori male illuminati, lontani dalla luce delle nuove cose glamour nelle vetrine dei negozi. Alcune di queste parti noiose sono in giro da un po’ ma si meritano pi\u00f9 riconoscimenti, mentre altre stanno appena cominciando ad apparire nei browser. Tuttavia, rivoluzioneranno tutte il modo in cui lavoriamo, sebbene in modi umili e senza pretese.<\/p>\n
\u00c8 probabile che, dato che siete dei developer illuminati, avrete gi\u00e0 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\u00e0. Ad esempio, al giorno d’oggi \u00e8 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\u00f2 probabilmente somiglia a questo:<\/p>\n
\u00a0<\/p>\n
html { font-size: 10px; }\np { font-size: 1.4em; }<\/code><\/pre>\n\u00a0<\/p>\n
Questa cosa va bene, non \u00e8 affatto un problema, finch\u00e9 non si ha un elemento figlio a cui volete dare una dimensione di font differente. Ad esempio, in un markup come questo:<\/p>\n
\u00a0<\/p>\n
The cat sat on the <span>mat<\/span>.<\/code><\/pre>\n\u00a0<\/p>\n
Se volete che lo span abbia un font size pi\u00f9 piccolo, diciamo 1.2em, cosa dovete fare? Tirate fuori la calcolatrice e calcolate 1.2 diviso 1.4. Il risultato \u00e8 questo:<\/p>\n
\u00a0<\/p>\n
p span { font-size: 0.85714em; }<\/code><\/pre>\n\u00a0<\/p>\n
Inoltre, il problema non si limita nemmeno ad usare em<\/code>. Se state creando un sito fluido usando le percentuali, saprete che la percentuale \u00e8 relativa al suo contenitore: quindi, se avete un elemento che volete che sia il 40% del suo genitore, la cui lunghezza \u00e8 75%, allora la larghezza dell’elemento deve essere impostata al 53.33333%.<\/p>\nNon \u00e8 il massimo.<\/p>\n<\/div>\n
\nLunghezze relative alla root<\/h2>\n
Per combattere questo problema della dimensione dei font, abbiamo ora accesso all’unit\u00e0 rem<\/code> (root em). Si tratta sempre di un’unit\u00e0 relativa, ma \u00e8 sempre relativa a un valore base fisso, che \u00e8 la font size dell’elemento root del documento (in HTML, \u00e8 sempre l’elemento html<\/code>). Presumendo la stessa dimensione del font di 10px che abbiamo usato nell’esempio precedente, le regole CSS richieste in questo caso sono:<\/p>\n\u00a0<\/p>\n
p { font-size: 1.4rem; }\np span { font-size: 1.2rem; }<\/code><\/pre>\n\u00a0<\/p>\n
Ora entrambe le regole sono relative alla dimensione del font size della root: un modo molto pi\u00f9 elegante e semplice in cui lavorare, specialmente se avete una base semplice, come 10px o 12px. \u00c8 come tornare indietro e usare di nuovo i valori espressi in px<\/code>, solo che in questo modo sono scalabili.<\/p>\nQuesta \u00e8 una delle features meglio supportate tra quelle che descriver\u00f2 in questo articolo: la si trova in tutti i browser moderni, incluso IE9 e manca solo in Opera Mobile<\/a>.<\/p>\n<\/div>\n\nLunghezze relative alla viewport<\/h2>\n
Se pensiate che l’unit\u00e0 rem<\/code> sia cool (io lo penso), sarete felici di sapere che c’\u00e8 un altro nuovo insieme di unit\u00e0 di lunghezza per combattere il problema delle percentuali. Queste funzionano in maniera simile a rem<\/code>, tranne che sono relative non ad un valore definito dall’utente della root del documento, ma alle dimensioni stesse della viewport del dispositivo.<\/p>\nLe due unit\u00e0 principali sono vh<\/code> e vw<\/code>, 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:<\/p>\n\u00a0<\/p>\n
div { height: 50vh; }<\/code><\/pre>\n\u00a0<\/p>\n
In questo esempio, l’altezza del div<\/code> sarebbe esattamente la met\u00e0 dell’altezza della viewport: 1vh = 1% dell’altezza della viewport, cos\u00ec ha senso immaginare che 50vh = 50% dell’altezza della viewport.<\/p>\nAl cambiare della dimensione della viewport cambia il valore dell’unit\u00e0, ma il vantaggio di questa rispetto alle percentuali \u00e8 che non dovete preoccuparvi degli elementi contenitori: un oggetto con un valore di 10vw avr\u00e0 sempre questa larghezza, indipendentemente dalla larghezza dei suoi genitori.<\/p>\n
C’\u00e8 anche un’unit\u00e0 vmin<\/code>, che equivale alla minima dimensione di vh<\/code> o vw<\/code> ed \u00e8 stato recentemente annunciato che una corrispondente unit\u00e0 vmax<\/code> verr\u00e0 aggiunta alla specifica (sebbene non lo sia ancora al momento in cui scrivo).<\/p>\nAl momento, le si trova in IE9+, Chrome e Safari 6.<\/p>\n<\/div>\n
\nValori calcolati<\/h2>\n
Quando si realizza un sito fluido e\/o responsive, si incontra sicuramente il problema della combinazione di pi\u00f9 unit\u00e0, poich\u00e9 si vuole una griglia che abbia le dimensioni in percentuale ma i margini fissi. Per esempio:<\/p>\n
\u00a0<\/p>\n
div {\n margin: 0 20px;\n width: 33%; \n}<\/code><\/pre>\n\u00a0<\/p>\n
Se il vostro layout utilizza solo padding e border, allora potete usare box-sizing<\/code> per aiutarvi ad aggirare il problema, ma non vi sar\u00e0 d’aiuto con i margin. Un approccio migliore e pi\u00f9 flessibile consiste nell’usare la funzione valore calc()<\/code>, che vi permette di fare operazioni matematiche con diverse unit\u00e0, come:<\/p>\n\u00a0<\/p>\n
div {\n margin: 0 20px;\n width: calc(33% - 40px);\n}<\/code><\/pre>\n\u00a0<\/p>\n
Non siete limitati ad usarla solo su width<\/code>: potete usarla con qualunque valore di lunghezza e se volete davvero andare in fondo alla tana del coniglio, potete anche usare calc()<\/code> all’interno di calc()<\/code>.<\/p>\nIE9+ usa la versione senza prefisso (!), Firefox la usa con il prefisso -moz-<\/em> (ma dovrebbe apparire senza prefisso nella versione 16 o 17) e Chrome e Safari l’hanno implementata con il prefisso -webkit-<\/em>. Tuttavia, pare che non ci sia ancora in Webkit mobile<\/a>.<\/p>\n<\/div>\n\nCaricare un sottoinsieme di caratteri<\/h2>\n
Le performance brillanti sono sempre state importanti, ma la vasta gamma di dispositivi mobili presenti al momento sul mercato (con un’ampia variabilit\u00e0 e incertezza nella velocit\u00e0 di connessione) forse le rende ancora pi\u00f9 importanti. Un modo per rendere pi\u00f9 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\u00e0 per @font-face<\/code> che aiuta a fare proprio questo.<\/p>\nLa propriet\u00e0 in questione \u00e8 unicode-range<\/code> 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<\/em>:<\/p>\n\u00a0<\/p>\n
@font-face {\n font-family: foo;\n src: url('foo.ttf');\n unicode-range: U+31-33;\n}<\/code><\/pre>\n\u00a0<\/p>\n
\u00c8 particolarmente utile se state usando delle font icon<\/a> e volete mostrarne solo un sottoinsieme in una data pagina. In un test che ho fatto, l’utilizzo di unicode-range<\/code> ha permesso di togliere in media 0.85 secondi dal tempo di caricamento di un file di font, che non \u00e8 una cosa da poco. Ovviamente, i vostri dati possono variare.<\/p>\nQuesta propriet\u00e0 \u00e8 attualmente implementata in IE9+ e nei browser WebKit come Chrome e Safari.<\/p>\n<\/div>\n