CSS
Browserstile normalisieren

Einführung

Bemerkungen

normalize.css

Browser verfügen über einen Standardsatz von CSS-Stilen, die sie zum Rendern von Elementen verwenden. Einige dieser Stile können sogar mithilfe der Browsereinstellungen angepasst werden, um z. B. die Standardeinstellungen für Schriftart und -größe zu ändern. Die Stile enthalten die Definition, welche Elemente unter anderem Blockebene oder Inline sein sollen.

Da diese Standardstile aufgrund der Sprachspezifikationen einen gewissen Spielraum haben, und da Browser den Spezifikationen möglicherweise nicht ordnungsgemäß folgen, können sie sich von Browser zu Browser unterscheiden.

Hier kommt normalize.css ins Spiel. Sie überschreibt die häufigsten Inkonsistenzen und behebt bekannte Fehler.

Was tut es

• Im Gegensatz zu vielen CSS-Resets werden nützliche Standardwerte beibehalten.
• Normalisiert Stile für eine Vielzahl von Elementen.
• Behebt Fehler und häufig auftretende Browserinkonsistenzen.
• Verbessert die Benutzerfreundlichkeit mit subtilen Modifikationen.
• Erläutert, was der Code mit ausführlichen Kommentaren macht.

Indem Sie normalize.css in Ihr Projekt einbinden, wird Ihr Design in den verschiedenen Browsern ähnlicher und konsistenter aussehen.

Unterschied zu reset.css

Sie haben vielleicht von reset.css . Was ist der Unterschied zwischen den beiden?

Während normalize.css für Konsistenz sorgt, indem verschiedene Eigenschaften auf einheitliche Standardwerte festgelegt werden, erreicht reset.css Konsistenz, indem alle grundlegenden Formatierungen entfernt werden , die ein Browser möglicherweise anwendet. Auch wenn dies zunächst nach einer guten Idee klingt, bedeutet dies tatsächlich, dass Sie alle Regeln selbst schreiben müssen, was sich jedoch gegen einen soliden Standard richtet.

Ansätze und Beispiele

CSS-Resets verwenden separate Ansätze für die Browser-Standardeinstellungen. Das Reset-CSS von Eric Meyer ist schon eine Weile im Gange. Sein Ansatz macht viele der Browserelemente zunichte, von denen bekannt ist, dass sie auf der Rückseite Probleme verursachen. Das Folgende ist von seiner 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;
}

Eric Meyers Reset-CSS

Normalisieren Sie CSS auf der anderen Seite und behandeln Sie viele davon getrennt. Das folgende Beispiel zeigt die Version (v4.2.0) des Codes.

/**
 * 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;
}

CSS normalisieren