Как обнулить стили css
Перейти к содержимому

Как обнулить стили css

  • автор:

Современный сброс стилей CSS

В этой статье вы узнаете о том, как сбрасывать CSS в наши дни.

��Мой Твиттер — там много из мира фронтенда, да и вообще поговорим��. Подписывайтесь, будет интересно: ) ✈️

Если честно, то кажется я слишком много и через чур увлеченно забиваю голову всякой нудной чепухой из CSS. Одним из таких моментов является сброс CSS, это возможно тот момент, который забрал у меня слишком много времени за последние годы.

В эпоху современной веб разработки, нам не так то и нужен загруженный сброс стилей или вообще совсем не нужен, поскольку проблемы совместимости CSS в браузерах сейчас встречаются куда реже, чем это было в дни старого доброго IE6. Это был момент времени, когда появились такие реализации сброса стилей в CSS, как normalize.css и спасли нас от ада с бесконечной вознёй при правке стилей. Но эти дни уже прошли и сейчас мы вполне можем доверять браузерам в этом плане, так что подобные подходы к сбросу стилей, в большинстве своём, уже довольно излишне.

Сброс разумных настроек по умолчанию

Мне до сих пор нравится делать сброс, так что я долго и усердно, годами ковырялся, как одержимый в Code golf (прим. это когда побеждает самый короткий и действенный подход в программировании ) стиле на этом направлении. Я всё объясню, что в этом коде где и как, но сначала посмотрите на него целиком:

/* Указываем box sizing */
*,
*::before,
*::after box-sizing: border-box;
>

/* Убираем внутренние отступы */
ul[class],
ol[class] padding: 0;
>

/* Убираем внешние отступы */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd margin: 0;
>

/* Выставляем основные настройки по-умолчанию для body */
body min-height: 100vh;
scroll-behavior: smooth;
text-rendering: optimizeSpeed;
line-height: 1.5;
>

/* Удаляем стандартную стилизацию для всех ul и il, у которых есть атрибут class*/
ul[class],
ol[class] list-style: none;
>

/* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */
a:not([class]) text-decoration-skip-ink: auto;
>

/* Упрощаем работу с изображениями */
img max-width: 100%;
display: block;
>

/* Указываем понятную периодичность в потоке данных у article*/
article > * + * margin-top: 1em;
>

/* Наследуем шрифты для инпутов и кнопок */
input,
button,
textarea,
select font: inherit;
>

/* Удаляем все анимации и переходы для людей, которые предпочитай их не использовать */
@media (prefers-reduced-motion: reduce) * animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
>
>

Ну, а теперь разбираемся

Начинаем мы с box-sizing . Тут я простым и элегантным движением сразу же сбрасываю все элементы и псевдоэлементы на box-sizing: border-box .

*,
*::before,
*::after box-sizing: border-box;
>

Кто-то считает, что псевдоэлементы должны наследовать параметры блочной модели, но я считаю это глупым. Если вы хотите использовать другое значение для box-sizing , то просто укажите его — ну это то, как я делаю, в любом случае. Я написал про box-sizing больше в CSS From Scratch.

/* Убираем внутренние отступы */
ul[class],
ol[class] padding: 0;
>

/* Убираем внешние отступы */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd margin: 0;
>

После box-sizing , я сбрасываю margin и padding , даже там, где они выставлены дефолтными настройками браузеров. Тут и так всё понятно, так что я не буду уделять этому моменту много внимания.

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

body min-height: 100vh; 
scroll-behavior: smooth;
text-rendering: optimizeSpeed;
line-height: 1.5;
>

Идем дальше: стили для body . Тут у меня всё просто. Очень полезно указать для body занять весь viewport , даже когда он пуст, делаю я это, выставляя min-height на 100vh . Ещё мне нравится плавный скролл к анкорам, так что тут я выставлю scroll-behavior: smooth .

Ещё, я выставил только два текстовых стиля. line-height на 1.5 , потому что по-дефолту стоит 1.2 , чего откровенно недостаточно в плане доступности и читабельности текста. Так же я выставил text-rendering на optimizeSpeed . Используя optimizeLegibility вы делаете ваш текст приятнее на вид, но можете столкнуться с серьёзными проблемами производительности, такими как задержки в 30 секунд при загрузке, так что я его стараюсь избегать. Хотя, я иногда добавляю его для секций с микротекстом.

