About normalize.css

Normalize.css è un piccolo file CSS che permette una maggiore coerenza cross-browser dello stile di default degli elementi HTML. È un’alternativa moderna, già pronta per HTML5, al CSS reset tradizionale.
About normalize.css

Specifiche sulla traduzione

Di seguito la traduzione dell’articolo “About normalize.css” di Nicolas Gallagher.

Normalize.css

Normalize.css è un piccolo file CSS che permette una maggiore coerenza cross-browser dello stile di default degli elementi HTML. È un’alternativa moderna, già pronta per HTML5, al CSS reset tradizionale.

Normalize.css è attualmente usato da HTML5 Boilerplate, Twitter Bootstrap, GOV.UK, Tinker.io, CSS Tricks e da tanti altri framework, toolkit e siti web.

Normalize: un’introduzione

Normalize.css è un’alternativa ai CSS reset. Il progetto è il risultato di centinaia di ore di ricerca approfondita da parte di @necolas e @jon_neal sulle differenze fra gli stili di default dei browser.

Gli obiettivi di normalize.css sono i seguenti:

  • Conservare i valori predefiniti utili dei browser anziché cancellarli.
  • Normalizzare gli stili per una vasta gamma di elementi HTML.
  • Correggere i bug e altre comuni incoerenze dei browser.
  • Perfezionare l’usabilità con sottili miglioramenti.
  • Spiegare il codice usando commenti e una documentazione dettagliata.

Normalize.css supporta una vasta gamma di browser (anche mobile) e include un CSS che normalizza elementi HTML5, la tipografia, le liste, il contenuto incorporato, i form e le tabelle.

Nonostante il progetto sia fondato sul principio della normalizzazione, esso usa valori di default pragmatici laddove siano preferibili.

Normalize vs Reset: il confronto

È importante capire in modo dettagliato le differenze fra normalize.css e i tradizionali CSS reset.

Normalize.css conserva i valori di default utili

I Reset impongono uno stile visivo omogeneo, appiattendo gli stili di default per quasi tutti gli elementi. Normalize.css, invece, conserva molti stili predefiniti dei browser che possono risultare utili. Questo significa che non c’è bisogno di ridichiarare gli stili per tutti gli elementi tipografici comuni.

Quando un elemento ha stili di default diversi in browser diversi, normalize.css ha l’obiettivo di rendere quegli stili coerenti e in linea con gli standard moderni, quando possibile.

Normalize.css corregge i bug comuni

Fixa su browser desktop e mobile i bug comuni che i reset non riescono ad individuare. Questo include le impostazioni di display per gli elementi HTML5, le misure dei caratteri nel testo preformattato, l’overflow SVG in IE9 e molti bug di form fra browser e sistemi operativi.

Ad esempio, ecco come normalize.css rende coerente e stilizzabile cross-browser il nuovo input type search:

/*
 * 1. Addresses appearance set to searchfield in S5, Chrome
 * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/*
 * Removes inner padding and search cancel button in S5, Chrome on OS X
 */

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

I reset spesso non riescono a portare i browser ad un livello di partenza per il rendering degli elementi. Questo accade in particolare nei form, un’area in cui normalize.css può fornire un’assistenza particolarmente efficace.

Normalize.css non affolla i tuoi strumenti per il debugging

Un fastidio comune nell’uso dei reset è la grande catena di eredità che appare negli strumenti di debug per i css.

Questo non è più un grande problema con normalize.css, grazie agli stili targettizzati e all’uso conservativo dei selettori multipli.

Normalize.css è modulare

Il progetto è diviso in sezioni piuttosto indipendenti, consentendoti facilmente di vedere esattamente quali elementi hanno bisogno di stili specifici. Inoltre, normalize ti dà la possibilità di rimuovere sezioni (ad esempio, le normalizzazioni dei form) se sai che il tuo sito non ne avrà mai bisogno.

Normalize.css ha molta documentazione

Normalize.css è fondato su una ricerca cross-browser dettagliata e su test metodici. Il file è documentato inline e in maniera più completa su GitHub Wiki. Questo vuol dire che potrai scoprire cosa fa ciascuna linea di codice, perché è stata inclusa nella guida, quali sono le differenze fra browser, e in più potrai testarlo personalmente.

Il progetto ha lo scopo di educare le persone sul rendering degli elementi di default da parte dei browser, e di rendere più semplice il coinvolgimento nel proporre miglioramenti.

Come usare normalize.css

Prima di tutto, scarica normalize.css da GitHub. Sono due i metodi principali per usarlo.

Metodo 1: usa normalize.css come un punto di partenza per la base CSS del tuo progetto personale, personalizzando i valori per adattarli alle esigenze di design.

Metodo 2: includi normalize.css senza ritoccarlo e parti da lì, facendo l’override dei default nel tuo CSS in un secondo momento, se è necessario.

Commenti di chiusura

Normalize.css ha possibilità e metodi di esecuzione molto diversi rispetto ai CSS reset. Vale la pena provarlo per capire se si adatta bene al tuo approccio e alle tue preferenze di sviluppo.

Il progetto è sviluppato in open source su GitHub. Tutti possono riportare problemi e inserire patch. Tutta la storia del progetto è visibile a chiunque, e i contesti e ragionamenti dietro ogni cambiamento si possono ritrovare nei commit e nei thread.

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github