Normalize.css naudojimas homogeniškam vystymuisi

Naršyklės suderinamumas yra didelė prieinamumo internete dalis. Kūrėjai turi apsvarstyti jų auditorijos ir naršyklės versijų, kurioms reikia paramos, dispersija. Nors CSS atstatymas yra galimybė, dauguma „Devs“ pageidauja, kad „Normalize.css“ būtų paprastesnis ir suderinamas visose moderniose žiniatinklio naršyklėse.

Šiame pranešime aš uždengsiu Normalizavimo pagrindai ir kaip jis lyginamas su bendrais CSS nustatymais. Tai nėra sudėtinga biblioteka ir tai neturėtų užtrukti daugiau nei porą valandų. Bet normalizavimo raktas yra mokymasis kaip ją tinkamai ir protingai įgyvendinti.

Naršyklės atstatymas prieš normalizavimą

Jau daugelį metų naudojosi individualizuota Eric Meyer CSS iš naujo. Tai buvo pakankamai daugumai mano projektų ir nesukėlė jokių svarbių problemų. Tačiau „Normalizuoti“ pakeitė mano nuomonę apie atstatymus, nes ji veikia skirtingai nei CSS atstatymas. Svarbu suprasti skirtumus.

Pagalvokite apie normalizavimą kaip a drabužis nuosekliai taikomas visoms naršyklėms, ir pagalvokite apie CSS atstatoma kaip termobranduolinė detonacija visose naršyklėse.

Normalizuokite stilių ir formatų antraštes, punktus, bloknotus ir bendrus elementus, kad jie būtų atrodo identiški (arba pakankamai arti) visose palaikomose naršyklėse. CSS atstato visiškai nuvalykite skalūną švariu, kad būtų nėra numatytų nuostatų dėl bet ko.

Naudodami CSS iš naujo, antraštės gali atrodyti tokios pačios kaip jūsų pastraipos; elementai neturi jokių paminklų, paraščių ar tarpų. Su CSS atstatymu turite pateikti naują kodą pagerinti stilių. Normalizuodami gausite iš anksto suprojektuotas stilius kurios gali būti pastatytos.

Taigi vienas iš jų yra geresnis už kitą? Tai karštai diskutuojama tema, nors vienas argumentas teigia, kad normalizuoti veikia geriau suderinamumui ir sukuria mažesnius failų dydžius.

“Norėčiau teigti, kad normalizavimas yra geresnis nei iš naujo. Dėl to per laidą bus perkeltas mažesnis CSS, geriau naudojamasi UA numatytomis nuostatomis ir geriau suvoks, kaip elementai yra reiškia Rodyti.”

Nesvarbu, ar įsimylėjote Normalizuoti, ar pageidaujate tipiško naujo nustatymo, svarbu bent jau suprasti abi puses ir pasirinkti, kas geriausiai tinka. Labai mažai kūrėjų pradeda koduoti nuo nulio, todėl normalizuoti arba CSS atstatyti beveik reikalinga šiuolaikiniam frontendui plėtoti.

Jei norite išbandyti CSS iš naujo, čia rasite keletą populiarių pasirinkimų:

• Ericas Meyeris iš naujo
• HTML5 atstatymas
• HTML5Doctor Reset

Normalizuoti konfig

Normalizuoti kūrėją Nicolas Gallagher parašė įvadinį pranešimą, vedantį su šiuo pareiškimu:

“Normalize.css yra nedidelis CSS failas, kuris užtikrina geresnį kryžminio naršyklės nuoseklumą numatytame HTML elementų stiliuje. Tai moderni, pasirengusi HTML5 alternatyva tradicinei CSS atkūrimui.”

Per daugelį metų tai išaugo į patikimą biblioteką, kurią naudoja kūrėjai visame pasaulyje. Normalizavimas netgi buvo naudojamas tam tikru laipsniu Bootstrap ir Pure CSS.

Normalizuoti projektą galite naudoti dviem būdais: redaguokite šaltinį, kad pritaikytumėte savo normalizavimo stilių lentelę, arba naudokite jį kaip pagrindą ir pridėkite stilių viršuje.

