От автора: сегодня речь пойдет о CSS Resets 2018. Все браузеры поставляются с набором стилей по умолчанию, которые применяются к каждой веб-странице в так называемой «таблице стилей агента пользователя». Большинство из этих таблиц стилей имеют открытый исходный код, поэтому вы можете просмотреть их.
Таблица стилей Chromium UA — Google Chrome & Opera
Таблица стилей Mozilla UA — Firefox
Таблица стилей WebKit UA — Safari
Многие стили согласованы во всех таблицах стилей пользовательских агентов. Например, я привык думать, что элемент head не был виден из-за какой-то специальной функции, но на самом деле он скрывается, как и любой другой элемент на странице, с помощью display: none! Вы можете увидеть этот же стиль в WebKit, Chromium и Mozilla.
Много стилей, однако, являются несовместимыми между разными таблицами стилей агента пользователя. Например, посмотрите, как выглядит поле поиска в разных браузерах.
Дело за CSS Resets
Чтобы устранить несоответствия между таблицами стилей агента пользователя, были разработаны CSS Resets. CSS Resets — это набор стилей, применяемых к странице перед любыми другими пользовательскими стилями, с целью создания более стандартизированной базы.
Эрик Мейер в 2007 году написал статью о причинах необходимости CSS Resets, которая, я думаю, до сих пор остается актуальной: Основная причина заключается в том, что все браузеры имеют настройки представления по умолчанию, и для разных браузеров они все разные… Мы думаем, что наш CSS изменяет внешний вид документа по умолчанию, но с помощью «сброса» таблицы стилей мы можем сделать этот стандартный вид более единообразным для всех браузеров, и, следовательно, тратить меньше времени на борьбу с настройками браузера по умолчанию.
Хотя сегодняшняя ситуация отличается от того, что было в 2007 году, я думаю, что CSS Resets могут быть полезны.
Являются ли таблицы стилей агентов пользователя в наши дни более согласованным?
Да, многие стили по умолчанию таблиц стилей разных агентов пользователя теперь очень похожи. Например, большинство браузеров применяют к элементу одинаковый горизонтальный отступ 0.67em и одинаковый размер шрифта h1 — 2em. Однако эта согласованность является относительно новой, и нам все еще необходимо рассматривать поддержку старых браузеров, которые имеют менее согласованные стили по умолчанию.
Кроме того, в зависимости от типа сброса, который мы хотим применить (как мы увидим ниже), нам все еще может понадобиться сбросить стили, даже если мы нацелены только на современные, более согласованные браузеры.
Разве мы не применяем собственные стили для переопределения сброса в любом случае?
Один из главных аргументов против использования сброса CSS заключается в том, что многие стили в конечном итоге переопределяются нашей основной таблицей стилей, что означает, что стили сброса излишне увеличивают время загрузки страницы. Хотя это определенно верно, для меня это недостаточно веские аргументы по двум причинам.
Во-первых, я думаю, что сброс стилей позволяет нам писать более чистые стили. Мы можем разделить стили, предназначенные для конкретных браузеров, и стили для реального дизайна сайта. Вместо того, чтобы вносить исправления для конкретного браузера в то же место, где определяются стили для конкретного дизайна, мы можем разделить их.
Во-вторых, сбросы (как правило) очень малы и должны оказывать незначительное влияние на время загрузки. Мы часто используем каскад для переопределения и изменения стилей элементов, и, хотя в некоторых случаях может возникнуть некоторая регрессия производительности, она будет незначительной.
Типы сброса CSS
Есть много, много разных сбросов CSS. С тех пор, как в 2004 году впервые был введен undohtml, появилось множество сбросов, варьирующихся по сложности и специфичности.
В целом, есть три цели, которые должен реализовать CSS Reset. Некоторые таблицы стилей сброса объединяют эти три цели, тогда как другие пытаются решить только одну.
Исправить ошибки стиля агента пользователя
Отменить любую «самовольную» стилизацию агента пользователя
Создать последовательную базу стилей
Корректирующий сброс
Одной из целей сброса CSS является исправление ошибок в таблицах стилей пользовательских агентов. Как вы можете представить, это в большей мере ориентировано на старые браузеры. Хороший пример этого — когда появился HTML5, и такие браузеры, как Internet Explorer 9, не применяли корректный тип display к новым элементам.
В таких сбросах, как normalize.css, эти ошибки специально были исправлены:
/** * Добавляет корректный display в IE. */ main { display: block;
}Поскольку эти стили применяются только к более старым браузерам, мы также можем использовать PostCSS процессор, такой как PostCSS Normalize, наряду с browserlist. Это позволяет условно добавлять эти типы стилей, только если мы поддерживаем этот конкретный браузер.
Другой пример, который применяется в некоторых современных браузерах — исправление для display элементов с помощью атрибута hidden.
[hidden] { display: none !important; // Подходящий случай использования !important
}Отмена самовольного применения стиля агентом пользователя
Еще одна цель сброса CSS состояла в том, чтобы отменить любые произвольные стили от агентов пользователя.
Есть много мнений относительно того, что такое самовольный стиль. Мое определение самовольного стиля — это все, что не является (из-за отсутствия лучшего слова) «голой» версией. Например, я хотел бы рассмотреть возможность добавления отступов в 2em для заголовков, как это делают большинство таблиц стилей агентов пользователей? Почему не 3em? Или 4em? На мой взгляд, «несамовольным» стилем был бы просто отступ 0. Хорошо, вернемся к сбросу.
Простая версия этого — “Universal Reset”, который удаляет все поля и отступы для всех элементов:
* { margin: 0; padding: 0;
}Этот сброс, вероятно, слишком сложный, так как он удаляет отступы для элементов, для которых вы не ожидаете этого; таких как input. Альтернативный, более часто используемый сброс — это CSS Reset Эрика Мейера. Он сбрасывает поля, отступы, границы и размер шрифта для определенных элементов на 0 или none. И это не включает элементы, для которых вы ожидаете увидеть поля.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
}Сбросы для обеспечения последовательных стилей
В отличие от предыдущей категории сбросов, которые пытаются исправить самовольные стили агентов пользователя путем полного их удаления, эта категория сбрасывает их, устанавливая собственные последовательные стили.
Например, вместо установки для всех размеров шрифта 1em или 0 для полей, сбросы этого типа устанавливают произвольный стиль.
/** * Исправление размера шрифта и отступов для элемента `h1` внутри контекста * `section` и `article` в Chrome, Firefox и Safari. */ h1 { font-size: 2em; margin: 0.67em 0;
}Bootstrap’s Reboot — это еще один пример. Они идут дальше, объявляя даже семейства шрифтов и цвета фона для элемента body.
// Body
//
// 1. Удаление отступов во всех браузерах.
// 2. В качестве лучшей практики, применяют `background-color` по умолчанию.
// 3. Явно устанавливают исходное значение text-align, поэтому мы позже можем использовать
// `унаследованное` значение для таких вещей, как элементы `<th>`. body { margin: 0; // 1 font-family: $font-family-base; font-size: $font-size-base; font-weight: $font-weight-base; line-height: $line-height-base; color: $body-color; text-align: left; // 3 background-color: $body-bg; // 2
}Как мы используем CSS Resets сегодня?
Недавно я провела опрос в Твиттере, спрашивая людей, какой сброс CSS они используют в настоящее время. Большинство людей используют такие сбросы, как Normalize.css, которые представляет собой комбинацию исправления ошибок браузеров и установки согласованных стилей. Большое количество людей сообщило о своих собственных индивидуальных сбросах, которые, как правило, попадают в третью категорию.
Мое мнение
Я всегда использовала слегка измененную версию сброса CSS Эрика Мейера по двум причинам.
Во-первых, я обычно предпочитаю работать с максимально пустым списком, добавляя стили по своему усмотрению. Это просто личное предпочтение.
Во-вторых, я твердо верю в то, что поля применяются только в одном направлении (обычно вниз), и большинство самовольных сбросов, как и большинство таблиц стилей пользовательских агентов, не следуют этому правилу. Поэтому я бы предпочла начать с нулевых полей и отступов в любом месте и добавлять их по ходу.
В настоящее время я гораздо больше подправляю свой файл сброса, даже добавляя утилиты, которые мне нужны, в каждом проекте, над которым я работаю, например, в классе .sr-only. Это заставляет меня думать, что это больше не сброс, а скорее «база». С появлением новых сбросов, таких как Reboot, кажется, что эта тема на сегодняшний день хорошо проработана.
Мне действительно интересно услышать, что вы используете. Напишите в комментариях, что вы думаете о сбросах стилей!
Источник: https://bitsofco.de/
Редакция: Команда webformyself.