Normalize.css kasutamine homogeenseks arenguks
Brauseri ühilduvus on veebis kättesaadavuse suur osa. Arendajad peavad kaaluma nende vaatajaskonna ja brauseriversioonide erinevusi, mis vajavad tuge. Kuigi CSS-i lähtestamine on valikuvõimalus, eelistavad enamik devalve Normalize.css oma lihtsuse ja ühilduvuse eest kõigis kaasaegsetes brauserites.
Selles postituses katan Normaliseerimise põhitõed ja selle võrdlemine üldiste CSS-lähtestustega. See ei ole keeruline raamatukogu ja see ei tohiks mõista rohkem kui paar tundi. Normaliseerimise võti on aga õppimine kuidas seda nõuetekohaselt ja mõistlikult rakendada.
Brauseri lähtestamine võrreldes Normaliseerimisega
Juba aastaid olen kasutanud Eric Meyeri CSS-i lähtestamise kohandatud versiooni. Need on olnud enamiku minu projektide jaoks piisavad ega ole põhjustanud suuri probleeme. Normaliseerimine muutis aga minu lähtestamise vaateid, sest see toimib erinevalt kui CSS-i lähtestamine. On oluline, et te mõistate erinevusi.
Mõtle Normaliseeri kui a rõivaid rakendatakse järjepidevalt kõigile brauseritele, ja mõtle a CSS-i lähtestamine termotuuma detonaadina kõigis brauserites.
Normaliseerige stiilid ja vormingud pealkirjad, lõiked, blokkvoodid ja ühised elemendid nii, et nad oleksid tunduvad identsed (või piisavalt lähedal) kõigis toetatud brauserites. CSS lähtestab kiltkivi puhtalt puhtaks, nii et see on olemas vaikeväärtusi pole midagi.
CSS-i lähtestamisel võivad teie pealkirjad olla samad nagu teie lõigud; elementidel ei ole polsterdamist, marginaale ega vahekaugusi. CSS-i lähtestamine peate esitama uue koodi stiili parandamiseks. Normaliseerimisega saate a eelnevalt kavandatud stiil mida saab ehitada.
Niisiis on üks neist parem kui teine? See on kuumalt arutatud teema, ehkki üks argument on, et Normaliseerimine töötab paremini ühilduvuse nimel ja tekitab väiksemaid failisuurusi.
“Ma pean väitma, et normaliseerimine on parem kui lähtestamine. Selle tulemuseks on, et traadist üle kantakse vähem CSS-i, kasutatakse paremini UA vaikeseadeid ja paremini mõistetakse, kuidas elemendid on tähendas kuvamiseks.”
Kas te armute Normaliseeri või eelistate tüüpilist lähtestamist, on oluline vähemalt mõista mõlemat poolt ja valida, mis sobib kõige paremini. Väga vähesed arendajad alustavad nullist kodeerimist, nii et Normaliseerimine või CSS-i lähtestamine on peaaegu vajalik tänapäeva esiplaani arendamiseks.
Kui soovite CSS-i lähtestamist proovida, on siin mõned populaarsed valikud:
- Eric Meyeri lähtestamine
- HTML5 lähtestamine
- HTML5Doctor Reset
Seadista konfigureerimine
Normaliseeri looja Nicolas Gallagher kirjutas sissejuhatava postituse, mis juhtis seda avaldust:
“Normalize.css on väike CSS-fail, mis pakub HTML-elementide vaikimisi kujundamisel paremat brauserite sidusust. See on kaasaegne HTML5-valmis alternatiiv traditsioonilisele CSS-lähtestamisele.”
Aastate jooksul on see muutunud usaldusväärseks raamatukoguks, mida arendajad kasutavad kogu maailmas. Normaliseerimist on isegi teatud määral kasutatud Bootstrap ja Pure CSS.
Projekti Normaliseerimine on võimalik kasutada kahel viisil: redigeerige allikat, et kohandada oma tavapärase stiilitabeli või kasutada seda baasi ja lisada stiilid üles.
Esimene on valiku- ja valimisstrateegia, kus te läbite faili Normalize.css ja kustutate kõik, mida te ei vaja omaenda stiilitabeli loomiseks. See on kõige parem projekti kohta, et failide suurus oleks madal.
Alternatiivina võivad mõned arendajad hõlmata kogu Normalize.css faili ja ehitada selle peale oma stiili. Täielik Normaliseeri stiilitabel hõlmab 420 + koodi rida, mis võrdub ~ 6.8KB pakkimata.
Kumbki meetod ei ole parem kui teine ja see on väärt, mida igale projektile kõige paremini sobib, või teie eelistatud töövoogu.
Alustamiseks laadige GitHubist alla Normalise koopia või võõrustage see välisest CDN-ist. Saate tõmmata ka Normalise uusima versiooni otse NPM-ist:
npm install --save normalize.css
Kui te ei soovi faile alla laadida, saate teha isegi uue CodePen projekti, mis võib lisada nupule Normalize..
Kuna Normaliseerimine on modulaarne, saate sektsioonid ajutiselt eemaldada või isegi oma tavapärase Normaliseerida. Seejärel saate iga projekti käivitada valitud osadega nagu HTML5 kuvamiselemendid, eemaldades samal ajal manustatud sisu stiilid.
Igal Normaliseerimise reeglil on vastav CSS kommentaar, mis selgitab, mida ta teeb ja milliseid probleeme / vigu see lahendab. Mõned on ilmsed, nagu seade kuva: plokk uuematel HTML5 elementidel.
Teised on vähem ilmsed nagu see SVG-kood, mis peidab Internet Exploreri ülevoolu:
svg: ei (: root) ülevool: peidetud;
Soovitan väga stiilitabelit, et näha täpselt, kuidas see toimib, ja õppida, kas Normaliseerimine oleks teie projekti jaoks õige.
Normalize.css veebidisainis
Normalize v4.0 uusim versioon pakub laialdast brauseri tuge.
- Chrome (viimased kaks)
- Edge (viimased kaks)
- Firefox (viimased kaks)
- Firefoxi ESR
- Internet Explorer 8+
- Opera (viimased kaks)
- Safari 6+
Sellest, mida saan öelda, võib Normaliseerimine toetada vanemaid brauseriversioone, millel on pidevad uuendused nagu Firefox. Kuid “ametnik” Toetus sisaldab ainult kahte kõige uuemat Chrome / Edge / FF / Opera versiooni.
Normalize v1 toetab ka IE6 + ja Safari 4+, kuid seda versiooni enam ei uuendata.
On oluline, et kontrolliksite brauseriversioone tööriistaga, nagu Google Analytics. See annab teile parema ettekujutuse sellest, kas Normaliseerimine võib olla kasulik vahend kaasaegse veebidisaini tegemiseks.
Täiendavad ressursid
Normaliseerimise kohta pole eriti palju õpetada, nii et enamik õpinguid toimuks.
Ja ausalt öeldes ei ole palju seletada, et sa ei saa stiili ja lugeda läbi lugemise läbi ja kopeerida / muuta koodi vastavalt vajadusele. Aga kui otsite muud asjakohast teavet, siis olen lisanud mõned allolevad lingid.
seotud artiklid
- Nicolas Gallagher: Normalize.css kohta
- Sissejuhatus HTML5 katla plaadile
- Normalize.css vs Reset.css: millist neist kasutada?
Sissejuhatavad videod
- Normaliseeri CSS
- Lähtestab ja normaliseerib Envato
- Nicolas Gallagher - Mõtle kaugemale Scalable CSS
