Сброс стилей css: Сброс CSS стилей. Reset CSS — ВебКадеми

10.07.2023 alexxlab

Содержание

Сброс CSS стилей. Reset CSS — ВебКадеми

Главная » HTML, CSS

HTML, CSS

На чтение 2 мин Просмотров 39.6к. Опубликовано 01.03.2022

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

Первый подход делать полный сброс стилей. Первым решением стал файл rest.css от mayerweb.

Второй подход, вместо полного сброса — приводить все единому виду. Первым популярным решением стал файл normalize.css от necolas.

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

За годы практики я выработал собственный вариант файла reset.css который рекомендую и использую сам. Ниже вы сможете увидеть его код. Возможно со временем он будет изменяться и правится. Но на текущем этапе это отличное решение для сброса стилей для HTML CSS верстки нового проекта.

Файл rest.css версия от ВебКадеми:

/* Reset and base styles  */
* {
	padding: 0px;
	margin: 0px;
	border: none;
}
*,
*::before,
*::after {
	box-sizing: border-box;
}
:focus,
:active {
	/*outline: none;*/
}
a:focus,
a:active {
	/* outline: none;*/
}
/* Links */
a, a:link, a:visited  {
    /* color: inherit; */
    text-decoration: none;
    /* display: inline-block; */
}
a:hover  {
    /* color: inherit; */
    text-decoration: none;
}
/* Common */
aside, nav, footer, header, section, main {
	display: block;
}
h2, h3, h4, h5, h5, h6, p {
    font-size: inherit;
	font-weight: inherit;
}
ul, ul li {
	list-style: none;
}
img {
	vertical-align: top;
}
img, svg {
	max-width: 100%;
	height: auto;
}
address {
  font-style: normal;
}
/* Form */
input, textarea, button, select {
	font-family: inherit;
    font-size: inherit;
    color: inherit;
    background-color: transparent;
}
input::-ms-clear {
	display: none;
}
button, input[type="submit"] {
    display: inline-block;
    box-shadow: none;
    background-color: transparent;
    background: none;
    cursor: pointer;
}
input:focus, input:active,
button:focus, button:active {
    outline: none;
}
button::-moz-focus-inner {
	padding: 0;
	border: 0;
}
label {
	cursor: pointer;
}
legend {
	display: block;
}

css reset. css

Оцените автора

Сброс и нормализация стилей на CSS

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

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

Сброс стилей через универсальный селектор

Распространенной практикой является отмена отступов по умолчанию. Для этого создают так называемый файл сброса стилей reset.css.

В этом файле сбрасывают все отступы в ноль, используя универсальный селектор:

* { margin: 0; padding: 0; }

Затем к HTML странице подключают сначала файл сброса, а затем уже файл с основными CSS стилями:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="reset. css"> <link rel="stylesheet" href="styles.css"> </head> <body> </body> </html>

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

Готовые библиотеки для сброса

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

html, body, div, span, applet, object, iframe, h2, h3, h4, h5, 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; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }

Подключите описанный сброс к какому-нибудь HTML файлу.

Посмотрите на внешний вид страницы по умолчанию, без ваших CSS стилей.

Нормализация стилей

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

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

Что такое сброс CSS?

Сброс CSS (или «Сброс CSS») — это короткий, часто сжатый (минимизированный) набор правил CSS, который сбрасывает стиль всех HTML-элементов до согласованного базового уровня.

Если вы не знали, у каждого браузера есть собственная таблица стилей «пользовательский агент» по умолчанию, которая используется для того, чтобы веб-сайты без стилей выглядели более разборчивыми. Например, большинство браузеров по умолчанию делают ссылки синими, а посещенные ссылки фиолетовыми, дают таблицам определенное количество границ и отступов, применяют переменные размеры шрифта к h2, h3, h4 и т. д. и определенное количество отступов почти ко всему. Вы когда-нибудь задумывались, почему кнопки «Отправить» выглядят по-разному в разных браузерах?

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

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

Простой пример: сброс CSS в сравнении с отсутствием сброса CSS

Вот первый когда-либо созданный сайт со сбросом CSS и без него:0007

Это очень простой пример, который не включает никаких списков, изображений или таблиц, но он должен помочь вам понять, что делает сброс CSS.

