Как скачать normalize css
Перейти к содержимому

Как скачать normalize css

  • автор:

О normalize.css

Это перевод статьи Николаса Галахера — «About normalize.css».

Это перевод статьи Николаса Галахера — «About normalize.css»

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

  • Normalize.css — сайт проекта
  • Normalize.css — исходный код на GitHub

В настоящее время normalize.css используется в Twitter Bootstrap, HTML5 Boilerplate, GOV.UK, Rdio, CSS Tricks и во многих других фреймворках, инструментах и сайтах.

Обзор

Normalize.css является альтернативой CSS Reset. Проект является продуктом сотен часов глубокого исследования различий между изначальными стилями браузера. Это исследование провели Николас Галахер, @necolas и Джонатан Нил, @jon_neal.

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

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

Несмотря на то, что проект основан на принципе нормализации, он использует стандартные настройки там, где они предпочтительны.

Нормализовать или сбрасывать?

Стоит понимать более подробно, в чём отличие normalize.css от традиционного reset.css.

Normalize.css сохраняет полезные настройки по умолчанию

Reset.css накладывает однородный визуальный стиль, выравнивая стили по умолчанию почти для всех элементов. В отличие от этого, normalize.css сохраняет многие полезные стили браузеров по умолчанию. Это значит, что не требуется повторно объявлять стили для всех стандартных элементов типографики.

Когда элемент имеет различные стили по умолчанию в разных браузерах, normalize.css там, где это возможно, стремится сделать эти стили совместимыми и соответствующими современными стандартам.

Normalize.css исправляет популярные ошибки

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

Например, вот как normalize.css делает HTML5-элемент формы с типом search кроссбраузерным и стилизованным.

/** * 1. Переопределяет свойство `appearance`, заменяет `searchfield` в Safari и Chrome. * 2. Переопределяет свойство `box-sizing`, заменяет `border-box` в Safari и Chrome. */ input[type="search"] < -webkit-appearance: textfield; /* 1 */ box-sizing: content-box; /* 2 */ >/** * Убирает внутренний отступ и кнопку очистки строки поиска в Safari и Chrome в OS X */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration

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

Normalize.css не мешает вашим инструментам отладки

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

Частый вид окна инструментов разработчика браузера при использовании reset.css

Такая проблема не возникает с normalize.css из-за целенаправленных стилей и умеренного использования множественных селекторов в наборе правил.

Normalize.css модульный

Проект разбит на относительно независимые участки, что позволяет увидеть, каким именно элементам нужны конкретные стили. Кроме того, это даёт вам возможность удалить блоки свойств (например, нормализацию форм), если известно, что они никогда не понадобятся на сайте.

Normalize.css имеет подробную документацию

Код normalize.css основан на детальном кроссбраузерном методичном тестировании. Подробно документированный файл вы можете найти на GitHub. Это значит, что вы можете узнать, что делает каждая строка кода, зачем она добавлена, какие различия существуют между браузерами. Также вы легко можете провести собственные тесты.

Цель проекта — показать людям, как по умолчанию браузеры отображают элементы, и помочь им упростить процесс внедрения улучшений.

Как использовать normalize.css

Сперва установите или скачайте normalize.css с GitHub. Есть два способа как можно его использовать.

Первый способ: используйте normalize.css как отправную точку CSS для вашего собственного проекта, изменяя значения согласно требованиям дизайна.

Второй способ: используйте normalize.css нетронутым и, основываясь на нём, переопределяйте стили в своём CSS при необходимости.

Заключение

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

Проект развивается в открытом доступе на GitHub. Любой желающий может сообщить о проблемах и предложить исправления. Полная история проекта доступна всем для просмотра, а в коммитах и тикетах находятся контекст и причины всех изменений.

Вся информация о стилях по умолчанию

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Saved searches

Use saved searches to filter your results more quickly

Cancel Create saved search

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

A modern alternative to CSS resets

License

necolas/normalize.css

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Go to file