ul[class],
ol[class] list-style: none;
>

Как и с отступами, я сбрасываю стилизацию списков только у элементов, у которых указан class .

a:not([class]) text-decoration-skip-ink: auto;
>

Для ссылок без указания класса, я выставлю text-decoration-skip-ink: auto , так что подчеркивание будет рендериться куда читабельнее. Вообще, это можно было бы выставить всем ссылкам, но у меня возникло несколько конфликтов, так что я оставил так, как написано выше.

img max-width: 100%; 
display: block;
>

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

article > * + * margin-top: 1em;
>

Мне очень нравится этот трюк в CSS и я наконец-то осмелился добавить его в сброс. Так называемый “lobotomized owl selector” выбирает прямых потомков article и добавляет им сверху внешний отступ в 1em . Это указывает понятную периодичность в потоке контента у article . Вообще, на самом деле, я использую удобную штуку с .flow , сейчас уже почти в каждом проекте. Вы можете больше прочитать про это на 24 Ways. Да и вообще, мне так кажется, что это сейчас мой самый используемый CSS.

input,
button,
textarea,
select font: inherit;
>

Ещё одна вещь, которую я наконец то решился выставить по дефолту это font: inherit для инпутов, которые, проще говоря, делают то, что и должны делать. Хватит уже этого мелкого (mono, в некоторых случаях) текста!

@media (prefers-reduced-motion: reduce) * animation-duration: 0.01ms !important; 
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
>
>

Последнее, но уж точно не менее важное, это один @media запрос, который сбрасывает анимации, переходы и поведенческие настройки для скролла, но только в тех случаях, когда пользователь предпочитает как можно меньше всяких движений на странице. Мне нравится такая штука в сбросе стилей, с побеждающим специфичность селекторов !important , потому что в современных реалиях, если пользователь не хочет видеть лишних переходов и т.п., то он и не должен их видеть, вне зависимости от CSS при сбросе стилей.

Заключение

Вот и всё, вот он маленький и сброс для стилей, который делает жизнь куда проще. Если он вам приходится по вкусу, то смело можете его брать на вооружение! Берите его на GitHub или в NPM.

Reset CSS: краткий сброс стилей

Правила сброса стилей CSS не должны быть километровыми. Кроме того, большинство современных браузеров поддерживают довольно единообразный базовый макет. Ниже мы приводим простой и эффективный на наш взгляд сброс стилей. Чтобы он начал работать, просто скопируйте его в свой новый проект.

html < box-sizing: border-box; font-size: 16px; >*, *:before, *:after < box-sizing: inherit; >body, h1, h2, h3, h4, h5, h6, p, ol, ul < margin: 0; padding: 0; font-weight: normal; >ol, ul < list-style: none; >img

Чуть подробнее о сбросе стилей можно почитать здесь.

Давайте подробнее рассмотрим весь приведенный выше фрагмент.

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

Возможно, наиболее важной частью этого сброса CSS является box-sizing: border-box – именно эта часть обеспечит установку согласованных и предсказуемых размером. Значение по умолчанию для content-box не учитывает отступы и границы.

Если вы хотите сохранить стандартные маркеры для своих списков, можете удалить правило для ol и ul.

Что касается размеров шрифта: по умолчанию обычные заголовки не выделяются жирным шрифтом. Удалите это правило, если вам подходит стиль по умолчанию.

Согласно этому набору правил, размер шрифта по умолчанию равен 16px. Все остальное можно указать в единицах rem, и тогда все элементы будут отстраиваться согласно этим 16px. Если вы хотите глобально изменить настройку и сделать текст в целом немного больше, вы можете изменить базовое значение на 17 или 18px.

Более современный сброс CSS

Я написал A Modern CSS Reset почти 4 года назад, и, да, он не слишком хорошо сохранился. Несколько дней назад я заметил, что на него снова ссылаются, и подумал, что, вероятно, это хорошая идея — опубликовать обновлённую версию.

Я знаю, что у меня ужасный послужной список в области сопровождения open source. Поэтому я решил заархивировать оригинал и просто опубликовать это вместо него. Делайте с ним что хотите!

