CSS
Normalisering av webbläsarstilar
Sök…
Introduktion
Anmärkningar
Meyers återställning, även om den är effektiv, gör samma förändringar för nästan alla vanligt förekommande element. Detta har resulterat av förorenande inspektionsfönster för webbläsare med samma tillämpade stilar om och om igen och skapar mer arbete för webbläsaren (fler regler gäller för fler element). Normaliseringstekniken är å andra sidan mycket mer fokuserad och mindre av en bredborstteknik. Detta förenklar arbetet från webbläsarens sida och resulterar i mindre rörelser i webbläsarens inspektionsverktyg.
normalize.css
Webbläsare har en standarduppsättning CSS-stilar som de använder för att rendera element. Vissa av dessa stilar kan till och med anpassas med hjälp av webbläsarens inställningar för att ändra standardtypens typsnitt och storlekar, till exempel. Stilarna innehåller bland annat definitionen av vilka element som antas vara blocknivå eller inline.
Eftersom dessa standardstilar ges en viss plats med språkspecifikationerna och eftersom webbläsare kanske inte följer specifikationerna korrekt kan de skilja sig från webbläsare till webbläsare.
Det är här normalize.css spelar in. Den åsidosätter de vanligaste inkonsekvenserna och fixar kända buggar.
Vad gör det
- Bibehåller användbara standardvärden, till skillnad från många återställningar av CSS.
- Normaliserar stilar för ett brett spektrum av element.
- Korrigerar buggar och vanliga webbläsarinkonsekvenser.
- Förbättrar användbarheten med subtila modifieringar.
- Förklarar koden med detaljerade kommentarer.
Så genom att inkludera normalisera.css i ditt projekt kommer din design att se mer lika och konsekvent ut över olika webbläsare.
Skillnad på reset.css
Du kanske har hört talas om reset.css . Vad är skillnaden mellan de två?
Medan normalize.css ger konsistens genom att ställa in olika egenskaper för enhetliga standardvärden, uppnår reset.css konsistens genom att ta bort all grundläggande styling som en webbläsare kan tillämpa. Även om detta kan låta som en bra idé till en början, betyder det faktiskt att du måste skriva alla regler själv, vilket strider mot att ha en solid standard.
Tillvägagångssätt och exempel
CSS-återställningar tar separata tillvägagångssätt för webbläsars standardvärden. Eric Meyers återställning CSS har funnits ett tag. Hans tillvägagångssätt upphäver många av webbläsarelement som har varit kända för att orsaka problem direkt på baksidan. Följande kommer från hans version (v2.0 | 20110126) CSS Reset.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
Normalisera CSS å andra sidan och hanterar många av dessa separat. Följande är ett exempel från kodens version (v4.2.0).
/**
* 1. Change the default font family in all browsers (opinionated).
* 2. Correct the line height in all browsers.
* 3. Prevent adjustments of font size after orientation changes in IE and iOS.
*/
/* Document
========================================================================== */
html {
font-family: sans-serif; /* 1 */
line-height: 1.15; /* 2 */
-ms-text-size-adjust: 100%; /* 3 */
-webkit-text-size-adjust: 100%; /* 3 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/**
* Add the correct display in IE 9-.
*/
article,
aside,
footer,
header,
nav,
section {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}