CSS
Normalizowanie stylów przeglądarki

Wprowadzenie

Uwagi

normalize.css

Przeglądarki mają domyślny zestaw stylów CSS używanych do renderowania elementów. Niektóre z tych stylów można nawet dostosować za pomocą ustawień przeglądarki, na przykład w celu zmiany domyślnej definicji twarzy i rozmiaru czcionki. Style zawierają między innymi definicję elementów, które mają być blokowe lub wbudowane.

Ponieważ te domyślne style mają pewien margines swobody w specyfikacjach językowych i ponieważ przeglądarki mogą nie stosować się do specyfikacji poprawnie, mogą różnić się w zależności od przeglądarki.

W tym miejscu wchodzi normalize.css . Zastępuje najczęściej występujące niespójności i naprawia znane błędy.

Co to robi

• Zachowuje przydatne ustawienia domyślne, w przeciwieństwie do wielu resetów CSS.
• Normalizuje style dla szerokiej gamy elementów.
• Koryguje błędy i typowe niespójności przeglądarki.
• Poprawia użyteczność dzięki subtelnym modyfikacjom.
• Wyjaśnia, co robi kod, używając szczegółowych komentarzy.

Tak więc, włączając normalize.css do swojego projektu, twój projekt będzie wyglądał bardziej podobnie i spójny w różnych przeglądarkach.

Różnica w stosunku do reset.css

Być może słyszałeś o reset.css . Jaka jest różnica między nimi?

Podczas gdy normalize.css zapewnia spójność poprzez ustawienie różnych właściwości na zunifikowane wartości domyślne, reset.css osiąga spójność poprzez usunięcie wszystkich podstawowych stylów, które może zastosować przeglądarka. Choć może to początkowo wydawać się dobrym pomysłem, w rzeczywistości oznacza to, że musisz sam napisać wszystkie reguły, co jest sprzeczne z posiadaniem solidnego standardu.

Podejścia i przykłady

Resetowanie CSS ma osobne podejście do ustawień domyślnych przeglądarki. Eric CS Meyer Reset CSS istnieje już od jakiegoś czasu. Jego podejście unieważnia wiele elementów przeglądarki, o których wiadomo, że powodują problemy od samego początku. Poniżej znajduje się jego wersja (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;
}

Reset CSS Erica Meyera

Z drugiej strony znormalizuj CSS i radzi sobie z wieloma z nich osobno. Poniżej znajduje się przykład z wersji (v4.2.0) kodu.

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

Normalizuj CSS