Зачем использовать сброс CSS?

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

Проблемы со сбросом CSS

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

 /* Сброс CSS */
#элемент {маржа:0; заполнение: 0; размер шрифта: 100%; высота строки: 1; }
...
/* правила #элемента: */
#элемент {маржа:5px 0 10px; размер шрифта: 13px; высота строки: 1,5; }

Во многих отношениях они правы — это дублирует усилия и время обработки, когда было бы достаточно одного объявления — многие разработчики и дизайнеры считают, что это нарушает принцип «СУХОЙ» (не повторяйтесь).

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

Другая проблема связана с Cascading частью «Каскадных таблиц стилей». Если ваш сброс CSS не был тщательно написан, вы можете обнаружить, что ваши правила CSS сами перезаписываются кодом, который должен был стать их базовым уровнем! Это часто является проблемой при использовании сброса универсального селектора, но обычно не будет проблемой при работе с хорошо написанным кодом, таким как сброс HTML5 Doctor CSS.

Надеемся, что эта статья помогла ответить на весь вопрос Что такое сброс CSS с небольшой ясностью… если вы все еще ломаете голову, наймите разработчиков программного обеспечения или ознакомьтесь со статьей Какой сброс CSS мне следует Использовать?

Вы также можете проверить идеальную Shopify Mysterio — многоцелевую тему магазина моды и красоты, которая содержит HTML, CSS, JSON и JavaScript.

Пожалуйста, отправьте мне сообщение, если есть что-то, что, по вашему мнению, нужно добавить в эту статью, и я буду рад добавить это с указанием авторства и обратной ссылкой!

Как сбросить/удалить стили CSS только для определенного элемента или селектора

Быстрый ответ: используйте "all:revert"

 .element {
  все: вернуться;
}

all:revert вернет все свойства стиля вашего элемента к исходным значениям свойств таблицы стилей UA по умолчанию для браузера или к тому, что задано в родительском элементе body. Но это не будет УДАЛИТЬ свойства стиля, такие как

начальные , возвращая их в полностью не стилизованное состояние.

В случае текстовых или унаследованных свойств «возврат» сбрасывает свойство CSS вашего элемента обратно к его унаследованным значениям, полученным от вашего элемента «body» или к значению стиля UA по умолчанию в браузере, а не к базовому стилю свойства. Для неунаследованного свойства он снова сбрасывает его обратно к таблице стилей браузера UA по умолчанию, а не к базовому стилю свойства. all позволяет воздействовать на все свойства. Скорее всего, это то, что вы хотите увидеть.

Проблемы с использованием "all:revert"

"all:revert" — это более новая декларация CSS, которая работает только в более современных браузерах HTML5 (после 2015 г.), и даже в этом случае имеет очень плохую поддержку в некоторых современных браузерах, таких как Internet Explorer. 1-11, Edge Trident и некоторые мобильные браузеры. Ни один из старых браузеров, отличных от HTML5 (до 2010 г.), не поймет это объявление, поэтому оно будет игнорироваться многими браузерами, как старыми, так и новыми. (См. мое смешанное решение CSS ниже, в котором есть исправления для Internet Explorer).

Проблемы с использованием "начальный" и "неустановленный"

Вы можете использовать "начальный" или "неустановленный" , но вы должны применять их вручную для каждого свойства, и что еще хуже, они не будут возвращать свойства отображаемым значениям элемента по умолчанию, установленным таблицей стилей UA по умолчанию для каждого браузера, но «начальный» по существу удалит значения свойств элемента и создаст полностью не стилизованный элемент. Например, «display: block» на элементах блочного уровня будет стерто. Поскольку свойству стиля по-прежнему требуется какое-то значение по умолчанию, все элементы блочного и неблочного уровня с «отображением» будут изменены на «отображение: встроенный», когда вы используете «отображение: инициализация». Вы не хотите когда-либо делать это, так как это полностью стирает ваши стили И стили элемента UA браузера по умолчанию из выбранного элемента.

"unset" работает почти так же, но в случае унаследованных текстовых свойств CSS его свойства наследуют все, что находится в родительских элементах над элементом (это может быть стиль UA по умолчанию браузера или что-то еще в родительском HTML выше), но для ненаследуемых свойств работает как "начальный" .

