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

Ответ 1

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

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

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

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

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

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

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

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

Ответ 2

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

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

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

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

Ответ 3

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

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

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

Таким образом, используя два файла CSS, лучше выполнить "Equalizing" все:)

привет!

Ответ 4

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

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

Ответ 5

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

Ответ 6

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

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

Ответ 7

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

Ответ 8

На этот вопрос уже отвечали несколько раз, я приведу краткое изложение для каждого из них, пример и выводы по состоянию на сентябрь 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, как это можно заметить из репозитория проекта repository.