Pirmoji yra pasirinkimo ir pasirinkimo strategija, kurioje einate per „Normalize.css“ failą ir ištrinkite viską, ko jums nereikia, kad sukurtumėte savo pasirinktinį stilių. Tai geriausiai tinka pagal projektą, kad failų dydis būtų mažas.

Arba kai kurie kūrėjai įtraukia visą „Normalize.css“ failą ir ant jo ant jų sukuria savo stilių lentelę. Visą normalizavimo stilių lentelę sudaro 420+ kodų eilutės, kurios lygios ~ 6.8KB nesuspaustos.

Nė vienas iš šių metodų nėra geresnis nei kitas, ir verta sekti viską, kas geriausiai tinka kiekvienam projektui, arba pageidaujamą darbo eigą.

Jei norite pradėti, atsisiųskite „Normalize“ kopiją iš „GitHub“ arba priimkite jį iš išorinio CDN. Taip pat galite ištraukti naujausią „Normalize“ versiją iš „NPM“ taip:

npm įdiegti - išsaugoti normalize.css 

Jei nenorite atsisiųsti jokių failų, netgi galite sukurti naują „CodePen“ projektą, kuris gali pridėti „Normalizuoti“ mygtuko spustelėjimu.

Kadangi „Normalizuoti“ yra modulinė, galite laikinai pašalinti sekcijas arba netgi sukurti savo pasirinktinį „Normalizuoti“. Tada galite pradėti kiekvieną projektą su pasirinktomis dalimis, pvz., HTML5 ekrano elementais, pašalindami įterptinio turinio stilius.

Kiekvienoje normalizavimo taisyklėje yra atitinkamas CSS komentaras, paaiškinantis, ką jis daro ir kokie klausimai / klaidos išsprendžia. Kai kurie yra akivaizdūs, pavyzdžiui, nustatymai ekranas: blokas naujesniuose HTML5 elementuose.

Kiti yra mažiau akivaizdūs kaip šis SVG kodas, kuris slepia „Internet Explorer“ perpildymą:

svg: ne (: root) overflow: paslėpta;  

Labai rekomenduoju stilistą nuvalyti, kad pamatytumėte, kaip ji veikia, ir sužinoti, ar normalizuoti būtų tinkamas jūsų projektui.

Normalize.css „Web Design“

Naujausia „Normalize v4.0“ versija siūlo plačią naršyklės palaikymą.

• „Chrome“ (paskutinės dvi)
• Kraštas (du paskutiniai)
• „Firefox“ (paskutinės dvi)
• „Firefox“ ESR
• „Internet Explorer 8“+
• Opera (paskutinės dvi)
• „Safari 6“+

Iš to, ką galiu pasakyti, Normalizuoti gali palaikyti senesnes naršyklių versijas su nuolatiniais atnaujinimais, pvz., „Firefox“. Bet “pareigūnas” parama apima tik dvi naujausias „Chrome / Edge / FF / Opera“ versijas.

Be to, „IE6 +“ ir „Safari 4+“ yra palaikomi „Normalize v1“, tačiau ši versija nebėra atnaujinama.

Svarbu, kad patikrintumėte naršyklės versijas naudodami tokį įrankį kaip „Google Analytics“. Tai suteiks jums geresnį supratimą, ar normalizuoti gali būti naudinga priemonė šiuolaikiniam interneto dizaino darbui.

Kiti ištekliai

Nėra daug dalykų, kad būtų galima konkrečiai mokyti apie normalizavimą, kad dauguma mokymosi vyktų.

Tiesą sakant, nėra daug ką paaiškinti, kad negalite pasiimti skaitydami stiliaus lapą ir kopijuodami / keisdami kodą, kaip reikia. Bet jei ieškote kitos svarbios informacijos, aš pridėjau keletą žemiau esančių nuorodų.

susiję straipsniai

• Nicolas Gallagher: Apie Normalize.css
• Įvadas į HTML5 katilinę
• Normalize.css vs Reset.css: Kuris naudoti?

Vaizdo įrašai

• Normalizuoti CSS
• Atkuria ir normalizuoja Envato
• Nicolas Gallagher - mąstymas už skalės CSS