Normalize.css gebruiken voor homogene ontwikkeling

Compatibiliteit met browsers is een groot deel van de toegankelijkheid op internet. Ontwikkelaars moeten rekening houden met de variantie van hun doelgroep en browserversies die ondersteuning vereisen. Hoewel CSS-resets een optie zijn, geven de meeste ontwikkelaars de voorkeur aan Normalize.css vanwege de eenvoud en cross-compatibiliteit in alle moderne webbrowsers..

In deze post zal ik behandelen de basis van Normalize en hoe het zich verhoudt tot algemene CSS-resets. Dit is geen ingewikkelde bibliotheek en het zou niet meer dan een paar uur moeten duren om het te begrijpen. Maar de sleutel tot Normaliseren is leren hoe om het goed en verstandig te implementeren.

Browser wordt gereset versus genormaliseerd

Jarenlang heb ik een aangepaste versie van de CSS-resets van Eric Meyer gebruikt. Deze zijn genoeg geweest voor de meeste van mijn projecten en hebben geen grote problemen veroorzaakt. Normalisatie veranderde echter mijn kijk op resets omdat het anders werkt dan een CSS-reset. Het is belangrijk dat u de verschillen begrijpt.

Zie Normaliseren als een kledingstuk consequent toegepast op alle browsers, en denk aan een CSS gereset als een thermonucleaire detonatie in alle browsers.

Normaliseren stijlen en opmaak koppen, alinea's, blockquotes en gemeenschappelijke elementen, zodat ze lijken identiek (of dichtbij genoeg) in alle ondersteunde browsers. CSS-resets wissen de lei volledig schoon, dus er zijn er geen standaardwaarden voor alles.

Met een CSS-reset kunnen uw koppen er hetzelfde uitzien als uw paragrafen; elementen hebben geen vulling, marges of spatiëring van welke aard dan ook. Met een CSS-reset je moet nieuwe code opgeven om de stijl te verbeteren. Met Normalize krijg je een vooraf ontworpen stijl waarop kan worden voortgebouwd.

Dus is een van deze beter dan de andere? Het is een fel bediscussieerd onderwerp, hoewel één argumentatie stelt dat Normaliseren werkt beter voor compatibiliteit en produceert kleinere bestandsgroottes.

“Ik zou moeten stellen dat normalisatie beter is dan resetten. Het zal resulteren in minder CSS over de draad, een beter gebruik van UA-standaardwaarden en een beter begrip van hoe elementen zijn bedoelde weergeven.”

Of je verliefd wordt op Normaliseren of liever een typische reset, het is belangrijk om op zijn minst beide kanten te begrijpen en te kiezen wat het beste past. Zeer weinig ontwikkelaars beginnen helemaal opnieuw te coderen, dus normaliseren of een CSS-reset is bijna vereist voor moderne frontend-ontwikkeling.

Als je een CSS-reset wilt proberen, zijn hier enkele populaire keuzes:

Eric Meyer's Resets
HTML5 opnieuw instellen
HTML5Doctor Reset

Normaal Config

Normaliseren schepper Nicolas Gallagher schreef een inleidende post met deze verklaring:

“Normalize.css is een klein CSS-bestand dat zorgt voor een betere consistentie tussen de browsers in de standaardstijl van HTML-elementen. Het is een modern, HTML5-gereed alternatief voor de traditionele CSS-reset.”

In de loop der jaren is dit uitgegroeid tot een vertrouwde bibliotheek die door ontwikkelaars over de hele wereld wordt gebruikt. Normaliseren is tot op zekere hoogte zelfs gebruikt in Bootstrap en Pure CSS.

Er zijn twee manieren om Normaliseren in een project te gebruiken: bewerk de bron om uw eigen Normalize stylesheet aan te passen, of gebruik het als een basis en voeg stijlen toe bovenop.

De eerste is een ophaal- en kiesstrategie waarbij je het bestand Normalize.css doorloopt en alles verwijdert wat je niet nodig hebt om je eigen aangepaste stylesheet te maken. Dit is het beste per project om de bestandsgrootte laag te houden.

Als alternatief kunnen sommige ontwikkelaars het hele bestand Normalize.css gebruiken en daarbovenop een eigen stylesheet maken. De volledige stijlpagina Normaliseren omspant 420+ coderegels die gelijk is aan ~ 6.8KB ongecomprimeerd.

Beide methoden zijn beter dan de andere en het is de moeite waard om te volgen wat het beste werkt voor elk project of de workflow van uw voorkeur.

Om te beginnen, download of download een kopie van Normalize from GitHub of host het vanaf een externe CDN. Je kunt ook de nieuwste versie van Normalize rechtstreeks van NPM ophalen, zoals zo:

npm install - sla normalize.css op

Als u geen bestanden wilt downloaden, kunt u zelfs een nieuw CodePen-project maken dat Normalize kan toevoegen met een klik op de knop.

Omdat Normaliseren modulair is, kunt u secties tijdelijk verwijderen of zelfs uw eigen aangepaste versie van Normalize maken. Vervolgens kunt u elk project starten met geselecteerde gedeelten zoals de HTML5-weergave-elementen, terwijl u stijlen voor ingesloten inhoud verwijdert.

Elke regel Normaliseren heeft een bijbehorende CSS-opmerking waarin wordt uitgelegd wat het doet en welke problemen / bugs het oplost. Sommige liggen voor de hand, net als bij het instellen display: block op nieuwere HTML5-elementen.

Andere zijn minder voor de hand liggend, zoals deze SVG-code die overflow in Internet Explorer verbergt:

svg: niet (: root) overflow: hidden;

Ik raad ten zeerste aan de stylesheet af te spelen om precies te zien hoe deze werkt en om te leren of Normalize geschikt is voor uw project.

Normalize.css In webontwerp

De nieuwste versie van Normalize v4.0 biedt uitgebreide ondersteuning voor browsers.

Chrome (laatste twee)
Edge (laatste twee)
Firefox (laatste twee)
Firefox ESR
Internet Explorer 8+
Opera (laatste twee)
Safari 6+

Van wat ik kan vertellen, kan Normalize oudere versies van browsers met constante updates zoals Firefox ondersteunen. Maar de “officieel” ondersteuning omvat alleen de twee meest recente versies van Chrome / Edge / FF / Opera.

Ook IE6 + en Safari 4+ worden ondersteund met Normalize v1, maar die versie wordt niet meer bijgewerkt.

Het is van cruciaal belang dat u de browserversies controleert met een tool als Google Analytics. Dit geeft u een beter idee of Normaliseren een handig hulpmiddel kan zijn voor modern webontwerpwerk.

Verdere bronnen

Er is niet veel om specifiek te leren over Normaliseren, dus het meeste van het leren gebeurt door te doen.

En naar waarheid is er niet veel om uit te leggen dat je niet kunt oppikken door het stylesheet te lezen en de code te kopiëren of te wijzigen als dat nodig is. Maar als u op zoek bent naar andere relevante informatie, dan heb ik hieronder enkele links toegevoegd.

Intro video's