- PVSM.RU - https://www.pvsm.ru -

Нормальный сброс

Нормальный сброс - 1

Расскажите про ресеты и нормалайзы, что лучше использовать?

Знаете, это как отвёртка и молоток — что лучше? Все хороши.

HTML хорош тем, что вы набросали тегов и всё — они сразу выглядят. И во всех браузерах всё примерно одинаково: чёрным Таймсом по белому <body>, да с синими ссылками. Эх, красота! Но в том и дело, что почти: точные стили для всех элементов хоть и рекомендованы сегодня в HTML5 [1], но в каждом браузере свои.

В HTML 4 было всего 78 строк стилей по умолчанию, вроде head { display: none } или text-decoration: underline для ссылок. В WebKit, Chrome и Firefox сегодня около 1000 строк стилей, в которые смело можно снаряжать археологическую экспедицию. Но мы не будем, у нас и так дел хватает.

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

* {
  margin: 0;
  padding: 0;
  border: 0;
  joffrey: kill;
  cersei: kill;
  frey: kill;
}

Звёздочка выбирает все элементы, а дальше начинается: margin: 0, padding: 0, border: 0, джоффри, серсея, фрей и все остальные свойства, которые мешают вам жить. Способ довольно варварский: не только потому, что выбирает элементы, которым ничего не нужно сбрасывать, но и потому, что некоторые стили лучше не трогать, иначе всё развалится — например, элементы форм.

/* ORLY? */

div, span {
  margin: 0;
  padding: 0;
  border: 0;
}

Следующей попыткой сделать из HTML стерильный набор кубиков, стал CSS Reset из Yahoo UI [5], который сбрасывал стили только там, где это было нужно. Ещё большую популярность получил Reset CSS Эрика Мейера [6], сделанный по мотивам Yahoo UI. Эти ресеты не только сбрасывали отступы, но и приводили к единому значению размер и семейство шрифта, выравнивание для текста и другие свойства.

/* YUI Reset */

html {
  color: #000;
  background: #FFF;
}
select {
  *font-size:100%;
}

Между ресетами Yahoo и Мейера были различия: Эрик, например, разумно не трогал элементы форм. Было много других решений, но все они решали единую задачу — сделать из сложных стилей по умолчанию простой констуктор, чтобы вы сразу могли писать свои стили, не сбрасывая встроенные.

Эти ресеты никогда не были чистыми сбросами браузерных стилей: нет-нет, да назначались цвета, выравнивание, начиналась борьба за кроссбраузерность. В итоге все проекты несли печать предпочтений конкретных авторов. Самым нейтральным из ресетов до сих пор остаётся Reset CSS Мейера, но даже он убрал вредный :focus { outline: 0 } — и правильно сделал.

/* Не забыть вернуть обводку */

:focus {
  outline: 0;
}

/* Забыл */

Многих ресеты раздражали: для внутренних блоков с содержимым приходилось восстанавливать стили не только для списков, но и базовых текстовых элементов вроде <strong>, <em>, ``` и других. У Yahoo даже был CSS Base, который назначал правильные базовые стили. После ресета, который отменял неправильные. Почему бы и нет.

Николас Галлахер и Джонатан Нил зашли с другой стороны: вместо того, чтобы сбрасывать примерно одинаковые браузерные умолчания, они подробно изучили все различия и проблемы — и сделали Normalize.css [7]. Он делает везде одинаково и решает много проблем по пути.

С Normalize вам снова приходится убирать отступы со списков. Многих это провоцирует использовать элементы попроще, но будьте внимательны — это чревато диватозом. Зато Normalize берёт на себя сложности оформления элементов форм, поведение мобильных браузеров и много мелких багов.

Видите? Совсем другую задачу решает проект. Я на днях видел сайт, на котором после Normalize.css подключают Reset CSS, чтобы оставить нормализацию, но при этом получить нейтральный конструктор. Это конечно глупости, которые приводят к распуханию глобальных стилей. Уж лучше собрать свой гибрид — кода там всего ничего.

@import "normalize.css";
@import "reset.css";
@import "yui-reset.css";
@import "yui-base.css";
@import "h5bp.css";

Благо Normalize.css дотошно документирован: у каждого свойства стоит объяснение зачем оно нужно. В сомнительных местах, которые не нормализуют, а назначают более подходящие (по мнению авторов) умолчания — стоят пометки. Это помогает не просто слепо копировать его из проекта в проект, а использовать только нужные части.

Представьте, что вы в рамках проекта делаете модуль, который потом будет использоваться на другом сайте. У вас есть Normalize, а у них? Или наоборот: на ваш проект приходит сторонний модуль — а там нет Normalize и всё подогнано под браузерные баги, ну или особенности. Или даже есть Normalize, но другой версии. Так себе модульность получается.

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

Reset CSS не обновлялся с 2011 года, хотя до сих пор отлично работает. Но его эпоха уже прошла — на смену спешит новое свойство all [8] со значением unset. Оно сбрасывает браузерные умолчания, где это нужно — почитайте на MDN. Normalize.css сейчас в моде и хорошо решает проблемы кроссбраузерности [9], но попробуйте использовать его как справочник. Ну так Reset или Normalize? Танцуйте от задачи.

/* Welcome to the */

.future {
  all: initial;
  all: inherit;
  all: unset;
}

Видеоверсия

Вопросы можно задавать здесь [10].

Автор: htmlacademy

Источник [11]

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/css3/268006

Ссылки в тексте:

[1] рекомендованы сегодня в HTML5: https://www.w3.org/TR/html5/rendering.html

[2] HTML 4: 78: https://www.w3.org/TR/CSS21/sample.html

[3] Chrome: 1123: https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/css/html.css

[4] Firefox: 907: https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css

[5] CSS Reset из Yahoo UI: https://yuilibrary.com/yui/docs/cssreset/

[6] Reset CSS Эрика Мейера: https://meyerweb.com/eric/tools/css/reset/

[7] Normalize.css: https://necolas.github.io/normalize.css/

[8] новое свойство all: https://developer.mozilla.org/en/docs/Web/CSS/all

[9] хорошо решает проблемы кроссбраузерности: https://htmlacademy.ru/blog/64-about-normalize-css

[10] здесь: https://htmlacademy.ru/shorts

[11] Источник: https://habrahabr.ru/post/342052/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best