Normalize.css is een alternatief voor CSS-reset. Het biedt een hoge mate van consistentie tussen browsers op de standaard HTML-elementstijl. Normalize.css is een modern, premium alternatief voor HTML5 (http://necolas.github.io/normalize.css/）
Zowel normalize.css als reset.css zijn stylesheets om browsertabbladen te resetten
Het doel van het creëren van normalize.css is als volgt:
Bescherm nuttige browserstandaardstijlen in plaats van ze helemaal te verwijderen
Gegeneraliseerde stijlen: Geleverd voor de meeste HTML-elementen
Los de eigen bugs van de browser op en zorg voor consistentie tussen browsers
Optimaliseer de bruikbaarheid van CSS: Gebruik een paar tips
Leg de code uit: gebruik opmerkingen en gedetailleerde documentatie
Normalize.css ondersteunt een breed scala aan browsers, waaronder mobiele browsers, en generaliseert HTML5-elementen, typografie, lijsten, ingebedde inhoud, formulieren en tabellen. Hoewel dit project gebaseerd is op generalisatie, hebben we waar toepasselijk meer praktische standaardwaarden gebruikt.
Normaliseren vs Resetten
1. Normalize.css Beschermde waardevolle wanbetalingen
Reset dwingt elementen om hetzelfde visuele effect te hebben door bijna alle elementen een standaardstijl op te leggen. Daarentegen behoudt Normalize.css veel van de standaard browserstijlen. Dit betekent dat je niet langer alle gangbare typografie-elementen hoeft te herontwerpen. Wanneer een element verschillende standaardinstellingen heeft in verschillende browsers, streven Normalize.css ernaar deze stijlen consistent en zo consistent mogelijk te houden met moderne standaarden.
2. Normalize.css Een bug in de browser opgelost
Het lost veelvoorkomende bugs op in desktop- en mobiele browsers. Dit is vaak te hoog wat Reset kan doen. In dit opzicht zijn de Normalize.css opgeloste problemen onder andere de weergave-instellingen van HTML5-elementen, lettergrootteproblemen met voorgeformatteerde tekst, SVG-overflow in IE9 en veel formuliergerelateerde bugs die voorkomen in diverse browsers en besturingssystemen.
3. Normalize.css Het zal je debugtools niet rommelig maken
Een van de meest irritante aspecten van het gebruik van Reset is de grote overervingskeden in de browser-debuggingtool, zoals te zien is op de onderstaande afbeelding. Dat probleem zal in Normalize.css niet zijn, omdat we heel voorzichtig zijn met het gebruik van multiselectors in onze richtlijnen, en we zullen het doelelement alleen bewust stylen.
4. Normalize.css is modulair
Het project is opgesplitst in gerelateerde maar aparte delen, waardoor het eenvoudig en duidelijk is welke elementen op specifieke waarden zijn ingesteld. Dit stelt je in staat om selectief onderdelen te verwijderen die je nooit zult gebruiken (zoals generalisatie van vormen).
5. Normalize.css Heeft gedetailleerde documentatie
Normalize.css code is gebaseerd op gedetailleerd en uitgebreid cross-browser onderzoek en testen. Dit bestand bevat gedetailleerde codebeschrijvingen en verdere instructies op de Github Wiki. Dit betekent dat je kunt ontdekken wat elke regel code precies doet, waarom je hem hebt geschreven, de verschillen tussen browsers, en je kunt je eigen code makkelijker testen.
Hoe gebruik je normalize.css
Installeer of download Normalize.css eerst van Github, en daarna zijn er twee hoofdmanieren om het te gebruiken.
Strategie 1: Gebruik normalize.css als basis CSS voor je eigen projecten, waarbij je stijlwaarden aanpast aan de behoeften van de ontwerper.
Strategie 2: Importeer normalize.css broncode en bouw erop, waarbij je de standaardinstellingen indien nodig overschrijft met je eigen CSS.
CSS-bestand downloaden:https://necolas.github.io/normalize.css/8.0.0/normalize.css
|
Geplaatst op 27-07-2018 14:49:36
|
|
|
|
