Qual è la differenza tra Normalize.css e Reset CSS?

565

So cos'è CSS Reset, ma recentemente ho sentito parlare di questa nuova cosa chiamata Normalize.css

Qual è la differenza tra Normalize.css e Reset CSS ?

Qual è la differenza tra la normalizzazione dei CSS e il ripristino dei CSS?

È solo una nuova parola d'ordine per il ripristino CSS?

css normalize-css

— Jitendra Vyas
fonte

800

Lavoro su normalize.css.

Le principali differenze sono:

Normalize.css conserva utili impostazioni predefinite piuttosto che "non rimuovere" tutto. Ad esempio, elementi come supo sub"funzionano" dopo aver incluso normalize.css (e in realtà sono resi più robusti) mentre sono visivamente indistinguibili dal testo normale dopo aver incluso reset.css. Quindi, normalize.css non ti impone un punto di partenza visivo (omogeneità). Questo potrebbe non essere per tutti i gusti. La cosa migliore da fare è sperimentare con entrambi e vedere quali gel hanno le tue preferenze.
Normalize.css corregge alcuni bug comuni che non rientrano nell'ambito di reset.css. Ha un ambito più ampio di reset.css e fornisce anche correzioni di bug per problemi comuni come: impostazioni di visualizzazione per elementi HTML5, mancanza di fontereditarietà da elementi del modulo, correzione del font-sizerendering per pre, overflow SVG in IE9 e buttonbug di stile in iOS.
Normalize.css non ingombra i tuoi strumenti di sviluppo. Un'irritazione comune quando si utilizza reset.css è la grande catena di ereditarietà visualizzata negli strumenti di debug CSS del browser. Questo non è un problema con normalize.css a causa degli stili mirati.
Normalize.css è più modulare. Il progetto è suddiviso in sezioni relativamente indipendenti, semplificando potenzialmente la rimozione di sezioni (come le normalizzazioni dei moduli) se sai che non saranno mai necessarie per il tuo sito web.
Normalize.css ha una documentazione migliore. Il codice normalize.css è documentato in linea e in modo più completo nel Wiki di GitHub . Ciò significa che puoi scoprire cosa sta facendo ogni riga di codice, perché è stata inclusa, quali sono le differenze tra i browser e più facilmente eseguire i tuoi test. Il progetto ha lo scopo di aiutare le persone a istruire su come i browser visualizzano gli elementi per impostazione predefinita e rendere più facile per loro essere coinvolti nell'invio di miglioramenti.

Ho scritto in modo più dettagliato su questo in un articolo su normalize.css

— necolas
fonte

19

Abbastanza spesso, non li lasci a zero (quando usi reset), quindi stai scrivendo meno codice. Se vuoi azzerare alcuni valori, allora quello stile è accoppiato all'elemento per cui è pensato e dovrebbe facilitare il debug.

— necolas,

8

E QUESTO è un problema significativo con molti ripristini, incluso il fatto che l'azzeramento di tutto rallenta anche il browser.

— Rob

4

E QUESTO è anche il vantaggio dei ripristini: normalizzare i problemi di dimensionamento dei mancati come questo: github.com/yahoo/pure/issues/395

— Daniel Sokolowski

4

Mi manca il punto quando penso che, sì, normalmente non vuoi che il padding e il margine siano zero ma, no, non vuoi nemmeno il default?

— guioconnor,

9

Personalmente ho disattivato Normalize, anche se lo uso ancora. Molti dei punti qui sono davvero esagerati (migliore documentazione ...?). Normalizzare è supponente, quindi ti impone un punto di partenza visivo (nonostante ciò che dice questa risposta). Può anche diventare obsoleto. Reset.css non può mai diventare obsoleto dopo averlo usato. E è più probabile che tu voglia che i margini e il padding siano 0 rispetto a qualsiasi altro numero che ti viene in mente, quindi in realtà è utile avere tutto azzerato durante lo sviluppo. Normalizzare è buono per i problemi del browser, tuttavia, e questo è il motivo principale per cui lo uso.

— Chuck Le Butt,

255

La differenza principale è che:

I ripristini CSS hanno lo scopo di rimuovere tutto lo stile del browser integrato. Gli elementi standard come H1-6, p, strong, em, eccetera finiscono per apparire esattamente uguali, senza alcuna decorazione. Dovresti quindi aggiungere tu stesso tutta la decorazione .
Normalizzare CSS mira a rendere coerente lo stile del browser integrato tra i browser. Elementi come H1-6 appariranno in grassetto, più grandi ecc. In modo coerente tra i browser. Dovresti quindi aggiungere solo la differenza nella decorazione di cui il tuo design ha bisogno.

