Полное ( или почти полное, надеюсь) руководство по библиотекам CSS Reset
Небольшое вступление: меня заинтересовали CSS-сбросы по вполне практичной причине. Я инженер-консультант по программному обеспечению, поэтому работаю с разными клиентами и время от времени начинаю новые проекты.
В какой-то момент, после создания нескольких веб-проектов с нуля несколько раз подряд и столкнувшись с одними и теми же проблемами в разных браузерах, я выработала определенный "стиль работы", если можно так выразиться, и корректировка моего CSS-кода в разных браузерах способом "исправил - и готово" перестала меня устраивать. Тогда я решила изучить процедуру сбросов и обнаружила в них гораздо больше нюансов, чем казалось вначале.
Чем тщательнее вы подготовитесь (dev-ops, пайплайны, бандлинг заказов) к проекту заранее, тем больше времени сэкономите в долгосрочной перспективе, то есть наличие правильных начальных настроек для reset.css потенциально может сэкономить вам часы отладки вашего CSS.
Это моя попытка собрать всю возможную информацию о них и создать всеобъемлющее руководство, а также предоставить вашему вниманию некоторый обзор.
Корень проблемы
Каждый веб-проект обычно начинается с того, что дизайнер создает макет веб-страницы и передает его веб-разработчику. Я создала фейковый макет в демонстрационных целях.
.
А вот как это выглядит без стилей, просто “голый” HTML.
По мере формирования страницы вы будете добавлять стили CSS в ваш HTML. Создав весь первый раздел, проверьте его в разных браузерах, между ними вы заметите несколько небольших расхождений.
В данном примере это может показаться вам несущественным, только если вы не проверите мобильные браузеры (и особенно стили форм).
Эти мелкие несоответствия накапливаются со временем и в итоге дизайн вашего сайта выглядит непоследовательным во всех браузерах. Именно по этой причине люди используют сброс настроек: чтобы сайт выглядел одинаково в каждом браузере.
Никогда еще мы не имели так мало контроля над агентами пользователя и устройствами, на которых люди просматривают наши веб-сайты, но при этом у нас никогда еще не было так много контроля над тем, как мы можем стилизовать наши веб-сайты.
Обновление 25/09/2020:
Хорошим напоминанием об этом является проект "Веб-дизайн за 4 минуты", который иллюстрирует прогресс, достигнутый веб-дизайном за последние два десятилетия (я не говорю о креативных веб-сайтах).
Обновление 25/09/2020:
Более наглядным примером, вероятно, будет Codepen, визуализирующий “футпринт браузера”:
Что с этим делать?
Это довольно простая тема и достаточно доступная для новичков (одна из первых вещей, которые вы изучаете, когда начинаете писать CSS), тем не менее, ее очень часто упускают из виду.
Последствия игнорирования особенностей сброса могут привести к непоследовательности дизайна вашего приложения на разных платформах и браузерах, не говоря уже о том, что вы можете потерять много времени на отладку CSS.
Зачем нужен сброс CSS?
Представьте, что вы начинаете новый проект и вводите несколько HTML-тегов в файл .html. Давайте рассмотрим это на примере:
Открыв файл в браузере, вы, вероятно, увидите нестилизованный контент, который был помещен в HTML-страницу. Еще одним отличным примером этого может служить самый первый веб-сайт. Любопытно, что на нем нет ни одного CSS. Буквально. Абсолютно нет.
Почему мы видим что-то, несмотря на отсутствие стилей? Мы привыкли к этому, но обычно не задумываемся о том, как браузер отображает страницу.
В принципе, при полном отсутствии CSS вы, скорее всего, увидите пустой экран.
Если объяснить более понятно, то у каждого браузера есть стандартная таблица стилей "агента пользователя", которая по умолчанию применяется к каждой веб-странице в каждом браузере. Почему? Мы не будем углубляться в то, как работает критический путь рендеринга браузера, тем не менее, вы должны знать, что после того, как ваш браузер сделал парсинг DOM, он должен иметь по крайней мере несколько правил CSS для того, чтобы нарисовать элементы HTML на своем экране.
DOM и CSSOM составляются в единое дерево рендеринга, после чего происходит отрисовка макета.
Только после создания дерева рендеринга браузер начинает отрисовывать элементы следующим образом:
Выполните компоновку дерева рендеринга для вычисления геометрии каждого узла.
Нарисуйте отдельные узлы на экране.
При полном отсутствии CSS вы, скорее всего, увидите пустой экран. Как указано в официальной документации:
"Агент пользователя: Соответствующие агенты пользователя должны применять таблицу стилей по умолчанию (или вести себя так, как будто они ее применяют). Таблица стилей по умолчанию агента пользователя должна представлять элементы языка документа способами, которые удовлетворяют общим ожиданиям представления для данного языка (например, для визуальных браузеров элемент EM в HTML представляется с помощью курсивного шрифта). Рекомендуемая таблица стилей по умолчанию для документов HTML приведена в разделе Образец таблицы стилей для HTML.
Обратите внимание, что пользователь может изменять системные настройки (например, системные цвета), которые будут оказывать влияние на таблицу стилей по умолчанию. Однако некоторые варианты имплементации агентов пользователя делают невозможным изменение значений в таблице стилей по умолчанию. [...]
По умолчанию правила в авторских таблицах стилей имеют больший вес, чем правила в пользовательских таблицах стилей. Однако для правил "!important" приоритет меняется на противоположный. Все пользовательские и авторские правила имеют больший вес, чем правила в таблице стилей UA's (агента пользователя) по умолчанию".
Поскольку браузеры имеют встроенные таблицы стилей (нечто подобное показано ниже), они предотвращают появление пустого экрана, когда мы создаем наш HTML-код без кода CSS.
html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre { display: block; unicode-bidi: embed }
li { display: list-item }
head { display: none }
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
th { font-weight: bolder; text-align: center }
caption { text-align: center }
body { margin: 8px }
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong { font-weight: bolder }
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address { font-style: italic }
pre, tt, code,
kbd, samp { font-family: monospace }
pre { white-space: pre }
button, textarea,
input, select { display: inline-block }
big { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }
sup { vertical-align: super }
table { border-spacing: 2px; }
thead, tbody,
tfoot { vertical-align: middle }
td, th, tr { vertical-align: inherit }
s, strike, del { text-decoration: line-through }
hr { border: 1px inset }
ol, ul, dir,
menu, dd { margin-left: 40px }
ol { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
u, ins { text-decoration: underline }
br:before { content: "\A"; white-space: pre-line }
center { text-align: center }
:link, :visited { text-decoration: underline }
:focus { outline: thin dotted invert }
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }
@media print {
h1 { page-break-before: always }
h1, h2, h3,
h4, h5, h6 { page-break-after: avoid }
ul, ol, dl { page-break-before: avoid }
}Вы можете легко ознакомиться с таблицами стилей по умолчанию для всех основных браузеров или посмотреть список наиболее популярных здесь, поскольку почти все они находятся в открытом доступе.
Таблица стилей Chromium UA - Google Chrome и Opera
Таблица стилей Mozilla UA - Firefox
Таблица стилей WebKit UA - Safari
Итак, почему мы должны переопределять CSS по умолчанию?
Если вы изучили приведенные выше таблицы стилей по умолчанию для браузеров , то сразу заметили, что они немного отличаются друг от друга. Чтобы достичь кроссбраузерной согласованности, нужно переопределить стандартные таблицы стилей браузеров нашими собственными стилями по умолчанию.
Таблицы стилей браузеров по умолчанию отличаются друг от друга.
Более подробно об этом рассказывается на сайте cssreset.com:
Вы можете задаться вопросом, зачем это нужно - на самом деле все просто. На основе единообразной базы, которую вы установили с помощью сброса, вы можете переделать стиль вашего документа, зная, что различия браузеров в отображении HTML по умолчанию вас не коснутся!
Конечно, вы, вероятно, приведете контраргумент:
Некоторые утверждают, что в этом нет необходимости - не имеет смысла сбрасывать стиль элемента, чтобы потом его отменить. Если вы внимательно рассмотрите один элемент со сбросом CSS и последующей стилизацией, то суть вопроса станет ясна:
/* CSS Reset */
#element { margin:0; padding:0; font-size:100%; line-height:1; }
/* #element rules: */
#element { margin:5px 0 10px; font-size:13px; line-height:1.5; }Во многом они правы - это дублирует усилия и время обработки, когда достаточно было бы одного объявления. Многие разработчики и дизайнеры считают, что это нарушает принцип "DRY" (Don't Repeat Yourself. Не повторяйся).
Однако многочисленные преимущества этой техники перевешивают все недостатки, и не в последнюю очередь благодаря более логичному развитию: вставьте свой CSS Reset, свои базовые стили (если необходимо), а затем определите все остальное. Кроме того, приятно знать, что у вас есть все необходимое.
Поскольку каждый браузер по умолчанию отображает DOM-дерево немного по-разному, хорошей идеей будет сбросить некоторые стандартные настройки, чтобы веб-страница выглядела одинаково.
Гораздо безопаснее включить сброс CSS, чем его не включать.
Если вы используете какую-то библиотеку пользовательского интерфейса, например Bootstrap, Foundation, Materialize, тогда все в порядке: они уже включают первоначальные сбросы.
По сути, мы хотим, чтобы ваш сайт был единообразным.
Как найти и выбрать библиотеку сброса?
Многие разработчики не задумываются о том, КАКИЕ библиотеки сброса они используют в своем коде. Они просто скачивают первую попавшуюся и идут дальше. Но когда дело доходит до сброса CSS браузера, перед вами открывается множество вариантов, даже больше, чем вы думаете.
Один из пионеров метода сброса CSS, Эрик Мейер, еще в 2004 году создал таблицу стилей Reset, которая до сих пор используется на миллионах сайтов. Без сомнения, это самая популярная библиотека сброса на сегодняшний день. Большинство людей используют ее в неотредактированном виде, несмотря на рекомендацию Мейера не делать этого:
"Проблема в том, что многие просто вставляют любой старый CSS Reset без изменений. А это плохо".
Эрик Мейер, когда он впервые применил технику сброса CSS (см. "Сброс CSS" Эрика Мейера), прямо заявил, что:
"Стили сброса, приведенные здесь, намеренно очень общие. Например, нет никакого цвета или фона по умолчанию для элемента
body. Я не рекомендую использовать их в неизменном виде в своих проектах. Его следует подправить, отредактировать, расширить и иным образом настроить в соответствии с вашими конкретными исходными данными. Внесите предпочтительные цвета страницы, ссылки и т.д.".Другими словами, это отправная точка, а не самодостаточный "черный ящик" с неприкосновенностью.
Поэтому, даже если вы используете сброс, никогда не стоит "просто скачивать его", поскольку в результате вы можете получить не совсем то, что ожидаете, а некоторые старые версии сбросов могут испортить CSS вашего проекта.
Множество способов сброса CSS
Еще в 2007 году Джефф Старр собрал воедино множество различных способов сброса CSS. С тех пор кое-что изменилось и улучшилось, поэтому в данной статье я представлю вам различные библиотеки сброса от самой маленькой до самой большой, не стесняйтесь, выбирайте свою любимую. Скоро вы увидите, что истина заключается в следующем
Все CSS-сбросы самоуверенны.
Как оказалось, этот факт уже был отмечен Крисом Койером в его статье CSS-Tricks. Для того чтобы вы могли убедиться в этом, я создала небольшую демонстрацию (по ссылке ниже), основанную на идее Дэниела Бокса:
CodePen Embed - Reset.css Test
Вариант 1: Сброс универсального селектора '*'
URL: https://cssreset.com/scripts/universal-selector-css-reset/
Это самый простой и лаконичный способ выполнить сброс.
* {
margin: 0;
padding: 0;
}или еще немного более "причудливая" версия этого:
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}В случае, если вы не хотите включать никакие сбросы вообще, все равно не помешает сбросить поля и отступы. Это сэкономит вам много усилий по подстройке CSS в дальнейшем.
NB: Сброс контуров включать не следует, стили фокуса не удаляются, а только заменяются (для сохранения их доступности).
Вариант 2: Tantek Celik`s undohtml.css
URL: https://cssreset.com/scripts/undohtml-css-tantek-celik/
Относительно минимальный сброс с несколькими улучшениями по сравнению со сбросом универсального селектора '*'.
Единственный файл, который мне удалось найти, датирован 2004 годом, но с точки зрения HTML с тех пор мало что изменилось. Этот документ сделает самый обычный сброс для вашего приложения, особенно для псевдоклассов (:link,:visited). Интересно, что он не сбрасывает поля и отступы для тегов <div>.
/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved. */
/* http://creativecommons.org/licenses/by/2.0 */
/* This style sheet is licensed under a Creative Commons License. */
/* Purpose: undo some of the default styling of common (X)HTML browsers */
/* link underlines tend to make hypertext less readable,
because underlines obscure the shapes of the lower halves of words */
:link,:visited { text-decoration: none; }
/* no list-markers by default, since lists are used more often for semantics */
ul,ol { list-style: none; }
/* avoid browser default inconsistent heading font-sizes */
/* and pre/code too */
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
/* remove the inconsistent (among browsers) default ul,ol padding or margin */
/* the default spacing on headings does not match nor align with
normal interline spacing at all, so let's get rid of it. */
/* zero out the spacing around pre, form, body, html, p, blockquote as well */
/* form elements are oddly inconsistent, and not quite CSS emulatable. */
/* nonetheless strip their margin and padding as well */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }
/* whoever thought blue linked image borders were a good idea? */
a img,:link img,:visited img { border:none }
/* de-italicize address */
address { font-style:normal }
/* more varnish stripping as necessary... */Теперь тот же сброс без комментариев:
:link,:visited {
text-decoration: none;
}
ul, ol {
list-style: none;
}
h1,h2,h3,h4,h5,h6,pre,code {
font-size: 1em;
}
ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,body,html,p,blockquote,
form,fieldset,input {
margin:0;
padding:0;
}
a img,
:link img,
:visited img {
border:none;
}
address {
font-style: normal;
}Вариант 3: MiniReset.css
URL: https://jgthms.com/minireset.css/
Еще одно расширение предыдущей библиотеки. Одна из замечательных вещей, которую здесь используют - border-box. Похоже, что эта библиотека хорошо поддерживается на Github:
/*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */
html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
}
h1,h2,h3,h4,h5,h6 {
font-size: 100%;
font-weight: normal;
}
ul {
list-style: none;
}
button,input,select,textarea {
margin: 0;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
img,embed,iframe,object,audio,video {
height: auto;
max-width: 100%;
}
iframe {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,th {
padding: 0;
text-align: left;
}Я бы рекомендовала использовать это в вашем коде для минималистичного сброса стилей.
Вариант 4: Сброс CSS Эрика Мейера
Здесь мы добрались до самого популярного, пожалуй, reset.css в фронтенде - сброса Эрика Мейера. Как мы уже обсуждали ранее, даже сам Эрик настоятельно рекомендует обыгрывать и корректировать сброс в соответствии с вашими потребностями.
Некоторые теги в представленном сбросе устарели, однако одна из причин его популярности заключается в том, что люди привыкли к нему, и в конечном итоге он выполняет свою работу достаточно неплохо. Я бы все-таки рекомендовал держаться подальше от библиотек, использующих старые теги, зачем они вообще нужны?
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
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;
}
/* 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;
}Вариант 5: HTML5 Doctor CSS Reset
URL: http://html5doctor.com/html-5-reset-stylesheet/
Основанная на Reset CSS Эрика Мейера, таблица стилей HTML5 Reset от HTML5Doctor.com призвана обеспечить основу для любых веб-сайтов, использующих новые атрибуты HTML 5, улучшая при этом некоторые области, а также удаляя поддержку устаревших элементов HTML 4.
Как описано здесь, он основан на печально известном Reset CSS. Данная библиотека практически встроена поверх библиотеки Reset и имеет некоторые улучшения, такие как
1. Улучшения в тегах (старые теги удалены и добавлены новые):
2. Новые дополнения: внимание к тегам <a> и <input>
NB: Остерегайтесь того, что он включает в себя некоторые самоуверенные цвета, которые вы, возможно, захотите изменить в своей собственной версии!
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display: block;
}
nav ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align: baseline;
background: transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}Вариант 6: Yahoo Reset CSS
URL: https://cssreset.com/scripts/yahoo-css-reset-yui-3/
YUI 3 CSS Reset был написан как сброс для Yahoo! YUI 3 - это библиотека JavaScript / CSS нового поколения, написанная коллективно Yahoo! Developer Network, которая также обеспечивает работу домашней страницы Yahoo! Этот сброс является довольно общим и, насколько мне известно, широко не используется в качестве библиотеки сброса в проектах.
/**
* YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/)
* https://cssreset.com/
* Copyright 2012 Yahoo! Inc. All rights reserved.
* http://yuilibrary.com/license/
*/
/*
TODO will need to remove settings on HTML since we can't namespace it.
TODO with the prefix, should I group by selector or property for weight savings?
*/
html{
color:#000;
background:#FFF;
}
/*
TODO remove settings on BODY since we can't namespace it.
*/
/*
TODO test putting a class on HEAD.
- Fails on FF.
*/
body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
pre, code,
form, fieldset, legend, input, textarea,
p, blockquote,
th, td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,
img {
border:0;
}
/*
TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit…
*/
address, caption, cite, code, dfn, em, strong, th, var {
font-style:normal;
font-weight:normal;
}
ol, ul {
list-style:none;
}
caption, th {
text-align:left;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
q:before,
q:after {
content:'';
}
abbr, acronym {
border:0;
font-variant:normal;
}
/* to preserve line-height and selector appearance */
sup {
vertical-align:text-top;
}
sub {
vertical-align:text-bottom;
}
input, textarea, select {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
}
/*to enable resizing for IE*/
input, textarea, select {
*font-size:100%;
}
/*because legend doesn't inherit in IE */
legend {
color:#000;
}
/* YUI CSS Detection Stamp */
#yui3-css-stamp.cssreset { display: none; }Вариант 7: Tripoli CSS Reset
URL: https://cssreset.com/scripts/tripoli-css-reset-david-hellsing/
Сброс Tripoli упоминался еще в 2007 году. Это более ориентированная на шрифты библиотека. Она ничего не наследует, а скорее стоит на своих собственных принципах. Хотя некоторые теги (<blink>, <nobr>) в ней устарели, в целом она предоставляет хорошие возможности сброса. Настройка шрифтов на определенное значение может быть очень полезной. Однако использование !important - плохая идея. Этот метод кажется устаревшим, но все еще применим.
* {
margin: 0;
padding: 0;
text-decoration: none;
font-size: 1em;
outline: none;
}
code, kbd, samp, pre, tt, var, textarea, input, select, isindex, listing, xmp, plaintext {
font: inherit;
font-size: 1em;
white-space: normal;
}
dfn, i, cite, var, address, em {
font-style: normal;
}
th, b, strong, h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet, table {
border: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td, center {
text-align: left;
vertical-align: top;
}
body {
line-height: 1;
background: white;
color: black;
}
q {
quotes: "" "";
}
ul, ol, dir, menu {
list-style: none;
}
sub, sup {
vertical-align: baseline;
}
a {
color: inherit;
}
hr {
display: none;
} /* we don't need a visual hr in layout */
font {
color: inherit !important;
font: inherit !important;
color: inherit !important;
} /* disables some nasty font attributes in standard browsers */
marquee {
overflow: inherit !important;
-moz-binding: none;
}
blink {
text-decoration: none;
}
nobr {
white-space: normal;
}Вариант 8: Normalize.css
URL: http://nicolasgallagher.com/about-normalize-css/
Современная альтернатива сбросам CSS. ...используется в Twitter, TweetDeck, GitHub, Soundcloud, Guardian, Medium, GOV.UK, Bootstrap, HTML5 Boilerplate и многих других.
Многие пытаются противопоставить друг другу Reset CSS Эрика Мейера и Normalize.css, но на самом деле Normalize.css - это просто другой тип сброса.
По сравнению со сбросами, которые создают так называемые значения "по умолчанию" для всего (все текстовые раги - 16 px, все внешние отступы (margins) - 0), Normalize.css использует другое направление - следовать спецификациям и обеспечивать соответствие всех тегов им.
Он скорее следит за тем, чтобы элементы выглядели единообразно в разных браузерах. Отсюда и все эти конкретные цифры. Кроме того, одна из замечательных сторон заключается в том, что специалисты по сопровождению действительно заботятся о том, чтобы следить за всеми несоответствиями браузеров, даже с префиксами браузера. Приятным моментом является то, что эта библиотека хорошо поддерживается и обновляется.
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}Если ваша цель - не отключить все стили браузера, а сделать так, чтобы материал выглядел одинаково в каждом браузере, это хороший вариант!
Вариант 9: Sanitize.css
URL: https://csstools.github.io/sanitize.css/
sanitize.css- это проект Джонатана Нила, созданный на основеnormalize.css;
normalize.css- проект Джонатана Нила, созданный в соавторстве с Николасом Галлахером.
Джонатан, разочарованный тем, что не нашел именно то, что ему было нужно, создал библиотеку на основе Normalize.css с некоторыми улучшениями. Вот сравнение с Normalize слева и Sanitize справа.
Эта библиотека очень хорошо поддерживается, и я рекомендую обратить на нее внимание.
/*! sanitize.css v8.0.0 | CC0 License | github.com/csstools/sanitize.css */
/* Document
* ========================================================================== */
/**
* 1. Remove repeating backgrounds in all browsers (opinionated).
* 2. Add border box sizing in all browsers (opinionated).
*/
*,
::before,
::after {
background-repeat: no-repeat; /* 1 */
box-sizing: border-box; /* 2 */
}
/**
* 1. Add text decoration inheritance in all browsers (opinionated).
* 2. Add vertical alignment inheritance in all browsers (opinionated).
*/
::before,
::after {
text-decoration: inherit; /* 1 */
vertical-align: inherit; /* 2 */
}
/**
* 1. Use the default cursor in all browsers (opinionated).
* 2. Use the default user interface font in all browsers (opinionated).
* 3. Correct the line height in all browsers.
* 4. Use a 4-space tab width in all browsers (opinionated).
* 5. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
* 6. Breaks words to prevent overflow in all browsers (opinionated).
*/
html {
cursor: default; /* 1 */
font-family:
system-ui,
/* macOS 10.11-10.12 */ -apple-system,
/* Windows 6+ */ Segoe UI,
/* Android 4+ */ Roboto,
/* Ubuntu 10.10+ */ Ubuntu,
/* Gnome 3+ */ Cantarell,
/* KDE Plasma 5+ */ Noto Sans,
/* fallback */ sans-serif,
/* macOS emoji */ "Apple Color Emoji",
/* Windows emoji */ "Segoe UI Emoji",
/* Windows emoji */ "Segoe UI Symbol",
/* Linux emoji */ "Noto Color Emoji"; /* 2 */
line-height: 1.15; /* 3 */
-moz-tab-size: 4; /* 4 */
tab-size: 4; /* 4 */
-ms-text-size-adjust: 100%; /* 5 */
-webkit-text-size-adjust: 100%; /* 5 */
word-break: break-word; /* 6 */
}
/* Sections
* ========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
* ========================================================================== */
/**
* 1. Add the correct sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* Add the correct display in IE.
*/
main {
display: block;
}
/**
* Remove the list style on navigation lists in all browsers (opinionated).
*/
nav ol,
nav ul {
list-style: none;
}
/**
* 1. Use the default monospace user interface font
* in all browsers (opinionated).
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family:
/* macOS 10.10+ */ Menlo,
/* Windows 6+ */ Consolas,
/* Android 4+ */ Roboto Mono,
/* Ubuntu 10.10+ */ Ubuntu Monospace,
/* KDE Plasma 5+ */ Noto Mono,
/* KDE Plasma 4+ */ Oxygen Mono,
/* Linux/OpenOffice fallback */ Liberation Mono,
/* fallback */ monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
* ========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* Add the correct text decoration in Edge, IE, Opera, and Safari.
*/
abbr[title] {
text-decoration: underline;
text-decoration: underline dotted;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Use the default monospace user interface font
* in all browsers (opinionated).
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family:
/* macOS 10.10+ */ Menlo,
/* Windows 6+ */ Consolas,
/* Android 4+ */ Roboto Mono,
/* Ubuntu 10.10+ */ Ubuntu Monospace,
/* KDE Plasma 5+ */ Noto Mono,
/* KDE Plasma 4+ */ Oxygen Mono,
/* Linux/OpenOffice fallback */ Liberation Mono,
/* fallback */ monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
* Remove the text shadow on text selections in Firefox 61- (opinionated).
* 1. Restore the coloring undone by defining the text shadow
* in all browsers (opinionated).
*/
::-moz-selection {
background-color: #b3d4fc; /* 1 */
color: #000; /* 1 */
text-shadow: none;
}
::selection {
background-color: #b3d4fc; /* 1 */
color: #000; /* 1 */
text-shadow: none;
}
/* Embedded content
* ========================================================================== */
/*
* Change the alignment on media elements in all browers (opinionated).
*/
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
/**
* Add the correct display in IE 9-.
*/
audio,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
/**
* Change the fill color to match the text color in all browsers (opinionated).
*/
svg:not([fill]) {
fill: currentColor;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Tabular data
* ========================================================================== */
/**
* Collapse border spacing in all browsers (opinionated).
*/
table {
border-collapse: collapse;
}
/* Forms
* ========================================================================== */
/**
* Inherit styling in all browsers (opinionated).
*/
button,
input,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
/**
* Remove the margin in Safari.
*/
button,
input,
select {
margin: 0;
}
/**
* 1. Show the overflow in IE.
* 2. Remove the inheritance of text transform in Edge, Firefox, and IE.
*/
button {
overflow: visible; /* 1 */
text-transform: none; /* 2 */
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* Show the overflow in Edge and IE.
*/
input {
overflow: visible;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
*/
legend {
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
white-space: normal; /* 1 */
}
/**
* 1. Add the correct display in Edge and IE.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Remove the inheritance of text transform in Firefox.
*/
select {
text-transform: none;
}
/**
* 1. Remove the margin in Firefox and Safari.
* 2. Remove the default vertical scrollbar in IE.
* 3. Change the resize direction on textareas in all browsers (opinionated).
*/
textarea {
margin: 0; /* 1 */
overflow: auto; /* 2 */
resize: vertical; /* 3 */
}
/**
* Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
padding: 0;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/**
* Correct the text style of placeholders in Chrome, Edge, and Safari.
*/
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/**
* Remove the inner border and padding of focus outlines in Firefox.
*/
::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus outline styles unset by the previous rule in Firefox.
*/
:-moz-focusring {
outline: 1px dotted ButtonText;
}
/* Interactive
* ========================================================================== */
/*
* Add the correct display in Edge and IE.
*/
details {
display: block;
}
/*
* Add the correct styles in Edge, IE, and Safari.
*/
dialog {
background-color: white;
border: solid;
color: black;
display: block;
height: -moz-fit-content;
height: -webkit-fit-content;
height: fit-content;
left: 0;
margin: auto;
padding: 1em;
position: absolute;
right: 0;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
}
dialog:not([open]) {
display: none;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Scripting
* ========================================================================== */
/**
* Add the correct display in IE 9-.
*/
canvas {
display: inline-block;
}
/**
* Add the correct display in IE.
*/
template {
display: none;
}
/* User interaction
* ========================================================================== */
/*
* 1. Remove the tapping delay in IE 10.
* 2. Remove the tapping delay on clickable elements
in all browsers (opinionated).
*/
a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
-ms-touch-action: manipulation; /* 1 */
touch-action: manipulation; /* 2 */
}
/**
* Add the correct display in IE 10-.
*/
[hidden] {
display: none;
}
/* Accessibility
* ========================================================================== */
/**
* Change the cursor on busy elements in all browsers (opinionated).
*/
[aria-busy="true"] {
cursor: progress;
}
/*
* Change the cursor on control elements in all browsers (opinionated).
*/
[aria-controls] {
cursor: pointer;
}
/*
* Change the cursor on disabled, not-editable, or otherwise
* inoperable elements in all browsers (opinionated).
*/
[aria-disabled="true"],
[disabled] {
cursor: not-allowed;
}
/*
* Change the display on visually hidden accessible elements
* in all browsers (opinionated).
*/
[aria-hidden="false"][hidden]:not(:focus) {
clip: rect(0, 0, 0, 0);
display: inherit;
position: absolute;
}Вариант 10: Reboot.css
URL: https://raw.githubusercontent.com/twbs/bootstrap/v4-dev/dist/css/bootstrap-reboot.css
Еще одна мощная библиотека сброса, основанная на Normalize.css. Bootstrap использует ее для сброса стилей браузера по умолчанию и придания веб-страницам единообразного вида. Вот сравнение Normalize и Reboot (слева и справа соответственно):
Reboot.css, без сомнения, является одной из самых полезных библиотек, и данная статья содержит много ценных сведений о том, почему это так.
/*
Reboot
Normalization of HTML elements, manually forked from Normalize.css to remove styles targeting irrelevant browsers while applying new styles.
Normalize is licensed MIT. https://github.com/necolas/normalize.css
* Bootstrap v4.0.0-beta (https://getbootstrap.com)
* Copyright 2011-2017 The Bootstrap Authors
* Copyright 2011-2017 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
/*
Document
1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
2. Change the default font family in all browsers.
3. Correct the line height in all browsers.
4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so we force a non-overlapping, non-auto-hiding scrollbar to counteract.
6. Change the default tap highlight to be completely transparent in iOS.
*/
*,
*::before,
*::after {
box-sizing: border-box; /* 1 */
}
html {
font-family: sans-serif; /* 2 */
line-height: 1.15; /* 3 */
-webkit-text-size-adjust: 100%; /* 4 */
-ms-text-size-adjust: 100%; /* 4 */
-ms-overflow-style: scrollbar; /* 5 */
-webkit-tap-highlight-color: transparent; /* 6 */
}
/* IE10+ doesn't honor `<meta name="viewport">` in some cases. */
@-ms-viewport {
width: device-width;
}
/* stylelint-disable selector-list-comma-newline-after
Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers) */
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
display: block;
}
/*
Body
1. Remove the margin in all browsers.
2. As a best practice, apply a default `background-color`.
3. Set an explicit initial text-align value so that we can later use the `inherit` value on things like `<th>` elements.
*/
body {
margin: 0; /* 1 */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1rem;
font-weight: normal;
line-height: 1.5;
color: #212529;
text-align: left; /* 3 */
background-color: #fff; /* 2 */
}
/*
Suppress the focus outline on elements that cannot be accessed via keyboard.
This prevents an unwanted focus outline from appearing around elements that might still respond to pointer events.
Credit: https://github.com/suitcss/base
*/
[tabindex="-1"]:focus {
outline: none !important;
}
/*
Content grouping
1. Add the correct box sizing in Firefox.
2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/*
Typography
*/
/*
Remove top margins from headings
By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top margin for easier control within type scales as it avoids margin collapsing.
*/
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: .5rem;
}
/*
Reset margins on paragraphs
Similarly, the top margin on `<p>`s get reset. However, we also reset the bottom margin to use `rem` units instead of `em`.
*/
p {
margin-top: 0;
margin-bottom: 1rem;
}
/*
Abbreviations
1. Remove the bottom border in Firefox 39-.
2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
3. Add explicit cursor to indicate changed behavior.
4. Duplicate behavior to the data-* attribute for our tooltip plugin
*/
abbr[title],
abbr[data-original-title] { /* 4 */
text-decoration: underline; /* 2 */
-webkit-text-decoration: underline dotted; /* 2 */
text-decoration: underline dotted; /* 2 */
cursor: help; /* 3 */
border-bottom: 0; /* 1 */
}
address {
margin-bottom: 1rem;
font-style: normal;
line-height: inherit;
}
ol,
ul,
dl {
margin-top: 0;
margin-bottom: 1rem;
}
ol ol,
ul ul,
ol ul,
ul ol {
margin-bottom: 0;
}
dt {
font-weight: bold;
}
dd {
margin-bottom: .5rem;
margin-left: 0; /* Undo browser default */
}
blockquote {
margin: 0 0 1rem;
}
dfn {
font-style: italic; /* Add the correct font style in Android 4.3- */
}
b,
strong {
font-weight: bolder; /* Add the correct font weight in Chrome, Edge, and Safari */
}
small {
font-size: 80%; /* Add the correct font size in all browsers */
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sub {
bottom: -.25em;
}
sup {
top: -.5em;
}
/*
Links
*/
a {
color: #007bff;
text-decoration: none;
background-color: transparent; /* Remove the gray background on active links in IE 10. */
-webkit-text-decoration-skip: objects; /* Remove gaps in links underline in iOS 8+ and Safari 8+. */
}
a:hover {
color: #0056b3;
text-decoration: underline;
}
/*
And undo these styles for placeholder links/named anchors (without href) which have not been made explicitly keyboard-focusable (without tabindex). It would be more straightforward to just use a[href] in previous block, but that causes specificity issues in many other styles that are too complex to fix.
See https://github.com/twbs/bootstrap/issues/19402
*/
a:not([href]):not([tabindex]) {
color: inherit;
text-decoration: none;
}
a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
color: inherit;
text-decoration: none;
}
a:not([href]):not([tabindex]):focus {
outline: 0;
}
/*
Code
*/
pre,
code,
kbd,
samp {
font-family: monospace, monospace; /* Correct the inheritance and scaling of font size in all browsers. */
font-size: 1em; /* Correct the odd `em` font sizing in all browsers. */
}
pre {
/* Remove browser default top margin */
margin-top: 0;
/* Reset browser default of `1em` to use `rem`s */
margin-bottom: 1rem;
/* Don't allow content to break outside */
overflow: auto;
/* We have @viewport set which causes scrollbars to overlap content in IE11 and Edge, so we force a non-overlapping, non-auto-hiding scrollbar to counteract. */
-ms-overflow-style: scrollbar;
}
/*
Figures
*/
figure {
/* Apply a consistent margin strategy (matches our type styles). */
margin: 0 0 1rem;
}
/*
Images and content
*/
img {
vertical-align: middle;
border-style: none; /* Remove the border on images inside links in IE 10-. */
}
svg:not(:root) {
overflow: hidden; /* Hide the overflow in IE */
}
/*
Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11 DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present. However, they DO support removing the click delay via `touch-action: manipulation`.
See:
* https://getbootstrap.com/docs/4.0/content/reboot/#click-delay-optimization-for-touch
* https://caniuse.com/#feat=css-touch-action
* https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
*/
a,
area,
button,
[role="button"],
input:not([type=range]),
label,
select,
summary,
textarea {
-ms-touch-action: manipulation;
touch-action: manipulation;
}
/*
Tables
*/
table {
border-collapse: collapse; /* Prevent double borders */
}
caption {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
color: #868e96;
text-align: left;
caption-side: bottom;
}
th {
/* Matches default `<td>` alignment by inheriting from the `<body>`, or the closest parent with a set `text-align`. */
text-align: inherit;
}
/*
Forms
*/
label {
/* Allow labels to use `margin` for spacing. */
display: inline-block;
margin-bottom: .5rem;
}
/*
Remove the default `border-radius` that macOS Chrome adds.
Details at https://github.com/twbs/bootstrap/issues/24093
*/
button {
border-radius: 0;
}
/*
Work around a Firefox/IE bug where the transparent `button` background results in a loss of the default `button` focus styles.
Credit: https://github.com/suitcss/base/
*/
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
input,
button,
select,
optgroup,
textarea {
margin: 0; /* Remove the margin in Firefox and Safari */
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button,
input {
overflow: visible; /* Show the overflow in Edge */
}
button,
select {
text-transform: none; /* Remove the inheritance of text transform in Firefox */
}
/*
1. Prevent a WebKit bug where (2) destroys native `audio` and `video` controls in Android 4.
2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/*
Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
padding: 0;
border-style: none;
}
input[type="radio"],
input[type="checkbox"] {
box-sizing: border-box; /* 1. Add the correct box sizing in IE 10- */
padding: 0; /* 2. Remove the padding in IE 10- */
}
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
/*
Remove the default appearance of temporal inputs to avoid a Mobile Safari bug where setting a custom line-height prevents text from being vertically centered within the input.
See https://bugs.webkit.org/show_bug.cgi?id=139848
and https://github.com/twbs/bootstrap/issues/11266
*/
-webkit-appearance: listbox;
}
textarea {
overflow: auto; /* Remove the default vertical scrollbar in IE. */
/* Textareas should really only resize vertically so they don't break their (horizontal) containers. */
resize: vertical;
}
fieldset {
/*
Browsers set a default `min-width: min-content;` on fieldsets, unlike e.g. `<div>`s, which have `min-width: 0;` by default. So we reset that to ensure fieldsets behave more like a standard block element.
See https://github.com/twbs/bootstrap/issues/12359
and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
*/
min-width: 0;
/* Reset the default outline behavior of fieldsets so they don't affect page layout. */
padding: 0;
margin: 0;
border: 0;
}
/*
1. Correct the text wrapping in Edge and IE.
2. Correct the color inheritance from `fieldset` elements in IE.
*/
legend {
display: block;
width: 100%;
max-width: 100%; /* 1 */
padding: 0;
margin-bottom: .5rem;
font-size: 1.5rem;
line-height: inherit;
color: inherit; /* 2 */
white-space: normal; /* 1 */
}
progress {
vertical-align: baseline; /* Add the correct vertical alignment in Chrome, Firefox, and Opera. */
}
/*
Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
/*
This overrides the extra rounded corners on search inputs in iOS so that our `.form-control` class can properly style them. Note that this cannot simply be added to `.form-control` as it's not specific enough.
For details, see https://github.com/twbs/bootstrap/issues/11586.
*/
outline-offset: -2px;
-webkit-appearance: none;
}
/*
Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
font: inherit;
-webkit-appearance: button;
}
/*
Correct element displays
*/
output {
display: inline-block;
}
summary {
display: list-item; /* Add the correct display in all browsers */
}
template {
display: none; /* Add the correct display in IE */
}
/*
Always hide an element with the `hidden` HTML attribute (from PureCSS).
Needed for proper display in IE 10-.
*/
[hidden] {
display: none !important;
}Если вы хотите узнать больше, я настоятельно рекомендую прочитать следующие статьи:
Вариант 11: Destyle Reset
URL: https://nicolas-cusan.github.io/destyle.css/?utm_campaign=destyle.css-a-clean-slate-for-writing-c
Когда речь заходит о сбросе стилей в коде, я всегда поступал следующим образом: использовал Sanitize.css и включал поверх него html5doctor . Таким образом я убеждался, что мои стили были одновременно "исправлены" и "сброшены" в моем css, но теперь это делает Destyle. Согласно собственным заявлениям, это
Самоуверенная таблица стилей сброса, которая обеспечивает чистый лист для стилизации вашего html.
У него достаточно неплохая документация, с которой вы можете ознакомиться здесь.
/*! destyle.css v1.0.11 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model
========================================================================== */
* {
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
* 3. Remove gray overlay on links for iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-webkit-tap-highlight-color: transparent; /* 3*/
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/* Vertical rhythm
========================================================================== */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
margin: 0;
}
/* Headings
========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
line-height: inherit;
font-weight: inherit;
margin: 0;
}
/* Lists (enumeration)
========================================================================== */
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
/* Lists (definition)
========================================================================== */
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
border: 0;
border-top: 1px solid;
margin: 0;
clear: both;
color: inherit;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: inherit; /* 2 */
}
address {
font-style: inherit;
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
text-decoration: none;
color: inherit;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: inherit; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
vertical-align: bottom;
}
embed,
object,
iframe {
border: 0;
vertical-align: bottom;
}
/* Forms
========================================================================== */
/**
* Reset form fields to make them styleable
* 1. Reset radio and checkbox to preserve their look in iOS.
*/
button,
input,
optgroup,
select,
textarea {
-webkit-appearance: none;
appearance: none;
vertical-align: middle;
color: inherit;
font: inherit;
border: 0;
background: transparent;
padding: 0;
margin: 0;
outline: 0;
border-radius: 0;
text-align: inherit;
}
[type='checkbox'] {
/* 1 */
-webkit-appearance: checkbox;
appearance: checkbox;
}
[type='radio'] {
/* 1 */
-webkit-appearance: radio;
appearance: radio;
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
/* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
button[disabled],
[type='button'][disabled],
[type='reset'][disabled],
[type='submit'][disabled] {
cursor: default;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Reset to invisible
*/
fieldset {
margin: 0;
padding: 0;
border: 0;
min-width: 0;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Remove the padding in IE 10.
*/
[type='checkbox'],
[type='radio'] {
padding: 0; /* 1 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the outline style in Safari.
*/
[type='search'] {
outline-offset: -2px; /* 1 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type='search']::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/**
* Clickable labels
*/
label[for] {
cursor: pointer;
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Table
========================================================================== */
table {
border-collapse: collapse;
border-spacing: 0;
}
caption {
text-align: left;
}
td,
th {
vertical-align: top;
}
th {
text-align: left;
font-weight: bold;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}Вариант 12: CSS remedy
URL: https://github.com/mozdevs/cssremedy
Данный вариант еще не доработан, но я уверен, что это не помешает людям использовать его! CSS Remedy утверждает, что использует другой подход:
CSS Remedy устанавливает свойства или значения CSS такими, какими они были бы, если бы CSSWG создавала CSS сегодня, с нуля, и не беспокоилась об обратной совместимости.
Я бы, наверное, посоветовал критически оценить документацию и, может быть, частично включить ее в свой собственный сброс CSS в проекте.
/* Global Remedies
******************/
/* Use border-box by default, globally */
*, ::before, ::after { box-sizing: border-box; }
/*
* Consistent line spacing...
* CSS Inline Layout Module Level 3: https://drafts.csswg.org/css-inline-3/#line-sizing-property
*/
html { line-sizing: normal; }
/* Remove the tiny space around the edge of the page */
body { margin: 0; }
/* Headings
***********/
/* Switch to rem units for headings */
/* @@@ Initial values are based on existing browser defaults */
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.17rem; }
h4 { font-size: 1.00rem; }
h5 { font-size: 0.83rem; }
h6 { font-size: 0.67rem; }
/* Keep h1 margins consistent, even when nested */
h1 { margin: 0.67em 0; }
/* Typography
*************/
/* Overflow by default is bad */
pre { white-space: pre-wrap; }
/*
* 1. Solid, thin horizontal rules
* 2. Remove Firefox `color: gray`
* 3. Remove default `1px` height, and common `overflow: hidden`
*/
hr {
border-style: solid;
border-width: 1px 0 0;
color: inherit;
height: 0;
overflow: visible;
}
/* Embedded Elements
********************/
/*
* 1. Block display is usually what we want
* 2. Remove strange space-below when inline
* 3. Responsive by default
*/
img, svg, video, canvas, audio, iframe, embed, object {
display: block;
vertical-align: middle;
max-width: 100%;
}
/*
* Maintain intrinsic aspect ratios when `max-width` is applied
* (iframe, embed, and object have no intrinsic ratio, set height explicitly)
*/
img, svg, video, canvas {
height: auto;
}
/*
* There is no good reason elements default to 300px,
* and audio files are unlikely to come with a width attribute
*/
audio { width: 100%; }
/* Old Browsers
***************/
/* Remove the border on images inside links in IE 10 and earlier */
img { border-style: none; }
/* Hide the overflow in IE 10 and earlier */
svg { overflow: hidden; }
/* Default block display on HTML5 elements */
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
display: block;
}
/*
* 1. Add the correct box sizing in IE 10
* 2. Remove the padding in IE 10
*/
[type='checkbox'],
[type='radio'] {
box-sizing: border-box;
padding: 0;
}Специализированные сбросы
Конечно, есть некоторые сбросы, которые направлены на достижение конкретной цели, например, сброс формы: https://formalize.me/ Он решает проблему полей формы, когда они в разных местах работают непредсказуемым образом.
Более экзотическим сбросом является Vanilla CSS Un-reset. Технически это не сброс, а скорее таблица стилей, которая переопределяет общие правила CSS после того, как они были стерты сбросом. Он предназначен для работы в тандеме с reset.css.
"Vanilla предназначена для вставки в вашу таблицу стилей CSS, а затем корректируется и настраивается по мере необходимости. Она задумана как базовая таблица стилей, которую можно использовать, чтобы не начинать каждый раз сначала".
Это напоминает мне о Normalize.css, однако является самостоятельным решением. Хотя я не замечал, чтобы люди использовали его, так что отнеситесь к этому с долей скептицизма.
Написание собственного сброса
В качестве альтернативы вы можете написать свой собственный пользовательский сброс CSS. Существует множество примеров, некоторые из них объясняются довольно подробно, и я рекомендую вам ознакомиться с ними:
Один из них - статья @IreAderinokun, где она описывает свой подход к стилизации сброса.
Другая статья от Хельмута Вандля, где он показал свой подход к написанию сброса в минималистическом стиле.
Еще одна статья, которую я нашла, была опубликована на habr.com на русском языке, однако на самом деле вам не потребуется знание языка - код достаточно понятен.
Единственное, что я действительно рекомендую при написании собственного сброса: проверьте, какие свойства критичны в плане доступности (контур, :focus), и убедитесь, что вы не удаляете их, а заменяете. Существует много ресурсов, которые можно найти, например, здесь и здесь. И помните, что все сбросы являются самоуверенными.
Теперь, когда нам все известно, что мы будем с этим делать?
Одну вещь надо запомнить и учесть: Reset и Normalize.css - это не drop-in, их нужно интегрировать в ваш css-код в начале написания CSS приложения, а не постфактум.
Добавляя их после, вы рискуете нарушить некоторые из существующих стилей и получить проблемы с выравниванием макета. Лично я использую Sanitize.css в тандеме с html5doctos (именно в таком порядке). Сначала я нормализую все, а затем сбрасываю остальное. Конечно, Destyle также является хорошим вариантом.
Сбрасывать или не сбрасывать? Вот в чем вопрос.
Я видела много статей, в которых подробно объяснялось, зачем нужен сброс CSS, а также много статей против его использования. Вот одна из них. А вот еще одна.
Вы должны быть своим собственным техническим руководителем и сами решать, как вы хотите организовать свой CSS. Это моя попытка объяснить, к чему все это привело и почему я являюсь большим сторонником CSS.
. . .
Наконец, я хотела бы призвать вас поделиться в комментариях информацией, которую вы нашли о сбросах CSS, - возможно, я что-то упустила. Я буду очень рада получить ваши отзывы!
Мы публикуем данную статью в преддверии старта курса HTML/ CSS. Cтатья была написана преподавателем OTUS - Маргаритой Образцовой и ранее публиковалась тут.