Про normalize.css
Normalize.css — это маленький файл CSS, который обеспечивает кроссбраузерную согласованность в моделировании HTML элементов. Новая и современная замена старого и доброго reset.css.
Normalize.css сейчас работает в формах на Twitter Bootstrap, HTML5 Boilerplate, GOV.UK, Rdio, CSS Tricks и во многих других инструментах и сайтах.
Небольшой обзор инструмента
Normalize.css является новой альтернативой старого reset.css. Этот проект стал продуктом 100-часового интенсивного исследования в различиях стилей разных браузеров.
Normalize.css — задачи таковы:
Ко мне часто поступают вопросы про хостинг, которым я пользуюсь и поэтому решил указать хостинг в статье https://sprinthost.ru. Вы можете попробовать попользоваться хостингом 30 дней бесплатно. Чтобы понять, как будет работать Ваш сайт на этом хостинге просто перенести свой сайт (в этом поможет поддержка хостинга бесплатно) и и таким образом сможете понять подходит хостинг Вам или нет. На этом хостинге находятся сайты с 20 000 тысяч посещаемость и сайты чувствуют себя отлично. Рекомендую! Да, если делать оплату на 1 год то получаете скидку 25%. И что мне нравится — тех. поддержка всегда помогает в технических вопросах, за что им спасибо. Как Вы понимаете не всегда проходит всё гладко и нет желания, чтобы сайт не был доступен тем самым страдал трафик и доход.
Он использует поддержку огромного количества браузеров (охватывая, конечно и мобильные) и использует свои стили, чтобы нормализовать теги HTML5, включая списки, таблицы, формы, контент и типографику.
Несмотря на то, что он нужен только для нормализации, он еще использует прагматические значения по умолчанию, где они более нужнее.
Normalize или Reset?
Но надо знать и понимать чем отличается normalize.css от reset.css.
Normalize.css не трогает нужные значения, которые установлены по умолчанию.
Reset.css использует свои стили почти для всех элементов и визуально получается все однотипно. И отличается от normalize.css тем, что затирает множество нужных стилей браузера, которые установлены по умолчанию. А это означает одно: вам нужно будет переписать стили для всех распространенных типографических элементов.
Соответственно — когда тег HTML различается стилями в разных браузерах, normalize.css пытается поправить эти стили до возможно однотипного отображения в соответствии с современными стандартами, если это он может сделать.
Normalize.css поправляет распространенные ошибки.
Он правит распространенные ошибки компьютерных и мобильных браузеров, которые не в состоянии поправить reset.css. Это включает в себя параметры отображения элементов HTML5, исправляя font-size для форматирования текста в SVG IE9, и много ошибок, связанные с формами отправки в разных веб-обозревателях и операционных системах.
Например, вот как normalize.css делает новый тег HTML5 input type=[search] кроссбраузерным и стильным:
/** * 1. Addresses appearance set to searchfield in S5, Chrome * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof) */ input[type=»search»] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /** * Removes inner padding and search cancel button in S5, Chrome on OS X */ input[type=»search»]::-webkit-search-decoration, input[type=»search»]::-webkit-search-cancel-button { -webkit-appearance: none; }
Reset.css часто не приносит желаемого результата для браузера. Это очень видно в отношении форм — область, где normalize.css может обеспечить некоторую ощутимую помощь.
Normalize.css не грузит вашу систему отладки.
Обычно вот так в браузере отображается инструмент отладки, когда сброс стилей CSS происходит с помощью простого файла reset.css.
С normalize.css такой проблемы нет, потому что используется несколько селекторов в наборе правил таблиц стилей.
Normalize.css — модульная система.
Проект разбивается на относительно самостоятельные разделы, что делает его легким для вас, чтобы увидеть, какие именно элементы нуждаются в специфических стилей. Кроме того, это дает вам возможность удалить разделы (например, формы) если вы точно знаете, что их никогда не будет на вашем сайте.
У normalize.css есть подробная документация.
Код normalize.css основан на детальном исследовании кроссбраузерности и методического тестирования. Есть подробная документация файла на GitHub Wiki. Это означает, что вы можете выяснить, что каждая строка кода делает, почему она включена, какие различия между браузерами, и более легко запускать свои собственные тесты.
Задача этого проекта — показать людям то, как разные обозреватели отрисовывают элементы по умолчанию, и сделать его проще для них и лучше.
Как пользоваться normalize.css.
Во-первых, установить или загрузить normalize.css из GitHub. Есть 2 основных способа использовать это.
Способ 1: использовать normalize.css как начало для своего собственного проекта CSS, изменяя значения в соответствии с дизайном заказчика.
Способ 2: оставить normalize.css как есть и строить уже непосредственно на нем, чтобы переопределить значения по умолчанию для вашей таблицы стилей при необходимости.
Закрытие комментариев.
Normalize.css очень отличается по своим масштабам и исполнению от reset.css. Это стоит чтобы его использовать и посмотреть, соответствует он вашему подходу к развитию и предпочтению.
Проект развивается открыто на github. Любой желающий может сообщить о проблемах и прислать свои патчи. Полная историю проекта доступна для любого, чтобы видеть как развивается проект и какие изменения вносятся.