Utilizarea Normalize.css pentru dezvoltarea omogenă

Compatibilitatea browser-ului reprezintă o mare parte a accesibilității pe web. Dezvoltatorii trebuie să ia în considerare varietatea publicului și a versiunilor de browser care necesită suport. Deși resetările CSS sunt o opțiune, majoritatea devs preferă Normalize.css pentru simplitatea sa și compatibilitatea încrucișată în toate browserele web moderne.

În acest post voi acoperi elementele de bază ale programului Normalize și cum se compară cu restabilirea generală a CSS. Aceasta nu este o bibliotecă complicată și nu ar trebui să dureze mai mult de două ore pentru a înțelege. Dar cheia pentru Normalize este învățarea Cum să o pună în aplicare în mod corespunzător și în mod judicios.

Browserul se resetează în raport cu normalizarea

De ani de zile am folosit o versiune personalizată a resetărilor CSS ale lui Eric Meyer. Acestea au fost suficiente pentru majoritatea proiectelor mele și nu au cauzat probleme majore. Cu toate acestea, Normalize mi-a schimbat punctul de vedere al resetărilor deoarece funcționează diferit decât resetarea CSS. Este important să înțelegeți diferențele.

Gândiți-vă la Normalize ca la îmbrăcămintea se aplică în mod consecvent tuturor browserelor, și gândiți-vă la a Resetarea CSS ca o detonare termonucleară în toate browserele.

Normalizați stilurile și formatele titlurilor, paragrafelor, bloccotelor și elementelor comune astfel încât acestea să fie apar identice (sau destul de aproape) în toate browserele acceptate. Restorează CSS complet ștergeți ardezia astfel încât să existe fără defaults pentru orice.

Cu resetarea CSS, titlurile dvs. pot arăta la fel ca paragrafele dvs.; elementele nu au nici o căptușeală, margini sau spații de orice fel. Cu resetare CSS trebuie să furnizați un nou cod pentru a îmbunătăți stilul. Cu Normalize obțineți a stilul pre-proiectat care pot fi construite.

Deci este unul dintre aceștia mai bun decât celălalt? Este un subiect foarte dezbătut, deși un punct de argumentare afirmă că Normalize funcționează mai bine pentru compatibilitate și produce dimensiuni de fișiere mai mici.

“Ar trebui să susțin că normalizarea este mai bună decât resetarea. Aceasta va duce la transferarea mai puțin a CSS pe fir, la o utilizare mai bună a valorilor implicite ale UA și la o mai bună înțelegere a modului în care elementele sunt a însemnat a afișa.”

Indiferent dacă vă îndrăgostiți de Normalize sau preferați o resetare tipică, este important să înțelegeți cel puțin ambele părți și să alegeți ce se potrivește cel mai bine. Foarte puțini dezvoltatori încep codificarea de la zero, astfel încât normalizarea sau resetarea CSS este aproape necesară pentru dezvoltarea frontendă modernă.

Dacă doriți să încercați o resetare CSS aici sunt câteva alegeri populare:

• Restabilirea lui Eric Meyer
• Restabilire HTML5
• Restabilirea HTML5Doctor

Normalizați config

Creatorul de normalizare Nicolas Gallagher a scris un post introductiv care a condus cu această afirmație:

“Normalize.css este un fișier CSS mic care oferă o consistență mai bună a browserului în stilul implicit al elementelor HTML. Este o alternativă modernă, compatibilă cu HTML5, față de reinițializarea CSS tradițională.”

De-a lungul anilor, aceasta a devenit o bibliotecă de încredere utilizată de dezvoltatori din întreaga lume. Normalize a fost folosit într-o anumită măsură în Bootstrap și CSS Pure.

Există două moduri de a utiliza Normalize într-un proiect: editați sursa pentru a vă personaliza propria foaie de stil Normalize sau utilizați-o ca bază și adăugați stiluri în partea de sus.

Primul este o strategie de selectare și alegere în cazul în care treceți prin fișierul Normalize.css și ștergeți tot ceea ce nu este necesar pentru a vă crea propria foaie de stil personalizată. Acest lucru este cel mai bun pe o bază de proiect pentru a menține dimensiunea fișierului scăzut.

În mod alternativ, unii dezvoltatori includ întregul fișier Normalize.css și își construiesc propria foaie de stil în partea de sus a acestuia. Plăcile standard de normalizare acoperă 420 de linii de cod, care echivalează cu ~ 6,8 KB necomprimate.

Niciuna dintre metode nu este mai bună decât cealaltă și merită să urmați cele mai bune lucrări pentru fiecare proiect sau fluxul de lucru preferat.

Pentru a începe fie descărcați o copie a programului Normalize de la GitHub, fie găzduiți-o de pe un CDN extern. Puteți de asemenea să trageți cea mai recentă versiune de Normalize direct de la NPM cum ar fi:

npm instala --save normalize.css 

Dacă nu doriți să descărcați fișiere, puteți face chiar un nou proiect CodePen care poate adăuga Normalize la apăsarea unui buton.

Deoarece Normalize este modular, puteți să eliminați temporar secțiunile sau chiar să creați propria construcție personalizată a programului Normalize. Apoi, puteți începe fiecare proiect cu porțiuni selectate, cum ar fi elementele de afișare HTML5, în timp ce eliminați stilurile pentru conținutul încorporat.

Fiecare regulă Normalize are un comentariu CSS corespunzător care explică ce face și ce probleme / bug-uri rezolvă. Unele sunt evidente display: block pe elemente noi HTML5.

Altele sunt mai puțin evidente ca acest cod SVG care ascunde overflow-ul în Internet Explorer:

nu: (: rădăcină) overflow: hidden;  

Vă recomand să schimbați foaia de stil pentru a vedea exact cum funcționează și pentru a afla dacă Normalize ar fi potrivit pentru proiectul dvs..

Normalize.css În Web Design

Cea mai nouă versiune de Normalize v4.0 oferă suport browser extins.

• Chrome (ultimele două)
• Edge (ultimele două)
• Firefox (ultimele două)
• Firefox ESR
• Internet Explorer 8+
• Opera (ultimele două)
• Safari 6+

Din ceea ce pot spune, Normalize poate suporta versiuni vechi ale browserelor cu actualizări constante, cum ar fi Firefox. Cu exceptia “oficial” suportul include doar cele două versiuni cele mai recente ale Chrome / Edge / FF / Opera.

De asemenea, IE6 + și Safari 4+ sunt acceptate cu Normalize v1, însă versiunea respectivă nu mai este actualizată.

Este esențial să verificați versiunile browserului cu ajutorul unui instrument precum Google Analytics. Acest lucru vă va oferi o idee mai bună dacă Normalize poate fi un instrument util pentru munca modernă de web design.

Resurse suplimentare

Nu există prea multe pentru a preda în mod specific despre Normalize, astfel încât cea mai mare parte a învățării se întâmplă prin a face.

Și în mod real, nu este prea mult să explici că nu poți să ridici citirea prin foaia de stil și copierea / modificarea codului după cum este necesar. Dar dacă căutați alte informații relevante, am adăugat câteva linkuri de mai jos.

Articole similare

• Nicolas Gallagher: Despre Normalize.css
• Introducere în placa de bază HTML5
• Normalize.css vs Reset.css: Care dintre utilizări?

Intro Videoclipuri

• Folosind Normalize CSS
• Resetarea și normalizarea de către Envato
• Nicolas Gallagher - Gândire dincolo de scalabilul CSS