Чтобы быть предельно ясным, это сброс CSS, который работает для меня и для нас в Set Studio. Всякий раз, когда я говорю мы , я имею в виду именно нас.

Сброс CSS в целом

/* Box sizing rules */ 
*,
*::before,
*::after

box-sizing: border-box;
>

/* Prevent font size inflation */
html
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
>

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd

margin: 0;
>

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list']

list-style: none;
>

/* Set core body defaults */
body
min-height: 100vh;
line-height: 1.5;
>

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label

line-height: 1.1;
>

/* Balance text wrapping on headings */
h1, h2,
h3, h4

text-wrap: balance;
>

/* A elements that don't have a class get default styles */
a:not([class])
text-decoration-skip-ink: auto;
color: currentColor;
>

/* Make images easier to work with */
img,
picture

max-width: 100%;
display: block;
>

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select

font: inherit;
>

/* Make sure textarea without a rows attribute are not tiny */
textarea:not([rows])
min-height: 10em;
>

/* Anything that has been anchored to should have extra scroll margin */
:target
scroll-margin-block: 5ex;
>

Разбор

По традиции, давайте разберёмся, что к чему:

/* Правила box sizing */ 
*,
*::before,
*::after

box-sizing: border-box;
>

Это правило довольно понятно, но вкратце оно заключается в том, что я устанавливаю для всех элементов и псевдоэлементов использование border-box , а не стандартного content-box для определения размера. Сейчас мы больше внимания уделяем тому, чтобы позволить браузеру делать больше работы с гибкими макетами с плавными шрифтами и пространством, и это правило уже не так полезно, как раньше. Однако редко какой проект обходится без явного указания размера, поэтому ему по-прежнему есть место в сбросе.

/* Предотвращение увеличения размера шрифта */ 
html
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
>

Лучше всего это объясняет Kilian. Он также объясняет, почему нам все ещё нужны эти уродливые префиксы.

/* Удаление отступов по умолчанию для лучшего контроля в авторском CSS */ 
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd

margin: 0;
>

Я всегда выступаю за отказ от стилей пользовательского агента для полей в пользу определения потока и пространства на макроуровне. В логических свойствах я удаляю конечное поле, а не со всех сторон, как в старом варианте. Кажется, это хорошо работает в продакшне.

/* Удаление стилей списка в элементах ul, ol с ролью списка, что предполагает удаление стилей по умолчанию */ 
ul[role='list'],
ol[role='list']

list-style: none;
>

Safari делает дикие вещи, в том числе и такую: если убрать стилизацию списка, то будет удалена семантика для VoiceOver. Кто-то скажет, что это особенность, а кто-то — что ошибка. Я скажу, что это глупость, но чтобы убедиться, что role добавлена, по умолчанию удаляю стилизацию списка для неё в качестве небольшого вознаграждения.

/* Установка значений по умолчанию для body */ 
body
min-height: 100vh;
line-height: 1.5;
>

Мне нравится отличная высота строк, которая наследуется. Установка минимальной высоты как 100vh для body тоже довольно удобна, особенно если вы собираетесь устанавливать декоративные элементы. Может показаться заманчивым использовать новую единицу измерения, например, dvh , но если вы углубитесь, как это сделал Ahmad, то увидите, что это может вызвать больше проблем, чем решений. А это совсем не то, что вы хотите, чтобы делал ваш сброс CSS!

Единица измерения svh кажется лучше, чем dvh , но я доволен vh . Всегда убеждайтесь в том, что вы понимаете новые единицы, прежде чем погружаться в них с головой или рекомендовать их как Евангелие — вот мой совет. Если что-то уже работает, нет необходимости менять это!

/* Установите меньшую высоту строк в заголовках и интерактивных элементах */ 
h1, h2, h3, h4,
button, input, label

line-height: 1.1;
>

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

/* Баланс переноса текста в заголовках */ 
h1, h2,
h3, h4

text-wrap: balance;
>

Это правило довольно специфично для наших проектов, но благодаря новому свойству text-wrap заголовки выглядят прекрасно. Я полагаю, что некоторым людям это покажется неприемлемым. Так что, возможно, вы захотите удалить это правило.