Folders and files

Last commit message
Last commit date

Latest commit

History

View all files

Repository files navigation

A modern alternative to CSS resets

NPM

npm install --save normalize.css

CDN

Download

What does it do?

  • Preserves useful defaults, unlike many CSS resets.
  • Normalizes styles for a wide range of elements.
  • Corrects bugs and common browser inconsistencies.
  • Improves usability with subtle modifications.
  • Explains what code does using detailed comments.
  • Chrome
  • Edge
  • Firefox ESR+
  • Internet Explorer 10+
  • Safari 8+
  • Opera

Extended details and known issues

Additional detail and explanation of the esoteric parts of normalize.css.

pre, code, kbd, samp

The font-family: monospace, monospace hack fixes the inheritance and scaling of font-size for preformatted text. The duplication of monospace is intentional. Source.

Normally, using sub or sup affects the line-box height of text in all browsers. Source.

By default, Chrome on OS X and Safari on OS X allow very limited styling of select , unless a border property is set. The default font weight on optgroup elements cannot safely be changed in Chrome on OSX and Safari on OS X.

It is recommended that you do not style checkbox and radio inputs as Firefox’s implementation does not respect box-sizing, padding, or width.

Certain font size values applied to number inputs cause the cursor style of the decrement button to change from default to text .

The search input is not fully stylable by default. In Chrome and Safari on OSX/iOS you can’t control font , padding , border , or background . In Chrome and Safari on Windows you can’t control border properly. It will apply border-width but will only show a border color (which cannot be controlled) for the outer 1px of that border. Applying -webkit-appearance: textfield addresses these issues without removing the benefits of search inputs (e.g. showing past searches).

Please read the contribution guidelines in order to make the contribution process easy and effective for everyone involved.

dan-sazonov / normalize.css

Save dan-sazonov/588ddeab66a8f0c477e5b1875a5820b2 to your computer and use it in GitHub Desktop.

Normalize CSS v8.0.1

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

html
line-height : 1.15 ; /* 1 */
-webkit-text-size-adjust : 100 % ; /* 2 */
>
body
margin : 0 ;
>
main
display : block;
>
h1
font-size : 2 em ;
margin : 0.67 em 0 ;
>
hr
box-sizing : content-box; /* 1 */
height : 0 ; /* 1 */
overflow : visible; /* 2 */
>
pre
font-family : monospace , monospace; /* 1 */
font-size : 1 em ; /* 2 */
>
a
background-color : transparent;
>
abbr [ title ]
border-bottom : none; /* 1 */
text-decoration : underline; /* 2 */
text-decoration : underline dotted; /* 2 */
>
b ,
strong
font-weight : bolder;
>
code ,
kbd ,
samp
font-family : monospace , monospace; /* 1 */
font-size : 1 em ; /* 2 */
>
small
font-size : 80 % ;
>
sub ,
sup
font-size : 75 % ;
line-height : 0 ;
position : relative;
vertical-align : baseline;
>
sub
bottom : -0.25 em ;
>
sup
top : -0.5 em ;
>
img
border-style : none;
>
button ,
input ,
optgroup ,
select ,
textarea
font-family : inherit; /* 1 */
font-size : 100 % ; /* 1 */
line-height : 1.15 ; /* 1 */
margin : 0 ; /* 2 */
>
button ,
input < /* 1 */
overflow : visible;
>
button ,
select < /* 1 */
text-transform : none;
>
button ,
[ type = «button» ] ,
[ type = «reset» ] ,
[ type = «submit» ]
-webkit-appearance : button;
>
button :: -moz-focus-inner ,
[ type = «button» ]:: -moz-focus-inner ,
[ type = «reset» ]:: -moz-focus-inner ,
[ type = «submit» ]:: -moz-focus-inner
border-style : none;
padding : 0 ;
>
button : -moz-focusring ,
[ type = «button» ] : -moz-focusring ,
[ type = «reset» ] : -moz-focusring ,
[ type = «submit» ] : -moz-focusring
outline : 1 px dotted ButtonText;
>
fieldset
padding : 0.35 em 0.75 em 0.625 em ;
>
legend
box-sizing : border-box; /* 1 */
color : inherit; /* 2 */
display : table; /* 1 */
max-width : 100 % ; /* 1 */
padding : 0 ; /* 3 */
white-space : normal; /* 1 */
>
progress
vertical-align : baseline;
>
textarea
overflow : auto;
>
[ type = «checkbox» ] ,
[ type = «radio» ]
box-sizing : border-box; /* 1 */
padding : 0 ; /* 2 */
>
[ type = «number» ]:: -webkit-inner-spin-button ,
[ type = «number» ]:: -webkit-outer-spin-button
height : auto;
>
[ type = «search» ]
-webkit-appearance : textfield; /* 1 */
outline-offset : -2 px ; /* 2 */
>
[ type = «search» ]:: -webkit-search-decoration
-webkit-appearance : none;
>
:: -webkit-file-upload-button
-webkit-appearance : button; /* 1 */
font : inherit; /* 2 */
>
details
display : block;
>
summary
display : list-item;
>
template
display : none;
>
[ hidden ]
display : none;
>

