В чем разница между Normalize.css и Reset CSS?

Question

Я знаю, что такое CSS Reset, но недавно я услышал об этой новой вещи под названием Normalize.css

В чем разница между Normalize.css и Reset CSS?

В чем разница между нормализацией CSS и сбросом CSS?

Это просто новое модное слово для CSS Reset?

Answer 1

Я работаю на normalize.css.

Основными отличиями являются:

1. Normalize.css сохраняет полезные значения по умолчанию, а не "стирает" все. Например, такие элементы, как sup или же sub "просто работать" после включения normalize.css (и на самом деле сделаны более устойчивыми), тогда как они визуально неотличимы от нормального текста после включения reset.css. Таким образом, normalize.css не навязывает вам визуальную отправную точку (однородность). Это может быть не всем по вкусу. Лучше всего поэкспериментировать с обоими и посмотреть, какие гели с вашими предпочтениями.

2. Normalize.css исправляет некоторые распространенные ошибки, которые выходят за рамки reset.css. Он имеет более широкую область применения, чем reset.css, а также предоставляет исправления ошибок для распространенных проблем, таких как: настройки отображения для элементов HTML5, отсутствие font наследование по элементам формы, исправление font-size рендеринг для pre, Переполнение SVG в IE9, и button ошибка стилизации в iOS.

3. Normalize.css не загромождает ваши инструменты разработки. Общее раздражение при использовании reset.css - большая цепочка наследования, которая отображается в инструментах отладки CSS браузера. Это не такая проблема с normalize.css из-за целевых стилей.

4. Normalize.css является более модульным. Проект разбит на относительно независимые разделы, что позволяет вам легко удалять разделы (например, нормализации форм), если вы знаете, что они никогда не понадобятся вашему веб-сайту.

5. Normalize.css имеет лучшую документацию. Код normalize.css документирован как inline, так и более подробно в GitHub Wiki. Это означает, что вы можете узнать, что делает каждая строка кода, почему она была включена, каковы различия между браузерами, и легче выполнять свои собственные тесты. Проект направлен на то, чтобы помочь людям узнать, как браузеры отображают элементы по умолчанию, и облегчить им участие в представлении улучшений.

Я написал более подробно об этом в статье о normalize.css

Answer 2

Основное отличие состоит в том, что:

• Сброс CSS направлен на удаление всех встроенных стилей браузера. Стандартные элементы, такие как H1-6, p, strong, em, и так далее, в конечном итоге выглядят совершенно одинаково, не имея никакой отделки. Затем вы должны добавить все украшения самостоятельно.

• Целью нормализации CSS является обеспечение согласованности стилей встроенного браузера для всех браузеров. Такие элементы, как H1-6, будут выделены жирным шрифтом, большими и так далее в разных браузерах. Затем вы должны добавить только разницу в оформлении вашего дизайна.

Если ваш дизайн а) следует общим соглашениям для типографики и так далее, и б) Normalize.css работает для вашей целевой аудитории, то использование Normalize.CSS вместо сброса CSS сделает ваш собственный CSS меньше и быстрее писать.

Answer 3

Normalize.css - это, в основном, набор стилей, основанный на том, что, по мнению его автора, будет хорошо выглядеть и обеспечивать его согласованность во всех браузерах. Сброс в основном удаляет стилизацию элементов, чтобы вы могли лучше контролировать стилизацию всего.

Я использую оба.

некоторые стили из Reset, некоторые из Normalize.css. Например, из Normalize.css есть стиль, который гарантирует, что все элементы ввода имеют одинаковый шрифт, чего не происходит (между вводом текста и текстовыми областями). Сброс не имеет такого стиля, поэтому входные данные имеют разные шрифты, которые обычно не нужны.

Таким образом, в сущности, использование двух CSS-файлов делает лучшую работу по "выравниванию" всего;)

С уважением!

Answer 4

Из его описания видно, что он пытается согласовать стиль пользовательского агента по умолчанию во всех браузерах, а не отбрасывать все стили по умолчанию, как при сбросе.

Сохраняет полезные значения по умолчанию, в отличие от многих сбросов CSS.

Answer 5