/* Элементы A, не имеющие класса, получают стили по умолчанию */ 
a:not([class])
text-decoration-skip-ink: auto;
color: currentColor;
>

Это правило в первую очередь гарантирует, что оформление текста не будет мешать восходящим и нисходящим элементам. Я думаю, что сейчас это в основном делается по умолчанию в браузерах, но это хорошая страховка, чтобы установить её тоже. В студии мы предпочитаем, чтобы ссылки наследовали currentColor текста тоже по умолчанию, но если вы этого не делаете, то, вероятно, захотите его убрать.

/* Наследование шрифтов для input и button */ 
input,
button,
textarea,
select

font: inherit;
>

Сокращение font: inherit чертовски полезно, и мы, конечно, видим это на примере элементов ввода и форм. В основном это касается элементов , но не помешает применить его и к другим элементам формы, поскольку это позволит сэкономить на CSS в дальнейшем проекте.

/* Убедитесь, что textarea без атрибута rows не будут маленькими */ 
textarea:not([rows])
min-height: 10em
>

Говоря об элементах , следует отметить, что это правило очень удобно. По умолчанию, если не добавить атрибут rows , они могут быть очень маленькими. Это не идеально для грубых указателей, таких как пальцы, и, как следствие, элементы обычно используются для нескольких строк текста. Поэтому имеет смысл упростить эту задачу.

/* Все, к чему были привязаны якоря, должно иметь дополнительные поля прокрутки */ 
:target
scroll-margin-block: 5ex;
>

Наконец, если элемент является якорным, то имеет смысл добавить над ним ещё немного пространства с помощью scroll-margin , которое учитывается только в том случае, если этот элемент является целевым. Небольшой нюанс, обладающий большим потенциалом для удобства пользователей! Если у вас есть фиксированный заголовок, возможно, вам придётся его подкорректировать.

Подведение итогов

Продержится ли этот сброс CSS ещё 4 года? Возможно! С предыдущим проблем не возникало.

Несмотря на это, он довольно полезен в качестве базы для начала проектов в нашей студии. Мы не возвращаемся и не обновляем задним числом предыдущий сброс CSS на клиентских проектах, потому что он работает абсолютно нормально.

Сброс CSS — одна из тех вещей, из-за которых люди очень переживают, но на самом деле, учитывая, что браузеры сейчас чертовски хороши, он, скорее всего, даже не нужен. Мой совет — возьмите понравившиеся вам фрагменты из тех, что вы найдёте в Интернете, и создайте свой собственный, подходящий для вас и вашей команды.

Сброс стилей CSS (CSS Reset).

Сброс стилей CSS

Когда мы приступаем формировать файл стилей для нашего html-документа, то очень важно выполнить так называемый сброс стилей. Сброс стилей в css (CSS Reset) – это, по сути, обнуление основных свойств и атрибутов, установленных браузером по умолчанию для различных элементов страницы, например, окно браузера может иметь ненужные вам отступы и т.п. Чтобы обнулить все заданные свойства по умолчанию, т.е. выполнить сброс стилей, мы должны начать формировать наши таблицы стилей с прописывания определенного набора стилей. И это должно стать правилом в работе.

Существует несколько способов сбросить стили по умолчанию. Я приведу здесь два наиболее распространенных.

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

*

Здесь мы обнуляем все отступы для любого элемента страницы.

Второй вариант – более объемный, но затрагивающий значительно больше свойств и атрибутов. Автор данного метода – Eric Meyer.

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, font, 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 margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
>
body line-height: 1;
>
ol, ul list-style: none;
>
blockquote, q quotes: none;
>
:focus outline: 0;
>
ins text-decoration: none;
>
del text-decoration: line-through;
>
table border-collapse: collapse;
border-spacing: 0;
>

Именно этот метод я и люблю использовать при верстке сайтов.

Этот код также можно вставить в начало css-документа, либо же сохранить его отдельным файлом, а в новой таблице стилей сделать его вызов:

Только нужно помнить, что старые версии браузеров могут не поддерживать правило @import.

Случайные посты

  • Динамическая вставка ключевых слов в объявлениях AdWords.
  • Установка Drupal 7.
  • Главные ошибки манимейкеров.
  • Редирект в PHP.
  • Как отключить Google Translate на вашем сайте.

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

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