Se il tuo disegno a) segue le convenzioni comuni per la tipografia eccetera, e b) Normalize.css funziona per il tuo pubblico di destinazione, l'uso di Normalize.CSS anziché un reset CSS renderà il tuo CSS più piccolo e più veloce da scrivere.

— Jesper M
fonte

6

@Jitendra Vyas: - c'è davvero un solo modo: leggi il ben commentato codice Normalize.CSS e decidi se è adatto alle tue esigenze o meno. github.com/necolas/normalize.css/blob/master/normalize.css

— Jesper M

Un'altra nota: Normalize.css mira a essere il più discreto possibile, il che consente a uno sviluppatore di scrivere il proprio codice più facilmente senza dover combattere i conflitti di specificità.

— zzzzBov,

quindi diciamo che voglio usare reset durante lo sviluppo. E una volta fatto voglio normalize.css o alcuni JS che prendono tutte le cose che non sono cambiate e sono le stesse nel browser. Oppure ho cambiato e dopo averli modificati sono diventati gli stessi del browser e li ho rimossi dal lato client. Quindi il ripristino aiuterebbe durante lo sviluppo di quel "programma" sul lato client più veloce. Entrambi felici. E un modo molto più intelligente di vivere.

— Muhammad Umer,

In pratica finirai comunque per sovrascrivere tutti gli stili di Normalize. La teoria è fantastica, ma in questo mondo OOCSS non funziona mai così in pratica.

— Chuck Le Butt,

40

Normalize.css è principalmente un insieme di stili, basato su ciò che il suo autore pensava sarebbe stato bello, e lo faceva apparire coerente tra i browser. Ripristina sostanzialmente lo stile delle strisce dagli elementi in modo da avere un maggiore controllo sullo stile di tutto.

Uso entrambi.

Alcuni stili da Reset, altri da Normalize.css. Ad esempio, da Normalize.css, esiste uno stile per assicurarsi che tutti gli elementi di input abbiano lo stesso carattere, che non si verifica (tra input di testo e aree di testo). Il reset non ha uno stile simile, quindi gli input hanno caratteri diversi, che normalmente non sono desiderati.

Quindi, basicamente, usare i due file CSS fa un lavoro migliore "Equalizzando" tutto;)

Saluti!

— ricmetalster
fonte

1

Questa è una buona risposta pragmatica. Non è necessariamente l'uno o l'altro. Prendi quello che vuoi da ciascuno. Mi piace un ripristino completo, ma Normalizer offre alcuni bei pezzi che funzionano bene in cima.

— Disdetta

3

@ricmetalster, quindi hai dovuto riscrivere il tuo css per unire le funzionalità di reset.css e normalize.css?

— ajjay

2

Se si desidera utilizzare entrambi, è possibile elencare prima "ripristina", quindi "normalizzare", quindi aggiungere i propri stili in cima?

— Craig,

Prendo l'approccio "non pensarci troppo" e uso entrambi e li chiamo come include nelle mie importazioni SASS @import '_normalize' && '_reset'

— killscreen

6

La prima reset.cssè la peggior libreria che puoi usare, perché rimuove la struttura standard dell'HTML e mostra tutto ciò che scrivi proprio come testo, dopo aver assegnato i valori del margine di riempimento e altri attributi 0. Quindi, per esempio, lo troverai <H1>, sarà lo stesso di <H6>.

D'altra parte Normalize.cssutilizza la struttura standard e corregge anche quasi tutti gli errori esistenti in essa. Ad esempio, risolve il problema con la visualizzazione di un modulo da un browser all'altro. Normalizza le correzioni modificando queste funzionalità in modo che i tuoi elementi vengano mostrati uguali su tutti i browser.

— N.Elsayed
fonte

1

Dipende dal tuo caso d'uso. Considerando il tuo esempio, se devo modificare gli stili di carattere di tutti i tag di intestazione per il mio progetto, non avrò davvero alcun uso dei valori predefiniti, vero? Non si dovrebbe etichettare una biblioteca come la "peggiore" solo perché non si trova un uso nei propri progetti.

— Debojyoti Ghosh,

Uno degli scopi principali del reset è combattere i problemi che sorgono dagli stili applicati dal browser, il che è molto utile. Penso anche che non dovrebbe essere considerato una biblioteca.

— Isaac Pak,

@gdebojyoti Esistono alcuni casi d'uso, ma raramente desidero che tutte le intestazioni abbiano le stesse dimensioni, indipendentemente dai rispettivi stili di carattere.