Я рекомендую ИЗБЕГАТЬ использования all:initial или любой формы initial в CSS, если только вы не пытаетесь стереть отдельное свойство CSS, которое нельзя стереть каким-либо другим способом. Почему? Initial стирает не только стили, которые вы применили, но и все стили, примененные в таблице стилей UA браузера по умолчанию. all:revert этого не сделает. Что касается использования исходного , то он лучше поддерживается в Internet Explorer, как и его двоюродный брат 9.0060 наследует . Но только IE8+ понимает начальный . Таким образом, существует широкий спектр проблем со значением этого свойства. Это ненадежно.

Причина, по которой CSS работает таким образом , заключается в том, что все элементы HTML поставляются без каких-либо стилей, пока браузер не применит таблицу стилей пользовательского агента по умолчанию, которая придает всем элементам HTML базовый стиль. Все HTML-элементы действительно не имеют НИКАКИХ СТИЛЕЙ, и, кроме «замененных» элементов, таких как текстовое поле и кнопки, выглядят одинаково до тех пор, пока не будет применен лист UA по умолчанию для каждого браузера. «initial» и «unset» сотрут большую часть этого из браузера. "revert" , по крайней мере, сохраняет свой базовый набор стилей, применяемый браузером пользователя, и поэтому превосходит "initial" и "unset" . Вы можете просмотреть все различные таблицы стилей по умолчанию, которые поставляются с браузерами, по ссылке ниже.

СПИСОК ТАБЛИЦ СТИЛЕЙ БРАУЗЕРА ПО УМОЛЧАНИЮ: https://meiert.com/en/blog/user-agent-style-sheets/

ТЕПЕРЬ ДЛЯ ЕЩЕ ЛУЧШЕГО РЕШЕНИЯ

Здесь путают две идеи:

Первая идея заключается в «возвращении» стилей обратно в набор значений таблицы стилей UA браузера (таблица стилей, которая поставляется вместе с браузером при установке и определяет, как выглядит каждый элемент). Каждый браузер определяет свои собственные стили того, как элементы должны выглядеть по умолчанию. Эта идея заключается в том, чтобы вернуть все стили страницы обратно в собственные стили элементов каждого браузера.
Вторая идея заключается в «сбросе» всех стилей браузера по умолчанию к общему внешнему виду, разделяемому всеми браузерами. Люди создают специальные листы «сброса», чтобы попытаться привести все элементы браузера к единому общему согласованному стилю. Это не имеет ничего общего со стилями UA браузеров по умолчанию и больше касается «очистки» и выравнивания всех браузеров с общим базовым стилем. Это только аддитивный процесс.

Это два совершенно разных понятия, которые здесь путают.

Поскольку у каждого браузера часто были стандартные, стандартные элементы и стили макета, которые выглядели немного по-разному, людям пришла в голову идея «сбросить» или «перезагрузить» таблицу стилей, чтобы выровнять все браузеры ПЕРЕД применением пользовательского CSS. Bootstrap теперь делает это, например. Но это не имело ничего общего с тем, что люди хотели вернуться к стандартному внешнему виду браузера.

Проблема заключалась не в создании этих пользовательских таблиц стилей «сброса», а в выяснении того, какой CSS по умолчанию был для каждого браузера и каждого элемента ДО того, как были применены какие-либо стили. Большинство обнаружило, что вы не можете перестроить существующий чистый каскад, пока не «очистите» все уже примененные стили. Но как вернуться к стилю браузера по умолчанию?

Для некоторых это означало выход за пределы возврата элементов в таблицу стилей UA браузера, которая поставляется вместе с браузером. Многие хотели вернуться к «начальным» значениям свойств, которые не имеют НИЧЕГО общего со стилем браузера по умолчанию, но на самом деле свойства по умолчанию. Это опасно, так как в случае «отображения» элементы уровня блока возвращаются к «встроенному» и ломают макеты таблиц и другие вещи.

Так что я НЕ согласен с пользователями здесь, использующими «начальный» для сброса чего-либо или настраиваемые классы сброса, которые изменяют каждое свойство обратно на какой-то произвольный базовый набор значений.

