Käyttämällä Normalize.css homogeeniseen kehitykseen

Selaimen yhteensopivuus on suuri osa saavutettavuutta verkossa. Kehittäjien on otettava huomioon niiden yleisölle ja selaimen versioille, jotka tarvitsevat tukea. Vaikka CSS-palautukset ovat vaihtoehto, useimmat devit haluavat Normalize.css: n yksinkertaisuutensa ja ristiin yhteensopivuuden kaikissa moderneissa web-selaimissa.

Tässä viestissä katson Normalisoinnin perusteet ja miten se verrataan yleisiin CSS-resetointiin. Tämä ei ole monimutkainen kirjasto, eikä sen pitäisi kestää yli pari tuntia. Mutta Normalisoinnin avain on oppiminen millä tavalla toteuttaa se asianmukaisesti ja harkiten.

Selaimen palautukset vs. Normaali

Vuosien ajan olen käyttänyt mukautettua versiota Eric Meyerin CSS-palautuksista. Nämä ovat olleet riittäviä useimmille projekteilleni eivätkä ole aiheuttaneet suuria ongelmia. Normaali on kuitenkin muuttanut näkymääni palautuksista, koska se toimii eri tavalla kuin CSS-nollaus. On tärkeää, että ymmärrät erot.

Ajattele Normalize a vaatteita sovelletaan johdonmukaisesti kaikkiin selaimiin, ja ajattele a CSS nollataan lämpöydinräjäytykseksi kaikissa selaimissa.

Normaali tyylit ja muodot otsikot, kappaleet, lohkot ja yhteiset elementit niin, että ne ovat näyttävät samanlaisilta (tai riittävän lähellä) kaikissa tuetuissa selaimissa. CSS palauttaa pyyhkimällä liuskekivi puhtaana niin, että on olemassa ei ole oletusarvoja mitä tahansa varten.

Kun CSS on nollattu, otsikot voivat näyttää samoilta kuin kohdat; elementeillä ei ole minkäänlaista pehmustusta, marginaalia tai väliä. CSS-nollaus sinun on toimitettava uusi koodi parantaa tyyliä. Normalisoimalla saat valmiiksi suunniteltu tyyli jotka voidaan rakentaa.

Joten on yksi näistä parempi kuin toinen? Se on kiihkeästi keskusteltu aihe, vaikka yksi argumentti sanoo, että Normalize toimii paremmin yhteensopivuuden ja tuottaa pienempiä tiedostokokoja.

“Minun pitäisi väittää, että normalisointi on parempi kuin nollaaminen. Se johtaa vähemmän CSS: n siirtymiseen langan yli, UA: n oletusarvojen paremman käytön ja parempien käsitysten ymmärtämisen avulla. tarkoitti näyttää.”

Olitpa rakastunut Normalisoitumaan tai mieluummin tyypillinen nollaus, on tärkeää ainakin ymmärtää molemmat osapuolet ja valita mitä sopii parhaiten. Hyvin harvat kehittäjät alkavat koodausta tyhjästä niin, että Normalize tai CSS reset on lähes välttämätön nykyaikaisen frontend-kehityksen kannalta.

Jos haluat kokeilla CSS-palautusta, on joitakin suosittuja vaihtoehtoja:

• Eric Meyerin nollaukset
• HTML5-nollaus
• HTML5Doctor Reset

Normalize Config

Normaali luoja Nicolas Gallagher kirjoitti johdantolomakkeen, joka johtaa tätä lausuntoa:

“Normalize.css on pieni CSS-tiedosto, joka tarjoaa paremman rajat selaimen johdonmukaisuuden HTML-elementtien oletustyyliin. Se on moderni, HTML5-valmis, vaihtoehto perinteiselle CSS-nollaukselle.”

Vuosien mittaan tämä on kasvanut luotettavaksi kirjastoksi, jota kehittäjät käyttävät maailmanlaajuisesti. Normalisointia on jopa käytetty jonkin verran Bootstrapissa ja Pure CSS: ssä.

Normalisointia voi käyttää kahdella tavalla: muokkaa lähdettä mukauttamaan omaa Normalize-tyylitaulukkoa tai käyttämään sitä pohjana ja lisäämällä tyylejä päälle.