— James Beninger,

5

Bene dalla sua descrizione sembra che cerchi di rendere coerente lo stile predefinito dell'agente utente su tutti i browser piuttosto che eliminare tutto lo stile predefinito come farebbe un reset.

Preserva impostazioni predefinite utili, a differenza di molti ripristini CSS.

— dbb
fonte

Quindi è meglio usare Normalize css su Reset?

— Jitendra Vyas,

3

@Jitendra Vyas - no. Gli strumenti sono diversi, non migliori o peggiori l'uno dell'altro. Scegli quello che ti aiuta a risolvere i problemi che hai di più.

— Quentin,

8

Dovrei sostenere che la normalizzazione è meglio del ripristino. Ciò comporterà il trasferimento di meno CSS sul cavo, un migliore utilizzo delle impostazioni predefinite UA e una migliore comprensione del modo in cui gli elementi devono essere visualizzati.

— Ryan Kinal,

5

il ripristino sembra una necessità per soddisfare le specifiche di progettazione personalizzate, in particolare su progetti di progettazione complessi e di tipo non standard. Sembra che la normalizzazione sia un buon modo per procedere pensando esclusivamente alla programmazione Web, ma spesso i siti Web sono un matrimonio tra programmazione Web e regole di progettazione dell'interfaccia utente / utente.

— user3170099
fonte

È eccessivo il 99% dei casi d'uso.

— Michael,

@Michael quale? resettare o normalizzare? (Sto solo cercando di capire la mente delle persone sull'argomento)

— Bren,

1

@Bren sia ripristinato che normalizzato. Conoscere i valori CSS predefiniti per ciascun elemento fa parte dell'essere un buon sviluppatore di front-end. Li vedo come metodi di forze brute inutili.

— Michael,

4

@Michael> Knowing the default CSS values for each element is part of being a good front end developer- è come dire che preferiresti lavorare con gli elettroni piuttosto che con un linguaggio di programmazione, perché questo è ciò che rende un buon sviluppatore. L'uso efficiente degli strumenti rende qualcuno un buon sviluppatore, il contrario è di solito nella categoria degli zeloti che perdono tempo

— nicholaswmin,

1

A volte, la soluzione migliore è utilizzare entrambi. A volte, non è necessario utilizzare nessuno dei due. E a volte, è di usare l'uno o l'altro. Se si desidera ripristinare tutti gli stili, inclusi margine e padding in tutti i browser, utilizzare reset.css. Quindi applicare tutte le decorazioni e gli stili da soli. Se semplicemente ti piacciono gli stili integrati ma desideri una maggiore sincronia tra browser, ad esempio le normalizzazioni, usa normalize.css. Ma se scegli di utilizzare sia reset.css che normalize.css, collega prima il foglio di stile reset.css e poi il foglio di stile normalize.css (immediatamente) in seguito. A volte non è sempre una questione di quale sia meglio, ma quando usare quale contro contro quando usare entrambi contro quando non usare nessuno dei due. A PARER MIO.

— Sean Tank Garvey
fonte

0

A questa domanda è già stata data risposta più volte, fornirò un breve riepilogo per ciascuno di essi, un esempio e approfondimenti a settembre 2019:

Normalize.css - come suggerisce il nome, normalizza gli stili nei browser per i loro agenti utente, cioè li rende uguali su tutti i browser a causa del motivo per impostazione predefinita sono leggermente diversi.

Esempio : il <h1>tag all'interno <section>di default di Google Chrome renderà più piccolo della dimensione "prevista" del <h1>tag. Microsoft Edge, d'altra parte, sta realizzando la dimensione "prevista" del <h1>tag. Normalize.css lo renderà coerente.

Stato attuale : il repository npm mostra che il pacchetto normalize.css ha attualmente più di 500k download a settimana. Le star di GitHub nel progetto del repository sono più di 36k.

Ripristina CSS : come suggerisce il nome, reimposta tutti gli stili, ovvero rimuove tutti gli stili dell'agente utente del browser.

Esempio : farebbe qualcosa del genere qui sotto:

html, body, div, span, ..., audio, video {  
   margin: 0;  
   padding: 0;  
   border: 0;  
   font-size: 100%;  
   font: inherit;  
   vertical-align: baseline; 
}

Stato attuale : è molto meno popolare di Normalize.css, il pacchetto reset-css mostra circa 26k download a settimana. Le star di GitHub sono solo 200, come si può notare dal repository del progetto .

— Daniel Danielecki
fonte