Для меня лучшим решением всегда была попытка вернуть все стили основных элементов обратно к значениям таблицы стилей UA браузера , которые все равно используют все наши конечные пользователи. Если вы создаете новый веб-сайт, вам не нужно этого делать. Вы начинаете со стилей браузера по умолчанию и стилем поверх них. Только после того, как вы добавили сторонние продукты CSS или столкнулись со сложными каскадами CSS, вы захотите выяснить, как вернуться к значениям таблицы стилей браузера по умолчанию.

По этой причине я за создание собственного листа «сброса» для сброса всех элементов к одному общему стилю, который в качестве первого шага используется всеми старыми и новыми браузерами. После этого у вас будет надежная структура, к которой гораздо проще вернуться, не возвращаясь к настройкам браузера по умолчанию. Вы просто строите общий базовый набор значений стилей элементов. Как только вы создадите свой собственный лист «сброса», который ДОБАВЛЯЕТ, а не ИЗМЕНЯЕТ стили браузера UA, у вас есть сайт, который очень легко изменить.

Единственная проблема, остающаяся тогда, это когда у вас есть сайт, на котором НЕТ такого листа сброса или есть этот сложный сторонний CSS, и вам нужно попытаться вернуться к стилям UA браузера. Как ты это делаешь?

Я понимаю, что Internet Explorer заставлял нас вручную сбрасывать каждое свойство, чтобы вернуться к любому виду сброса. Но возврат всех этих значений свойств к «начальным» полностью уничтожает значения таблицы стилей браузера UA! ПЛОХАЯ ИДЕЯ! Лучше просто использовать «all:revert» для браузеров, отличных от IE, для каждого элемента, использующего подстановочный знак, и «наследовать» только для нескольких унаследованных свойств корневого уровня, найденных в элементах «html» и «body», которые влияет на все наследуемые дочерние элементы на странице. (см. ниже). Я НЕ за эти огромные сбросы свойств с использованием «начального» или возврата к какому-то воображаемому стандарту, который, как мы предполагаем, будут использовать все браузеры или IE. Во-первых, «начальный» имеет плохую поддержку в IE и не сбрасывает значения по умолчанию для элементов, а только значения по умолчанию для свойств. Но это также бессмысленно, если вы собираетесь создать лист сброса, чтобы привести все элементы к общему стилю. В этом случае бессмысленно очищать стили и начинать заново.

Итак, вот мое простое решение, которое в большинстве случаев делает достаточно, чтобы сбросить текстовые значения, просеянные в IE из корня, и использовать «all:revert» для всех браузеров, отличных от IE, чтобы заставить неунаследованные значения вернуться к таблицу стилей UA браузера полностью, что дает вам настоящий перезапуск. Это не мешает классам и стилям более высокого уровня, наложенным поверх стилей ваших элементов, которые в любом случае всегда должны быть целью. Вот почему я НЕ за эти настраиваемые классы сброса, которые утомительны и ненужны и в любом случае не возвращают элемент в его стиль браузера UA. Обратите внимание на чуть более избирательные селекторы ниже, которые заменяют, например, значения стиля «перезагрузки» Bootstrap, возвращая их к стилям браузера по умолчанию. Конечно, они не будут сбрасывать стили элементов для IE, но для браузеров, отличных от IE, и для большинства наследуемых стилей текста это вернет элементы в большинстве агентов в таблицы стилей UA, которые поставляются с браузерами:

: корень, HTML {
 дисплей: блок;
 семейство шрифтов: наследовать;
 размер шрифта: наследовать;
 вес шрифта: наследовать;
 высота строки: наследовать;
 -webkit-text-size-adjust: наследовать;
 -webkit-tap-highlight-color: наследовать;
 все: вернуться;
 } 
 html тело {
 дисплей: блок;
 семейство шрифтов: наследовать;
 размер шрифта: наследовать;
 вес шрифта: наследовать;
 высота строки: наследовать;
 маржа: наследовать;
 заполнение: наследовать;
 цвет: наследовать;
 выравнивание текста: наследовать;
 цвет фона: наследовать;
 фон: наследовать;
 все: вернуться;
 } 
 /* Это правило пытается вручную сбросить все элементы обратно в
 Таблица стилей браузера UA с использованием «возврата» и «подстановочного знака» (*)
 который сбрасывает все свойства всех элементов HTML.