Uso di Normalize.css per lo sviluppo omogeneo

La compatibilità del browser è una grande parte dell'accessibilità sul web. Gli sviluppatori devono considerare il varianza del pubblico e delle versioni del browser che richiedono supporto. Sebbene le reimpostazioni CSS siano un'opzione, la maggior parte degli sviluppatori preferisce Normalize.css per la sua semplicità e compatibilità incrociata in tutti i moderni browser web.

In questo post coprirò le basi di Normalize e come si confronta con i ripristini CSS generali. Questa non è una biblioteca complicata e non dovrebbe richiedere più di un paio d'ore per capire. Ma la chiave per Normalizzare è l'apprendimento Come per implementarlo correttamente e con giudizio.

Reimposta browser vs. Normalizza

Per anni ho usato una versione personalizzata delle reimpostazioni CSS di Eric Meyer. Questi sono stati sufficienti per la maggior parte dei miei progetti e non hanno causato problemi importanti. Tuttavia, Normalize ha cambiato la mia vista di reset perché funziona in modo diverso rispetto a un reset CSS. È importante capire le differenze.

Pensa a Normalize come a indumento applicato in modo coerente a tutti i browser, e pensa a a Ripristino dei CSS come detonazione termonucleare attraverso tutti i browser.

Normalizza stili e formati intestazioni, paragrafi, blockquotes e elementi comuni in modo che appaiono identici (o abbastanza vicini) in tutti i browser supportati. I resettaggi CSS cancellano completamente la lavagna così ci sono senza valori predefiniti per qualsiasi cosa.

Con un reset CSS i tuoi titoli possono avere lo stesso aspetto dei tuoi paragrafi; gli elementi non hanno padding, margini o spaziatura di alcun tipo. Con un reset CSS devi fornire un nuovo codice per migliorare lo stile. Con Normalizza ottieni a stile pre-progettato su cui si può costruire.

Quindi uno di questi è migliore dell'altro? È un argomento molto discusso, anche se un punto argomentativo afferma che Normalizza funziona meglio per compatibilità e produce file di dimensioni più ridotte.

“Dovrei sostenere che la normalizzazione è meglio della reimpostazione. Ciò comporterà il trasferimento di meno CSS sul filo, un migliore utilizzo delle impostazioni predefinite di UA e una migliore comprensione di come sono gli elementi significava da visualizzare.”

Se ti innamori di Normalize o preferisci un reset tipico, è importante capire almeno entrambi i lati e scegliere quello che si adatta meglio. Pochissimi sviluppatori iniziano a scrivere codice da zero, quindi Normalize o un reset CSS sono quasi necessari per lo sviluppo moderno del frontend.

Se vuoi provare un reset CSS qui ci sono alcune scelte popolari:

Reimposta di Eric Meyer
Reset HTML5
Reset HTML5Doctor

Normalizza config

Il creatore di normalizzazione Nicolas Gallagher ha scritto un post introduttivo che ha portato questa affermazione:

“Normalize.css è un piccolo file CSS che offre una migliore coerenza tra browser nello stile predefinito degli elementi HTML. È una versione moderna, compatibile con HTML5, alternativa al tradizionale ripristino CSS.”

Nel corso degli anni questo è diventato una libreria affidabile utilizzata dagli sviluppatori di tutto il mondo. Normalize è stato persino usato in qualche modo in Bootstrap e Pure CSS.

Esistono due modi per utilizzare Normalize in un progetto: modificare l'origine per personalizzare il proprio foglio di stile Normalizza o usarlo come base e aggiungere stili in cima.

Il primo è una strategia di scelta e scelta in cui si passa attraverso il file Normalize.css e si elimina ciò che non è necessario per creare il proprio foglio di stile personalizzato. Questo è il migliore per ogni progetto per mantenere basso il file.

In alternativa, alcuni sviluppatori includono l'intero file Normalize.css e creano il proprio foglio di stile. L'intero foglio di stile Normalizza si estende su oltre 420 righe di codice che equivalgono a ~ 6.8 KB non compressi.

Nessuno dei due metodi è migliore dell'altro e vale la pena seguire ciò che funziona meglio per ogni progetto o il tuo flusso di lavoro preferito.

Per iniziare, scarica una copia di Normalize da GitHub o ospitala da una CDN esterna. Puoi anche estrarre l'ultima versione di Normalize direttamente da NPM in questo modo:

installazione di npm --save normalize.css

Se non vuoi scaricare alcun file puoi anche creare un nuovo progetto CodePen che può aggiungere Normalize con un clic di un pulsante.

Poiché Normalize è modulare, puoi rimuovere temporaneamente le sezioni o persino creare la tua configurazione personalizzata di Normalize. Quindi puoi iniziare ogni progetto con porzioni selezionate come gli elementi di visualizzazione HTML5 rimuovendo gli stili per i contenuti incorporati.

Ogni regola Normalizza ha un commento CSS corrispondente che spiega cosa fa e quali problemi / bug risolve. Alcuni sono ovvi come l'impostazione blocco di visualizzazione su elementi HTML5 più recenti.

Altri sono meno ovvi come questo codice SVG che nasconde l'overflow in Internet Explorer:

svg: not (: root) overflow: hidden;

Consiglio vivamente di sfogliare il foglio di stile per vedere esattamente come funziona e per sapere se Normalize sarebbe giusto per il tuo progetto.

Normalize.css in Web Design

La versione più recente di Normalize v4.0 offre un supporto browser diffuso.

Chrome (ultimi due)
Edge (ultimi due)
Firefox (ultimi due)
Firefox ESR
Internet Explorer 8+
Opera (ultimi due)
Safari 6+

Da quello che posso dire, Normalize può supportare versioni precedenti di browser con aggiornamenti costanti come Firefox. Ma il “ufficiale” il supporto include solo le due versioni più recenti di Chrome / Edge / FF / Opera.

Anche IE6 + e Safari 4+ sono supportati con Normalize v1, ma quella versione non è più aggiornata.

È fondamentale controllare le versioni del browser con uno strumento come Google Analytics. Questo ti darà una migliore idea se Normalize può essere uno strumento utile per il lavoro di web design moderno.

Ulteriori risorse

Non c'è molto da insegnare specificamente sulla normalizzazione, quindi la maggior parte dell'apprendimento avviene facendo.

E sinceramente non c'è molto da spiegare che non si può raccogliere leggendo il foglio di stile e copiando / alterando il codice secondo necessità. Ma se stai cercando altre informazioni rilevanti ho aggiunto alcuni link qui sotto.

Video introduttivi