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

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

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

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

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

Я работаю на 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

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

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

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

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

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

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

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

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

С уважением!

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

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

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

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

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

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

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