Как скачать normalize css

Подскажите как правильно в рамках бэм это сделать?

Возможно нужно как то переопределить блок page?

Имеется ввиду чтобы этот css скомпилировался в runtime css, а не подключался из link в head , вообщем это касается любого другого css файла

Комментарии: 16

Т.е. создается блок i-normalize, туда кладётся css из normalize.css и указывается в .b-page.deps.js.

А в каком месте в блоке b-page ты вставляеешь блок i-normalize ? где то в head?

Я не вставляю его отдельно в head, он собирается внутри common.css. А сам common.css уже подключается в head, да. За позицию кода в common.css отвечает порядок подключения блоков в b-page.deps.js, т.е. чем раньше укажешь зависимость i-normalize, тем выше по коду в CSS он будет.

Хотя я уже сомневаюсь что правильно понял вопрос.

Покажи пример bemjson в котором указано, что нужно подключить normalize.css

Смотри, в bemjson ты указываешь блок page. У блока page в зависимостях в page.deps.js указываешь блок i-normalize. В i-normalize ты указываешь в i-normalize.bemhtml что твой блок i-normalize должен цепляться к блоку page как элемент css:

block i-normalize, default: return apply(
this._mode = »,
this.ctx = block: ‘page’,
elem: ‘css’
>
);
>

И в итоге в итоговом css для бандла у тебя есть css-код из блока i-normalize.

Спасибо, вроде понял, попробую. С applyCtx получилось бы изящнее

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

Верю, но я пока что тоже учусь использовать bemhtml и данный кусок бездумно скопировал, посмотрел что работает и забыл Рефакторинг будет после выпуска первой вёрстки, сейчас главное чтобы работало.

А можно объяснить что есть «runtime css»? Моё решение не претендует на единственно верное, оно скорее первое заработавшее и основано на коде как минимум годичной давности.

Здесь шаблон вообще не нужен, просто укажите блок в зависимостях для b-page.

P.s. Вам не должно хотеться использовать нормализацию или сброс стилей, все необходимое для стилизации должно быть независимо в каждом блоке, а оптимизацией пусть занимаются роботы(csso в данном случае).

По поводу p.s согласен, normalize не вписывается в бэм, подумаю над этим на досуге. Просто привык, что он в каждом проекте подключался

runtime css имеется ввиду общий файл в который склеиваются все css блоков

все верно написал: для того, чтобы подключить какой-либо css-файл в сборку, его не нужно указывать в bemjson и никаких шаблонов ему тоже не нужно, достаточно добавить его в deps.js для какого-то блока, который точно окажется на странице (b-page — отличный вариант).

ну и в принципе всякие ресеты-нормалайзы — это не тру, хотя на вкус и цвет.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *