Korištenje Normalize.css za homogeni razvoj
Kompatibilnost preglednika veliki je dio pristupačnosti na webu. Programeri trebaju uzeti u obzir varijacija njihove publike i verzija preglednika koje zahtijevaju podršku. Iako je CSS resetiranje opcija, većina developera preferira Normalize.css zbog svoje jednostavnosti i unakrsne kompatibilnosti u svim modernim web-preglednicima.
U ovom postu ću pokriti osnove Normalize i kako se uspoređuje s općim CSS resetovima. Ovo nije komplicirana knjižnica i ne bi trebala trajati više od nekoliko sati da bi se shvatila. Ali ključ za normalizaciju je učenje kako provoditi ga ispravno i razborito.
Preglednik vraća na početnu vrijednost u odnosu na normalizaciju
Godinama sam koristio prilagođenu verziju CSS-a Erica Meyera. To je bilo dovoljno za većinu mojih projekata i nisu uzrokovali nikakve veće probleme. Međutim, Normalize je promijenio moj prikaz poništavanja jer radi drugačije od CSS resetiranja. Važno je da shvatite razlike.
Razmislite o normalizaciji kao odjeća se dosljedno primjenjuje na sve preglednike, i zamislite CSS se resetira kao termonuklearna detonacija u svim preglednicima.
Normalizira naslove stilova i formata, odlomke, blokove i zajedničke elemente tako da oni izgledaju identično (ili dovoljno blizu) u svim podržanim preglednicima. CSS resetira potpuno izbrisati ploču tako da postoje nema zadanih postavki za bilo što.
Pomoću CSS-a poništite svoje naslove koji mogu izgledati isto kao i vaši paragrafi; elementi nemaju padding, margine ili razmake bilo koje vrste. S poništavanjem CSS-a morate unijeti novi kôd za poboljšanje stila. Uz Normalize dobivate a unaprijed dizajniran stil na koje se može graditi.
Dakle, je li jedan od njih bolji od drugog? To je tema o kojoj se često raspravlja, iako jedna točka argumentiranja kaže da se normalizira radi bolje za kompatibilnost i proizvodi manje veličine datoteka.
“Morao bih tvrditi da je normalizacija bolja od resetiranja. To će rezultirati manjim prijenosom CSS-a preko žice, boljim korištenjem UA zadanih postavki i boljim razumijevanjem načina na koji se elementi nalaze značilo prikazati.”
Bilo da se zaljubljujete u normalizaciju ili volite tipični reset, važno je barem razumjeti obje strane i odabrati ono što najbolje odgovara. Vrlo malo programeri počinju kodirati od nule tako da je normaliziranje ili resetiranje CSS-a gotovo neophodno za suvremeni razvoj sučelja.
Ako želite isprobati CSS reset, ovdje su neke popularne opcije:
- Reset Erica Meyera
- Ponovno postavljanje HTML5
- HTML5Doctor Reset
Normaliziraj Config
Normalizirajući kreator Nicolas Gallagher napisao je uvodni post koji vodi ovom izjavom:
“Normalize.css je mala CSS datoteka koja omogućuje bolju konzistentnost cross-preglednika u zadanom stylingu HTML elemenata. To je moderna alternativa tradicionalnom poništavanju CSS-a, spremna za HTML5.”
Tijekom godina ovo je izraslo u pouzdanu knjižnicu koju koriste programeri širom svijeta. Normalizirati je čak bio korišten na neki stupanj u Bootstrap i čist CSS.
Postoje dva načina za korištenje Normalize u projektu: uredite izvor kako biste prilagodili vlastitu Normalize stylesheet, ili ga koristite kao bazu i dodajte stilove na vrh.
Bivši je pick-and-choose strategija u kojoj prolazite kroz Normalize.css datoteku i brišete sve što vam nije potrebno za izradu vlastite stilske tablice. To je najbolje na temelju svakog projekta da bi se smanjila veličina datoteke.
Alternativno, neki programeri uključuju cijelu datoteku Normalize.css i povrh toga grade vlastitu stilsku ploču. Puna Normalize stilska lista obuhvaća 420+ redaka koda koji je jednak ~ 6.8KB nekomprimiranom.
Nijedna metoda nije bolja od druge i vrijedi slijediti sve što je najbolje za svaki projekt ili željeni tijek rada.
Da biste započeli ili preuzmite kopiju Normalize iz GitHub-a ili ga hostirajte s vanjskog CDN-a. Također možete povući najnoviju verziju Normalize desno od NPM-a na sljedeći način:
npm install --save normalize.css
Ako ne želite preuzeti bilo koju datoteku, možete napraviti čak i novi CodePen projekt koji može dodati normalizaciju klikom na gumb.
Budući da je Normalize modularan, možete privremeno ukloniti dijelove ili čak izraditi vlastiti običaj Normalize. Tada možete započeti svaki projekt s odabranim dijelovima kao što su HTML5 elementi prikaza dok uklanjate stilove za ugrađeni sadržaj.
Svako normalizirajuće pravilo ima odgovarajući CSS komentar koji objašnjava što radi i koje probleme / bugove rješava. Neke su očigledne kao postavljanje display: block na novijim HTML5 elementima.
Drugi su manje očigledni kao ovaj SVG kod koji skriva prelijevanje u programu Internet Explorer:
svg: ne (: root) prelijevanje: skriveno;
Ja visoko preporučiti skimming na stylesheet vidjeti točno kako se to radi i kako bi saznali ako normalizira bi bilo pravo za svoj projekt.
Normalize.css U web dizajnu
Najnovija verzija Normalize v4.0 nudi široku podršku preglednika.
- Chrome (posljednja dva)
- Rub (zadnja dva)
- Firefox (posljednja dva)
- Firefox ESR
- Internet Explorer 8+
- Opera (posljednja dva)
- Safari 6+
Iz onoga što mogu reći, Normalize može podržavati starije verzije preglednika s stalnim ažuriranjima kao što je Firefox. Ali “službeno” Podrška uključuje samo dvije najnovije verzije Chrome / Edge / FF / Opera.
IE6 + i Safari 4+ podržani su s Normalize v1, ali ta se verzija više ne ažurira.
Ključno je da pregledate inačice preglednika pomoću alata kao što je Google Analytics. To će vam dati bolju ideju može li Normalize biti koristan alat za moderan rad na web dizajnu.
Daljnji resursi
Ne postoji puno toga što bi se posebno moglo naučiti o normalizaciji, tako da se većina učenja događa tako što se radi.
Istina, ne postoji mnogo objašnjenja koje ne možete shvatiti čitanjem stila i kopiranjem / mijenjanjem koda prema potrebi. Ali ako tražite druge relevantne informacije, dodao sam neke veze u nastavku.
povezani članci
- Nicolas Gallagher: O Normalize.css
- Uvod u HTML5 Predložak
- Normalize.css vs Reset.css: Koji koristiti?
Uvodni videozapisi
- Korištenje normaliziranja CSS-a
- Resetira i normalizira Envato
- Nicolas Gallagher - razmišljanje izvan skalabilnog CSS-a
