НОРМАЛИЗИРОВАТЬ

Во-первых, normalize css — это набор стилей, основанный на том, что, по мнению создателя, будет хорошо выглядеть и поддерживать согласованность в разных браузерах. Например, внутри тегов ‹article›, ‹aside›, ‹nav› и ‹section› Chrome, Safari и Firefox отображают теги ‹h1› с меньшим размером шрифта и другим размером полей, чем независимые теги. В случае тега ‹h1› внутри ‹article›, ‹aside›, ‹nav› и ‹section› это стили пользовательского агента в Chrome, Safari и Firefox.

ПРИМЕР:

:-webkit-any(article,aside,nav,section) h1 {
  font-size: 1.5em;
   margin-block-start: 0.83em;
   margin-block-end: 0.83em;
   }
h1 {  font-size: 2em;  margin: 0.67em 0;}

В Chrome, Firefox и Safari отрегулируйте размер шрифта и поля для компонентов «h1» в контексте «раздел» и «статья».

Преимущества перед сбросом CSS:

  • Вместо того, чтобы неправильно управлять всем, Normalize.css сохраняет полезные значения по умолчанию.
  • Normalize исправляет несколько распространенных проблем, которые не покрываются сбросом.
  • Модульный
  • Лучшая документация
  • Не перегружает среду разработки

СБРОС CSS

Reset предлагает альтернативный подход, утверждая, что стили браузера по умолчанию не нужны. Мы определим любые стили, которые нам нужны в проекте, исходя из наших требований. Более того, «Сброс CSS» очищает все стили, связанные с пользовательским агентом браузера. В предыдущем примере со стилями по умолчанию от ‹h1› до ‹h6› эта техника работает хорошо: в большинстве случаев нам не нужны размер шрифта или поля браузера по умолчанию.

Пример сброса 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; 
}

Поэтому мы объявляем все HTML-теги без отступов, полей и рамок, с одинаковым размером шрифта и одинаковыми выравниваниями, используя метод CSS Reset. Кроме того, CSS Resets имеют тот недостаток, что они неприглядны: они содержат длинную цепочку селекторов и множество лишних переопределений. Хуже того, при отладке они неразборчивы.

КРАТКОЕ СОДЕРЖАНИЕ

Подводя итог, можно сказать, что перезагрузка является требованием для соответствия определенным стандартам проектирования, особенно для крупных проектов, не являющихся шаблонными. Может показаться, что нормализация — разумный путь, если думать только об онлайн-программировании, однако веб-сайты часто представляют собой комбинацию веб-программирования и стандартов дизайна UI/UX.