Izmantojot Normalize.css viendabīgai attīstībai
Pārlūkprogrammas saderība ir liela pieejamības daļa tīmeklī. Izstrādātājiem ir jāapsver to auditorijas un pārlūkprogrammas versiju dispersija, kam nepieciešams atbalsts. Lai gan CSS atiestatīšana ir opcija, lielākā daļa devu dod priekšroku Normalize.css vienkāršībai un savstarpējai savietojamībai visās modernajās tīmekļa pārlūkprogrammās.
Šajā ziņojumā es aptveršu Normalizēšanas pamati un to salīdzinājums ar vispārējām CSS atiestatīšanu. Tā nav sarežģīta bibliotēka, un tai nav jāzina vairāk nekā pāris stundas. Bet galvenais, lai normalizētu, ir mācīšanās kā pareizi un saprātīgi.
Pārlūkprogrammas atiestatīšana pret Normalizāciju
Jau gadiem ilgi esmu izmantojis Eric Meyer CSS atiestatīto versiju. Tie ir bijuši pietiekami daudziem maniem projektiem un nav radījuši būtiskus jautājumus. Tomēr Normalizēt mainīja manu viedokli par atiestatīšanu, jo tas darbojas citādi nekā CSS atiestatīšana. Ir svarīgi saprast atšķirības.
Domājiet par Normalizēt kā a apģērbs, ko konsekventi piemēro visiem pārlūkiem, un domājiet par CSS tiek atiestatīts kā termonukleota detonācija visās pārlūkprogrammās.
Normalizējiet stilu un formātu virsrakstus, rindkopas, blokus un kopīgos elementus, lai tie būtu parādās identiski (vai pietiekami tuvi) visās atbalstītajās pārlūkprogrammās. CSS atiestata pilnībā noslaucīt šīfera tīrīšanu, lai tā būtu nav noklusējuma par kaut ko.
Izmantojot CSS, jūsu virsraksti var izskatīties tāpat kā jūsu punkti; elementiem nav polsterējuma, margu vai atstarpes. Ar CSS atiestatīšanu jums ir jāiesniedz jauns kods lai uzlabotu stilu. Ar Normalizēt jūs saņemsiet a iepriekš izstrādāts stils kas var tikt uzbūvēts.
Tātad ir viens no tiem labāks par otru? Tas ir ļoti diskutēts temats, lai gan viens arguments norāda, ka Normalizēt darbojas labāk par saderību un rada mazākus failu izmērus.
“Man vajadzētu apgalvot, ka normalizācija ir labāka nekā atiestatīšana. Tas novedīs pie mazākas CSS pārraides pāri vadam, labāk izmantojot UA noklusējumus un labāku izpratni par to, kā elementi ir nozīmē parādīt.”
Vai jūs iemīlēsieties Normalizēt vai dodat priekšroku tipiskai atiestatīšanai, ir svarīgi vismaz saprast abas puses un izvēlēties, kas vislabāk atbilst. Ļoti maz izstrādātāju sāk kodēt no nulles, lai modernizētu vai CSS atiestatītu gandrīz visu nepieciešamo mūsdienu frontendu attīstībai.
Ja vēlaties izmēģināt CSS atiestatīšanu, šeit ir dažas populāras izvēles:
- Eric Meyer atiestata
- HTML5 atiestatīšana
- HTML5Doctor Reset
Normalizēt konfigurāciju
Normalizēt autors Nicolas Gallagher uzrakstīja ievadrakstu, kas ved ar šo paziņojumu:
“Normalize.css ir mazs CSS fails, kas nodrošina labāku pārrobežu pārlūku konsekvenci HTML elementu noklusējuma stilā. Tā ir moderna, HTML5 gatava alternatīva tradicionālajai CSS atiestatīšanai.”
Gadu gaitā tas ir kļuvis par uzticamu bibliotēku, ko izmanto attīstītāji visā pasaulē. Normalizācija zināmā mērā ir izmantota Bootstrap un Pure CSS.
Projektā Normalizēt var izmantot divus veidus: rediģējiet avotu, lai pielāgotu savu Normalizēšanas stilu, vai izmantot to kā pamatu un pievienojiet stilus augšpusē.
Pirmais ir izvēles un izvēles stratēģija, kurā jūs izmantojat failu Normalize.css un izdzēsiet visu, kas jums nav nepieciešams, lai izveidotu savu pielāgoto stilu. Tas ir labākais, pamatojoties uz katru projektu, lai saglabātu faila lielumu zemu.
Alternatīvi daži izstrādātāji ietver visu Normalize.css failu un izveido to pašu stilu. Pilna normalizēšanas stila lapa aptver 420+ koda rindas, kas atbilst ~ 6.8KB nesaspiestai.
Neviena no metodēm nav labāka par otru, un ir vērts sekot tam, kas vislabāk atbilst katram projektam, vai vēlamajai darbplūsmai.
Lai sāktu darbu, lejupielādējiet Normalize kopiju no GitHub vai arī no ārēja CDN. Jūs varat arī vilkt jaunāko Normalize versiju tieši no NPM, piemēram:
npm instalēt - saglabājiet normalize.css
Ja nevēlaties lejupielādēt visus failus, varat pat izveidot jaunu CodePen projektu, kas var pievienot Normalizēt pie pogas klikšķa.
Tā kā Normalizēt ir modulāra, jūs varat noņemt sadaļas uz laiku vai pat izveidot savu pielāgoto Normalizēt. Tad jūs varat sākt katru projektu ar atlasītajām daļām, piemēram, HTML5 displeja elementiem, vienlaikus novēršot iegultā satura stilus.
Katram Normalizēšanas noteikumam ir atbilstošs CSS komentārs, kas izskaidro, ko tā dara un kādi jautājumi / kļūdas atrisina. Daži no tiem ir acīmredzami kā iestatījums displejs: bloks uz jaunākiem HTML5 elementiem.
Citi ir mazāk acīmredzami kā šis SVG kods, kas slēpj pārplūdi programmā Internet Explorer:
svg: nav (: root) overflow: paslēpta;
Es ļoti iesakām noliegt stilu, lai redzētu, kā tā darbojas, un uzzināt, vai Normalizēt būtu piemērots jūsu projektam.
Normalize.css Web dizainā
Normalize v4.0 jaunākā versija piedāvā plašu pārlūkprogrammas atbalstu.
- Chrome (pēdējās divas)
- Mala (pēdējās divas)
- Firefox (pēdējās divas)
- Firefox ESR
- Internet Explorer 8+
- Opera (pēdējās divas)
- Safari 6+
No tā, ko es varu pateikt, Normalizēt var atbalstīt vecākas pārlūkprogrammu versijas ar pastāvīgiem atjauninājumiem, piemēram, Firefox. Bet “ierēdnis” atbalsts ietver tikai divas jaunākās Chrome / Edge / FF / Opera versijas.
Arī IE6 + un Safari 4+ tiek atbalstīti ar Normalize v1, bet šī versija vairs netiek atjaunināta.
Ir ļoti svarīgi pārbaudīt pārlūkprogrammas versijas ar rīku, piemēram, Google Analytics. Tas sniegs jums labāku priekšstatu par to, vai Normalizēt var būt noderīgs līdzeklis mūsdienu web dizaina darbiem.
Papildu resursi
Nav pietiekami daudz, lai mācītu par Normalizāciju, lai lielākā daļa mācīšanās notiek darot.
Un patiesībā nav daudz, lai izskaidrotu, ka nevarat uzņemt, lasot caur stilu un nepieciešamības gadījumā kopējot / mainot kodu. Bet, ja meklējat citu atbilstošu informāciju, es esmu pievienojis dažas tālāk norādītās saites.
Saistītie raksti
- Nicolas Gallagher: Par Normalize.css
- Ievads HTML5 apkures katlā
- Normalize.css pret Reset.css: kuru izmantot?
Videoklipi
- Normalizēt CSS
- Atjauno un normalizē Envato
- Nicolas Gallagher - Domāšana ārpus Scalable CSS