Entinen on pick-and-select -strategia, jossa käydään läpi Normalize.css-tiedoston ja poistat mitä sinun ei tarvitse tehdä oman mukautetun tyylitaulukon tekemiseen. Tämä on parasta projektikohtaisesti, jotta tiedostokoko pysyy alhaisena.

Vaihtoehtoisesti jotkut kehittäjät sisältävät koko Normalize.css-tiedoston ja rakentavat oman tyylitaulukon sen päälle. Täysi Normalize-tyylitaulukko kattaa 420 + koodirivin, joka vastaa ~ 6.8KB: tä pakkaamattomana.

Kumpikaan menetelmä ei ole parempi kuin toinen, ja sen kannattaa seurata, mikä toimii parhaiten kullekin projektille tai haluamallesi työnkululle.

Aloittaaksesi joko lataa kopio Normalize GitHubista tai isännöi se ulkoisesta CDN: stä. Voit myös vetää Normalize-ohjelman uusimman version suoraan NPM: stä seuraavasti:

npm asenna - tallenna normalize.css 

Jos et halua ladata tiedostoja, voit jopa tehdä uuden CodePen-projektin, joka voi lisätä Normalize -painikkeen yhdellä painalluksella.

Koska Normalize-toiminto on modulaarinen, voit poistaa osioita väliaikaisesti tai jopa luoda oman mukautetun Normalisoinnin. Sitten voit aloittaa jokaisen projektin valitsemalla osia, kuten HTML5-näyttöelementtejä, samalla kun sulautetun sisällön tyylit poistetaan.

Jokaisella normalisointisäännöllä on vastaava CSS-kommentti, jossa selitetään, mitä se tekee ja mitä ongelmia / vikoja se ratkaisee. Jotkut ovat ilmeisiä kuin asetus display: block uudemmilla HTML5-elementeillä.

Toiset ovat vähemmän ilmeisiä kuin tämä SVG-koodi, joka piilottaa ylivuodon Internet Explorerissa:

svg: ei (: root) ylivuoto: piilotettu;  

Suosittelen, että tyylitaulukko ohitetaan tarkasti, miten se toimii, ja oppia, olisiko Normalize sopiva projektiin.

Normalize.css Web-suunnittelussa

Normalize v4.0: n uusin versio tarjoaa laajaa selaintukea.

• Chrome (kaksi viimeistä)
• Edge (kaksi viimeistä)
• Firefox (kaksi viimeistä)
• Firefox ESR
• Internet Explorer 8+
• Opera (kaksi viimeistä)
• Safari 6+

Mitä voin sanoa, Normalize voi tukea vanhempia versioita selaimista, joissa on jatkuvia päivityksiä, kuten Firefox. Mutta “virallinen” tuki sisältää vain kaksi uusinta Chrome / Edge / FF / Opera-versiota.

Normalize v1 tukee myös IE6 +: ta ja Safari 4+: ta, mutta tätä versiota ei enää päivitetä.

On tärkeää, että tarkistat selainversiot Google Analyticsin kaltaisella työkalulla. Tämä antaa sinulle paremman käsityksen siitä, että Normalize voi olla hyödyllinen työkalu nykyaikaisessa web-suunnittelussa.

Muita resursseja

Normalisointia varten ei ole paljon opetusta, joten suurin osa oppimisesta tapahtuu tekemällä.

Ja totuudenmukaisesti ei ole paljon selittää, että et voi poimia lukemalla tyylitaulukkoa ja kopioimalla / muuttamalla koodia tarpeen mukaan. Mutta jos etsit muita asiaankuuluvia tietoja, olen lisännyt alla olevia linkkejä.

Aiheeseen liittyvät artikkelit

• Nicolas Gallagher: Tietoja Normalize.css
• Johdatus HTML5-kattilalevyyn
• Normalize.css vs. Reset.css: kumpi käyttää?

Intro-videot

• Normaali CSS: n käyttäminen
• Nollaa ja normalisoi Envato
• Nicolas Gallagher - Ajatteleminen Scalable CSS: n ulkopuolella