CSS
Нормализация стилей браузера

Вступление

замечания

normalize.css

Браузеры имеют набор стилей CSS по умолчанию, которые они используют для рендеринга элементов. Некоторые из этих стилей можно даже настроить, используя настройки браузера, чтобы, например, изменять определения шрифта и размера шрифта по умолчанию. В стилях содержится определение того, какие элементы должны быть блочными или встроенными, между прочим.

Поскольку эти стили по умолчанию дают некоторую свободу действий по языковым спецификациям и потому, что браузеры могут не следовать спецификациям, они могут отличаться от браузера к браузеру.

Это где normalize.css вступает в игру. Он отменяет наиболее распространенные несоответствия и исправляет известные ошибки.

Что оно делает

• Сохраняет полезные значения по умолчанию, в отличие от многих сбросов CSS.
• Нормализует стили для широкого круга элементов.
• Исправляет ошибки и общие непоследовательности браузера.
• Улучшает удобство использования с небольшими изменениями.
• Объясняет, какой код использует подробные комментарии.

Таким образом, включив normalize.css в ваш проект, ваш дизайн будет выглядеть более похожим и последовательным в разных браузерах.

Разница в reset.css

Возможно, вы слышали об reset.css . В чем разница между ними?

В то время как normalize.css обеспечивает согласованность, устанавливая разные свойства для унифицированных значений по умолчанию, reset.css достигает согласованности, удаляя все основные стили, которые может применяться браузером. Хотя сначала это может показаться хорошей идеей, это на самом деле означает, что вы должны сами писать все правила, что противоречит тому, чтобы иметь солидный стандарт.

Подходы и примеры

Сброс CSS использует отдельные подходы к умолчанию браузера. Сброс CSS Эрика Мейера уже давно. Его подход сводит на нет многие элементы браузера, которые, как известно, вызывают проблемы сразу же. Ниже приведена его версия (v2.0 | 20110126) Сброс CSS.

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

Сброс CSS Эрика Мейера

Нормализовать CSS на другом и разбираться со многими из них отдельно. Ниже приведен пример из версии (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;
}

Нормализовать CSS