Uporaba Normalize.css Za homogeni razvoj

Združljivost brskalnika je velik del dostopnosti v spletu. Razvijalci morajo upoštevati različice njihove publike in brskalnikov, ki zahtevajo podporo. Čeprav so možnosti ponastavitve CSS na voljo, večina razvijalcev raje izbere Normalize.css zaradi enostavnosti in navzkrižne združljivosti v vseh modernih spletnih brskalnikih..

V tem postu bom pokrival osnove Normalize in kako se primerja s splošnimi ponastavitvami CSS. To ni zapletena knjižnica in razumevanje ne bi smelo trajati več kot nekaj ur. Toda ključ do normalizacije je učenje kako pravilno in razumno izvajati.

Brskalnik se ponastavi v primerjavi z normalizacijo

Že leta uporabljam prilagojeno različico CSS-ja Erica Meyerja. Ti so bili dovolj za večino mojih projektov in niso povzročili večjih težav. Vendar pa je Normalize spremenil moj pogled na ponastavitve, ker deluje drugače kot ponastavitev CSS. Pomembno je, da razumete razlike.

Pomislite na normalizacijo kot oblačilo, ki se dosledno uporablja za vse brskalnike, in pomislite na a CSS ponastavi kot termonuklearna detonacija v vseh brskalnikih.

Normalizira sloge in oblike naslovov, odstavkov, blokov in skupnih elementov, tako da videti enako (ali dovolj blizu) v vseh podprtih brskalnikih. CSS ponastavi popolnoma brisanje skrilavca čisto tako, da so brez privzetih nastavitev za vse.

S ponastavitvijo CSS lahko vaši naslovi izgledajo enako kot vaši odstavki; elementi nimajo polnila, robov ali razmikov. S ponastavitvijo CSS podati morate novo kodo za izboljšanje sloga. Z normalizacijo dobite a vnaprej oblikovan slog ki se lahko gradi na.

Torej je ena od teh boljša od druge? To je tema, ki je zelo vroča, čeprav je ena točka argumenta, da normalizira deluje bolje za združljivost in ustvarja manjše velikosti datotek.

“Moral bi trditi, da je normalizacija boljša od ponastavitve. Posledica tega bo manjša prenos CSS preko žice, boljša uporaba privzetih nastavitev in boljše razumevanje elementov pomeni prikazati.”

Ne glede na to, ali se zaljubite v normalizacijo ali raje tipično ponastavitev, je pomembno vsaj razumeti obe strani in izbrati tisto, kar najbolj ustreza. Zelo malo razvijalcev začeti kodiranje iz nič, tako Normalize ali ponastavitev CSS je skoraj potrebna za sodobno razvoj frontend.

Če želite preizkusiti ponastavitev CSS, je tu nekaj priljubljenih možnosti:

Resets Erica Meyerja
Ponastavitev HTML5
HTML5Doctor Reset

Normalizirajte konfiguracijo

Ustvarjalec normalizacije Nicolas Gallagher je napisal uvodno objavo, ki je vodila s to izjavo:

“Normalize.css je majhna datoteka CSS, ki omogoča boljšo doslednost med brskalniki v privzetem stylingu elementov HTML. To je sodobna alternativa tradicionalnemu ponastavljanju CSS, ki je pripravljen na HTML5.”

Z leti se je razvila v zaupanja vredno knjižnico, ki jo uporabljajo razvijalci po vsem svetu. Normalizacija je bila do neke mere uporabljena tudi v Bootstrap in Pure CSS.

Obstajata dva načina za normalizacijo v projektu: uredite vir, da prilagodite svoj stilizirani slogovni slog, ali pa ga uporabite kot osnovo in dodajte sloge na vrh.

Prva je strategija izbire in izbire, kjer greste skozi datoteko Normalize.css in izbrišete vse, kar vam ni potrebno, da bi ustvarili lastno tabelo slogov. To je najbolje na podlagi posameznega projekta, da ohranite nizko velikost datoteke.

Druga možnost je, da nekateri razvijalci vsebujejo celotno datoteko Normalize.css in na ta način zgradijo svoj stilski list. Popolna Normalize stylesheet razteza 420+ vrstic kode, kar je enako ~ 6.8KB nestisnjeno.

Nobena od teh metod ni boljša od druge, zato je vredno spremljati vse, kar je najbolje za vsak projekt ali želeni potek dela.

Če želite začeti, prenesite kopijo Normalize iz GitHub ali jo namestite iz zunanjega CDN-a. Prav tako lahko potegnete najnovejšo različico Normalize od NPM tako:

npm install --save normalize.css

Če ne želite prenesti datotek, lahko naredite tudi nov projekt CodePen, ki ga lahko dodate s klikom na gumb Normalize..

Ker je Normalize modularen, lahko začasno odstranite dele ali celo naredite svojo lastno gradnjo Normalize. Nato lahko vsak projekt začnete z izbranimi deli, kot so elementi prikaza HTML5, medtem ko odstranjujete sloge za vdelano vsebino.

Vsako pravilo Normalize ima ustrezen komentar CSS, ki pojasnjuje, kaj počne in katere težave / napake rešuje. Nekateri so očitni kot nastavitev prikaz: blok v novejših elementih HTML5.

Drugi so manj očitni, kot je ta koda SVG, ki v Internet Explorerju skriva prelivanje:

svg: ne (: root) overflow: hidden;

Priporočam, da posnamete slogovno datoteko, da bi natančno videli, kako deluje in da se naučite, ali je normalizacija pravilna za vaš projekt.

Normalize.css V spletnem oblikovanju

Najnovejša različica Normalize v4.0 ponuja široko podporo brskalnika.

Chrome (zadnji dve)
Edge (zadnji dve)
Firefox (zadnji dve)
Firefox ESR
Internet Explorer 8+
Opera (zadnja dva)
Safari 6+

Od tega, kar lahko povem, lahko Normalize podpira starejše različice brskalnikov s stalnimi posodobitvami, kot je Firefox. Toda “uradni” podpora vključuje samo dve najnovejši različici Chrome / Edge / FF / Opera.

Tudi IE6 + in Safari 4+ sta podprta z Normalize v1, vendar ta različica ni več posodobljena.

Bistveno je, da preverite različice brskalnika z orodjem, kot je Google Analytics. To vam bo dalo boljšo idejo, ali je Normalize lahko uporabno orodje za moderno delo na področju spletnega oblikovanja.

Nadaljnji viri

Ni veliko, da bi posebej učili o normalizaciji, zato se večina učenja zgodi s tem.

In resnično ni veliko za pojasniti, da ne morete pobrati z branjem skozi slogovno datoteko in kopiranje / spreminjanje kode, kot je potrebno. Če pa iščete druge ustrezne informacije, sem spodaj dodal nekaj povezav.

povezani članki

Nicolas Gallagher: O Normalize.css
Uvod v predlogo HTML5
Normalize.css vs Reset.css: Katera uporabiti?

Uvodni videoposnetki

Uporaba normalizacije CSS
Ponastavi in normalizira Envato
Nicolas Gallagher - Razmišljanje, ki presega Scalable CSS