Сброс стилей (Reset.css) – это техника, применяемая в веб-разработке, чтобы установить единообразные начальные значения стилей для элементов HTML в различных веб-браузерах.
Когда браузер отображает веб-страницу, он применяет свои собственные стилевые правила по умолчанию к различным элементам HTML. Это может привести к нежелательным визуальным различиям между браузерами, так как они могут иметь разные предпочтения относительно шрифтов, отступов, полей и других стилевых свойств.
Сброс стилей (Reset.css) предназначен для создания унифицированного и непредвзятого базового стиля для элементов HTML, обнуляя или переопределяя значения стилей по умолчанию, установленные браузерами. Это позволяет разработчикам начать свою работу с чистого листа и явно определить все стилевые правила для элементов.
Однако, вместо использования сброса стилей, некоторые разработчики предпочитают нормализацию стилей (Normalize.css). В отличие от сброса стилей, нормализация стилей не полностью сбрасывает начальные значения стилей, а скорее стандартизирует их между разными браузерами, создавая более консистентный базовый стиль. Выбор между сбросом стилей и нормализацией зависит от потребностей проекта и предпочтений разработчика.
Так же существуют другие варианты сброса стилей.
Первый подход делать полный сброс стилей. Первым решением стал файл rest.css от mayerweb.
Второй подход, вместо полного сброса — приводить все единому виду. Первым популярным решением стал файл normalize.css от necolas.
Метод сброса от webcademy.
Файл rest.css версия от ВебКадеми: (обновлено 17.05.2023)
/* Reset and base styles */
* {
padding: 0px;
margin: 0px;
border: none;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Links */
a, a:link, a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
/* Common */
aside, nav, footer, header, section, main {
display: block;
}
h1, h2, h3, h4, 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;
}Reset CSS, Normalize и современные базовые стили
Полный reset удаляет почти все браузерные отступы и оформление. Это даёт предсказуемую основу, но требует заново определить стили заголовков, списков, кнопок и форм. Normalize сохраняет полезные стандарты браузера и выравнивает различия точечно.
Для большинства современных проектов достаточно небольшого базового слоя:
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; }Не удаляйте outline у элементов управления без доступной альтернативы: клавиатурный фокус должен оставаться видимым. Также осторожно сбрасывайте списки — маркеры несут смысл и помогают доступности.
Как выбрать подход
Если вы используете готовую дизайн-систему или CSS-фреймворк, сначала изучите его preflight: второй reset может вызвать неожиданные конфликты. Для legacy-проекта безопаснее добавлять точечную нормализацию и визуальные тесты, чем одномоментно менять базовые стили всего сайта.
Продолжить по теме: разработка сайта.