Первый reset.css это худшая библиотека, которую вы можете использовать, потому что она удаляет стандартную структуру HTML и отображает все, что вы пишете, просто в виде текста, после назначения значений отступов полей и других атрибутов 0, Так, например, вы найдете, что <H1>, будет так же, как <H6>,

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

Answer 6

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

Answer 7

На этот вопрос уже были даны ответы несколько раз, я кратко подведу итоги каждого из них, приведу пример и идеи по состоянию на сентябрь 2019 года:

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

Пример:<h1> тег внутри <section> по умолчанию Google Chrome будет меньше "ожидаемого" размера <h1>тег. Microsoft Edge, с другой стороны, делает "ожидаемый" размер<h1>тег. Normalize.css сделает его согласованным.

Текущий статус: репозиторий npm показывает, что пакет normalize.css в настоящее время имеет более 500 тысяч загрузок в неделю. Звезд на GitHub в проекте репозитория более 36к.

• Сбросить CSS - как следует из названия, он сбрасывает все стили, то есть удаляет все стили пользовательского агента браузера.

Пример: это будет примерно так:

html, body, div, span, ..., audio, video {  
   margin: 0;  
   padding: 0;  
   border: 0;  
   font-size: 100%;  
   font: inherit;  
   vertical-align: baseline; 
}

Текущий статус: он гораздо менее популярен, чем Normalize.css, пакет reset-css показывает, что его скачивают около 26 тысяч в неделю. Звезд на GitHub всего 200, как это видно из репозитория проекта.

Answer 8

Normalize.css

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

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

Но в некоторых случаях мы не можем исправить неисправные браузеры в соответствии со стандартом, обычно из-за IE или EDGE. В этих случаях исправления в Normalize будут применять стили IE или EDGE к остальным браузерам.

Пример из реальной жизни

Chrome, Safari и Firefox отображают теги внутри тега / / / с размером шрифта, меньшим, чем у независимого тега, и с другим размером поля. Это стили пользовательского агента в Chrome, Safari и Firefox в случае тега внутри <article>/ <aside>/ <nav>/ <section>

Тег

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

Пример:

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

Reset CSS использует другой подход и говорит, что нам вообще не нужны стили браузеров по умолчанию. Какие бы стили нам ни понадобились, мы определим в проекте в соответствии с нашими потребностями. Таким образом, «Сброс CSS» сбрасывает все стили, которые поставляются с пользовательским агентом браузера.

Этот подход хорошо работает в приведенном выше примере со стилями по умолчанию: большую часть времени мы не хотим, чтобы браузеры по умолчанию font-size ни браузер по умолчанию margin.

Вот пример того, как выглядит небольшая часть 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; 
}

Методом сброса CSS мы определяем, что все HTML-теги не имеют отступов, полей, границ, одинакового размера шрифта и одинакового выравнивания.

Проблема с сбросами CSS в том, что они уродливы: у них большая цепочка селекторов, и они делают множество ненужных переопределений. И что еще хуже, они не читаются при отладке.

Но все же есть стили, которые мы предпочитаем сбрасывать, например <h1> к <h6>, <ul>, <li> и так далее.

Answer 9

Иногда лучшее решение - использовать оба. Иногда это не использовать ни один. И иногда, это использовать один или другой. Если вы хотите, чтобы все стили, включая отступы полей и отступов во всех браузерах, использовали reset.css. Тогда примените все художественные оформления и стили самостоятельно. Если вам просто нравятся встроенные стили, но вы хотите больше межбраузерной синхронизации, то есть нормализации, тогда используйте normalize.css. Но если вы решите использовать и reset.css, и normalize.css, сначала свяжите таблицу стилей reset.css, а затем (сразу) таблицу стилей normalize.css (сразу). Иногда дело не в том, какой из них лучше, а в том, когда использовать какой, а когда использовать оба, а когда нет ни того, ни другого. ПО МОЕМУ МНЕНИЮ.

Answer 10

Normalize.css: каждый браузер поставляется с некоторыми стилями css по умолчанию, которые, например, будут добавлять отступы вокруг абзаца или заголовка. Если вы добавите таблицу стилей нормализации, все эти правила браузера по умолчанию будут сброшены, поэтому для этого экземпляра заполнение тегов 0px Вот пара ссылок для получения более подробной информации: https://necolas.github.io/normalize.css/ http://nicolasgallagher.com/about-normalize-css/