Сброс стилей: Сброс стилей (CSS reset)

Сброс стилей, установок, размеров блоков и элементов без CSS Reset

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

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

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

Но мне по прежнему нравится сбрасывать вещи, поэтому в течение многих лет я медленно, но уверенно переделывал сам себя в манере кодового гольфа. Я объясню все по порядку, но прежде, чем я это сделаю, вот код полностью:

/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}

/* Remove default padding */
ul[class],
ol[class] {
padding: 0;
}

/* Remove default margin */
body,
h2,
h3,
h4,
h5,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
margin: 0;
}

/* Set core body defaults */
body {
min-height: 100vh;
scroll-behavior: smooth;
text-rendering: optimizeSpeed;
line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
list-style: none;
}

/* A elements that don’t have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
max-width: 100%;
display: block;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Теперь обо всем по порядку

Мы начнем с размеров блоков. Я просто полностью сбросил для всех элементов и псевдоэлементов box-sizing: border-box.

*,
*::before,
*::after {
box-sizing: border-box;
}

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

/* Remove default padding */
ul[class],
ol[class] {
padding: 0;
}

/* Remove default margin */
body,
h2,
h3,
h4,
h5,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
margin: 0;
}

После определения размеров блоков я выполняю общий сброс margin и padding, где это устанавливается стилями браузера. Все это говорит само за себя, поэтому я не буду вдаваться в подробности.

Хотя я вернусь к этому, описывая списки. Я выбираю только списки, которые фактически имеют атрибут class, потому что, если это простой ul или ol, я хочу, чтобы они выглядели как список. Многие сбросы, включая мои предыдущие, агрессивно удаляют это.

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

Далее: стили body. Здесь все просто. Полезно, когда body заполняет все окно просмотра, даже если элемент пусто, поэтому я устанавливаю для min-height — 100vh. Мне также нравится плавная прокрутка к анкорам, поэтому я также установил scroll-behavior: smooth.

Я установил только два стиля текста. Для line-height я установил 1.5, потому что значение по умолчанию 1.2 просто недостаточно велико, чтобы получить доступный, читаемый текст. Я также задал для text-rendering — optimizeSpeed. Использование optimizeLegibility делает текст более приятным, но может привести к серьезным проблемам с производительностью, таким как 30-секундная задержка загрузки, поэтому я стараюсь избегать этого. Я иногда добавляю также это.

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

Как и в случае с полями и отступами, я сбрасываю только list-style, когда элемент списка имеет class атрибут.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

img {
max-width: 100%;
display: block;
}

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

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

Мне очень нравится этот трюк CSS, и я наконец-то набрался достаточно смелости, чтобы добавить его к сбросу. Такой селектор выбирает прямых потомков article и добавляет к ним верхнее поле в 1em. Это задает ритм потока контента. Фактически сейчас я использую утилиту .flow в каждом проекте. На самом деле, я считаю, что это мой самый используемый сегодня CSS.

input,
button,
textarea,
select {
font: inherit;
}

Еще одна вещь, которую я наконец-то набрался смелости использовать, это 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;
}
}

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

Обновление: благодаря @atomiks, это было обновлено, поэтому оно не должно нарушать события отслеживания JavaScript для animationend и transitionend.

Завершение

Вот и все, это очень небольшой сброс, который делает мою жизнь намного проще. Если вам он нравится, вы можете использовать его и сами! Вы можете найти его на GitHub или NPM.

Автор: Andy Bell

Источник: https://hankchizljaw.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

CSS3. Основы

Прямо сейчас изучите CSS3 с нуля!

Смотреть

Сброс CSS стилей, примеры работающих решений — Технический блог

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

Примеры скриптов сброса CSS стилей

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

Eric Meyer CSS Reset

Скрипт сброса от Eric Meyer, со слов самого автора, намеренно очень общий. Например в нем для элемента body не задан какой-либо цвет фона по-умолчанию. Поэтому он должен быть изменен, отредактирован, расширен и иным образом настроен в соответствии с вашими потребностями. Добавьте нужные цвета для страниц, ссылок и так далее.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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;
}

Yahoo! (YUI 3) Reset CSS

Сброс стилей CSS YUI 3 смягчает противоречивый стиль HTML-элементов браузерами, так же как и любой другой скрипт сброса CSS, чтобы создать надёжную основу для создания веб-сайтов и веб-приложений.

/*
YUI 3.18.1
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
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,
h2,
h3,
h4,
h5,
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;
}
h2,
h3,
h4,
h5,
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;
    *font-size:100%; /*to enable resizing for IE*/
}
/*because legend doesn't inherit in IE */
legend {
    color:#000;
}

/* YUI CSS Detection Stamp */
#yui3-css-stamp.cssreset { display: none; }

Сброс стилей normalize.css

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

/*! normalize.css v6.0.0 | 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
 *    IE on Windows Phone and in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h2` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h2 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

figcaption,
figure,
main { /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 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
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 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 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

/**
 * 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 style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

/**
 * 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
   ========================================================================== */

/**
 * 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;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */

/**
 * Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  margin: 0;
}

/**
 * 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;
}

/**
 * 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"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}

/**
 * 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;
}

/**
 * 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 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

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 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 {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */

details, /* 1 */
menu {
  display: block;
}

/*
 * 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;
}

/* Hidden
   ========================================================================== */

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
  display: none;
}

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

На первый взгляд это может показаться самым простым и удачным решением, зачем описывать все HTML элементы и присваивать им значения, когда можно использовать селектор *, ведь его действие распространяется на все HTML.

* {
  margin: 0;
  padding: 0;
}

Но к сожалению, это не хорошая практика. Браузеру очень тяжело (занимает много времени по сравнению с другими процедурами сброса CSS) применять правила к каждому элементу в документе, особенно на больших веб-страницах, а также может разрушить много хороших стилей по умолчанию.

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

Если вы хотите использовать один из вышеописанный методов сброса CSS стилей для сайта на WordPress, то это можно сделать двумя способами.

Первый заключается в том, что вам необходимо скопировать код сброса в начало файла style.css вашей темы WordPress (после строчек об авторстве и названии темы, то есть после текста обрамленного дробью и звездочкой /* … */.

Во втором случае код сброса нужно сохранить в отдельный файл, например reset.css, положить рядом с файлом style.css и затем подключить его, добавив нижеследующий код в начало файла style.css:

@import "reset.css";

Если в CSS есть директива @import, то она должна находиться в самом начале таблицы (перед всеми правилами). В противном случае браузер может ее проигнорировать.

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

Как видите, сброс стилей в WordPress ничем особенным не выделяется.

Благодарности

При написании статьи были использованы следующие источники:

1. http://meyerweb.com/eric/tools/css/reset/
2. https://github.com/yui/yui3/tree/master/src/cssreset/css
3. https://github.com/necolas/normalize.css
4. https://gist.github.com/marcmascort/

CSS: reset или normalize?

От автора: сайтостроение в Сети бывает похоже на строительство на зыбучих песках. Браузеры делают все то же, но время от времени у них получаются раздражающе непредсказуемые отличия. Например, у всех браузеров есть «таблицы стилей user agent» — набор стилей CSS по умолчанию, чтобы заголовок выглядел заголовком и т.д., еще до назначения вами стилей странице1. Конечно, в каждом браузерном движке наборы по умолчанию применяются немного разные.

Одним из примеров являлись стили списка по умолчанию, где изначально в браузерных таблицах стилей по умолчанию Internet Explorer’а и Opera был отступ списка margin-left: 30pt;, тогда как Firefox и KHTML шли с padding-left: 40px;. Если вам хотелось изменить отступ по умолчанию, определив ul {padding-left: 0;}, то в браузерах это приводило к очень разным результатам.

СБРОС ИСХОДНЫХ НАСТРОЕК CSS

Чтобы добиться небольшой стабильности, некоторые разработчики сбрасываю все поля и отступы с помощью универсального селектора:

* {margin: 0; padding: 0;}

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Определив отступ списка и начав с этого свою таблицу стилей, вы получите то, что ожидали. Однако применение * означало, что поле и отступ по умолчанию «грохнулись» для всех элементов и, как только вы добавляли элемент form, становилось совсем тяжко.

Тантек Челик (Tantek Celik) и Эрик Майер (Eric Meyer) начали обсуждение более точного способа адресации к различиям стилей по умолчанию в 2004г., при этом в 2006г. появился YUI CSS Reset, и Meyer Reset в 2007г.

Цель сброса состоит в том, чтобы обнулить все, что можно… [и] послужить стартовой точкой ваших собственных основных стилей — Эрик Майер (Eric Meyer)

Вот вам первое правило текущей (v2.0) версии CSS Reset Эрика:

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;
}

Он делает сброс некоторых свойств многих (но не всех) элементов до эквивалента простого текста. Так как сбрасываются только соответствующие элементы, таким образом обходятся некоторые проблемы * {margin: 0; padding: 0;}. Затем мы можем определять стили для этих сброшенных «обесстиленных» свойств, будучи уверенными в том, что строим на стабильной кроссбраузерной основе. Такое назначение стилей, кроме того, действует как сигнализатор потребности в осознанной установке подходящих стилей для этих элементов.

ПРОБЛЕМЫ СБРОСА НАСТРОЕК CSS

Сбросы CSS были настоящим спасением, но сейчас, особенно при условии возвышения каркасов-фреймов, они часто используются «как есть». Например, Эрик предполагал, что другие разработчики начнут строить сайты на предложенных им стилях сброса, соответствующим образом отменяя их, и в первую версию Meyer Reset временно включалось это правило:

/* помните о том, что нужно определить стили фокуса! */
:focus {
outline: 0;
}

К сожалению, на деле не все определяли стили фокуса, и из второй версии Эрик его удалил.

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

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

Правила сброса CSS, повторяемые по причине наследования

NORMALIZE.CSS

Николас Галлахер (Nicolas Gallagher) и Джонатан Нил (Jonathan Neal) предприняли иной подход с помощью Normalize.css, «маленького файла CSS, гарантирующего лучшую кроссбраузерную последовательность в стилях по умолчанию элементов HTML». Как и в случае со сбросами CSS, он дает нам надежную кроссбраузерную стартовую точку — в первую очередь основную причину применения сброса — но два этих подхода разнятся с философской точки зрения.

Сбросы CSS отменяют стили агента пользователя и возвращают множество элементов к их «обесстиленному» состоянию, некому ровному основанию, на котором можно безопасно строить. Однако затем нужно назначить стили большей части элементов до того, как мы сможем строить с их помощью. Вместо этого Normalize.css адресуется только к несообразностям стилей агента пользователя, выбирая самые подходящие настройки по умолчанию, в чем и заключается различие. Здесь мы тоже получаем безопасный кроссбраузерный фундамент, но такой, который включает нормализованные стили агента пользователя в качестве готовых к использованию базовых строительных материалов. В основном это нечто вроде идеализированной кроссбраузерной версии таблицы стилей по умолчанию CSS 2.1. В обоих случаях мы затем должны добавлять собственные доминирующие стили для создания изображения, но оттого, что настройки браузера по умолчанию в Normalize.css остаются, в общем приходится добавлять меньше стилей.

Так как изменения в Normalize.css более адресные, в ваших браузерных инструментах разработки отсутствует каскад наследования переписанных правил. Вот простой ul:, «обесстиленный» с помощью Meyer Reset и Normalize.css версий 1 и 2:

«Обесстиленный» элемент неупорядоченного списка

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Применяем Meyer Reset

Применяем Normalize.css v1

Applying Normalize.css v2

Явно видна разница в философии, когда пример Meyer Reset появляется как пара строк простого текста без полей, отступа или маркеров, тогда как примеры Normalize.css похожи на стили по умолчанию. Разница в стилях, примененных к этому ul, тоже легко заметна.

Однако это не все стили, примененные к ul. Для сравнения вот вам тот же самый «обесстиленный» скриншот, но с видимыми стилями агента пользователя, в Firefox 21 и Opera Next 15:

Стили агента пользователя Mozilla

Стили агента пользователя Opera

Это тот CSS, который мы сбрасываем или нормализуем.

Normalize.css версии 2 поддерживает современные браузеры плюс IE 8, тогда как версия 1, помимо того, содержит дополнительную поддержку устаревших браузеров вроде IE 6 и 7. Этим более старым браузерам требуется больше нормализации, и здесь могут сказаться незначительные недостатки – например, добавленные вертикальные поля для вложенного списка на вышеприведенном примере-скриншоте Normalize.css v1. Разделение на две версии удобно, если вам больше не требуется по высшему уровню обеспечивать поддержку старых браузеров, а также если хотите узнать все об их капризах.

Normalize.css также помогает исправить некоторые браузерные дефекты, включая «отображение настроек элементов HTML5, правку font-size предварительно форматированного текста, переполнение SVG в IE9 и множество дефектов, связанных с формами, в браузерах и операционных системах». Например, следующий CSS исправляет проблемы WebKit с помощью нового элемента HTML5 input type=»search»:

/**
* 1. Обратитесь к `appearance`, установленному на `searchfield` в Safari 5 и Chrome.
* 2. Обратитесь к `box-sizing`, установленному на `border-box` в Safari 5 и Chrome
* (включите на будущее `-moz`).
*/

input[type=»search»] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}

Без него применение по умолчанию WebKit’ом -webkit-appearance: searchfield; fortype=»search» препятствует назначению стилей шрифта, отступа, рамки и свойств фона в OS X и iOS, а также вызывает глючное поведение свойства border в Windows.

Дополнительный бонус – Normalize.css интенсивно комментируется и хорошо задокументирован, и он объясняет, почему там находится каждое из правил. Это делает его заметно длиннее, чем сбросы CSS, но будучи уменьшенным и Gzip-пированным, даже большой Normalize.css v1 весит всего 1KB.

ЗАКЛЮЧЕНИЕ

Сильно отличающийся с точки зрения философии от таких сбросов CSS, как Meyer Reset, Normalize.css во многом следует той же традиции, идя по стопам Тантека и Эрика. Возможно, вы уже используете его — он является частью ядра HTML5 Boilerplate, Bootstrap и нового Pure YUI.

Все таблицы стилей агента пользователя стремятся к одному и, надеюсь, однажды нам не придется больше делать сброс или нормализацию. Имеется даже обоснованный аргумент перестать волноваться о небольших различиях между браузерами. А пока, если вы применяете сброс CSS или совсем ничего не используете, в следующем своем проекте дайте шанс Normalize.css.

ПРИЛОЖЕНИЯ

1. Заметно, что таблицы стилей агента пользователя для Mozilla, WebKit и IE. CSS2.1 Таблица стилей по умолчанию агента пользователя выдвигают на передний план различия между (старыми) браузерами. Эти стили также включают такие штуки, как style {display: none;} — попробуйте добавить в свой CSS style {display: block;} и посмотрите, что из этого выйдет.

2. С тех пор все браузеры дошли до установки отступа списка посредством padding-left или padding-start, при этом IE7 – последний браузер IE, применяющий для этого margin-left.

3. Чтобы понять детальную подоплеку истории сбросов CSS, прочтите Историю сбросов CSS Майкла Така (Michael Tuck).

Постскриптум: Так как «грохнуть» поля и отступы всех элементов с помощью * {margin: 0; padding: 0;} весьма непросто, существует один универсальный сброс на базе селектора, о котором следует помнить:* {box-sizing: border-box;}. Он меняет отступ и рамку, которые становятся частью ширины элемента, а не дополнением к ней. Чтобы узнать об этом больше, посмотрите статью Пола Айриша (Paul Irish) box-sizing: border-box – порвите всех!.

Автор: Oli Studholme

Источник: http://the-pastry-box-project.net/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Коллекция CSS Reset – стилей (сброс стилей браузеров по умолчанию)

Использование CSS-стилей в семантической разметке (X)HTML является важным ключом к современным методам веб-дизайна. В идеальном мире каждый браузер будет интерпретировать и применять все CSS правила одинаково. Тем не менее, в несовершенном мире, в котором мы живем, наоборот, часто бывает так: многие стили CSS отображаются по-разному практически в каждом браузере.

Многие, если не все, крупные современные браузеры (например, Firefox, Opera, Internet Explorer, Netscape, и др.) применяют свои, обобщенные правила CSS, которые часто вступают в противоречие со стилями дизайнера. Другие браузеры не в состоянии выполнять должным образом различные CSS-правила, вносят беспорядок в страницы, которые выглядят совершенно в других браузерах. Хуже того, некоторые браузеры полностью игнорируют конкретные аспекты CSS вообще, полностью игнорируя широкое признание CSS атрибутов и свойств.

Излишне говорить, что для браузера, в котором реализация CSS непредсказуема, требуется найти реалистичные стратегии исправления. Не опираясь на JavaScript, мы сосредоточим наши усилия по нейтрализации правил браузера полностью на CSS. С помощью соответствующим образом подобранного определенного набора CSS “перезагрузки” правил, можно переопределить стили браузера по умолчанию и эффективно нейтрализовать его действия, что позволит нам построить наши стили CSS на единой основе.

Минималистичный Reset – версия 1

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

* { padding: 0; margin: 0; }

Минималистичный Reset – версия 2

Этот сброс идентичен предыдущему, но также учитывает все границы по умолчанию, которые эффективно нейтрализуются до нуля

* { padding: 0; margin: 0; border: 0; }

Минималистичный Reset – Версия 3

Это последняя версия “минималистичного” сброса похожа на два предыдущих, но дополнительно убивает стили по умолчанию для внешних границ элементов

* { outline: 0; padding: 0; margin: 0; border: 0; }

Сокращенный Универсальный сброс

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

* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}

Еще один сброс (набор reset-стилей)

Данный набор стилей CSS сбрасывает отступы и поля только для HTML и элементов body; гарантирует, что все размеры шрифтов сбрасываются, и устраняет границы у картинок в ссылках.

html, body {
padding: 0;
margin: 0;
}
html {
font-size: 1em;
}
body {
font-size: 100%;
}
a img, :link img, :visited img {
border: 0;
}

Siolon.s Global Reset

Chris Poteet вместе с “сотоварищи” создали этот замечательный метод. Крис рекомендует помещать стили сброса в верхней части таблицы стилей для достижения оптимальных результатов каскадирования.
Этот метод не включает сброс стилей для inline-элементов и block display. Кроме того, помните, что нужно явно указывать поля и отступы для стилей после осуществления сброса. Обратите внимание на уникальный margin-left 40px; заявление для списков и цитат, и margin 20px 0; для заголовков, форм и других элементов:

* {
vertical-align: baseline;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: none;
padding: 0;
margin: 0;
}
body {
padding: 5px;
}
h2, h3, h4, h5, h5, h6, p, pre, blockquote, form, ul, ol, dl {
margin: 20px 0;
}
li, dd, blockquote {
margin-left: 40px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

Shaun Inman.s Global Reset

Хотя нет уверенности, что Шон на самом деле написал эту подборку CSS правил (хотя, скорее всего, это он сделал), он использует этот сброс CSS для своего Helvetica / монохромного сайта. Это довольно жесткий CSS, представляющий набор правил для сброса многих критических стилей браузеров, устанавливаемых по умолчанию.

body, div, dl, dt, dd, ul, ol, li, h2, h3, h4, h5, h5, h6, pre,
form, fieldset, input, p, blockquote, table, th, td, embed, object {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img, abbr {
border: 0;
}
address, caption, cite, code, dfn, em,
h2, h3, h4, h5, h5, h6, strong, th, var {
font-weight: normal;
font-style: normal;
}
ul {
list-style: none;
}
caption, th {
text-align: left;
}
h2, h3, h4, h5, h5, h6 {
font-size: 1.0em;
}
q:before, q:after {
content: '';
}
a, ins {
text-decoration: none;
}

Yahoo CSS Reset

Люди в Yahoo! также разработали свои собственные стили сброса для браузеров. Как и в других стилях сброса Yahoo! Сброс устраняет применяемые по умолчанию стили браузеров для многих ключевых (X)HTML элементов.

body,div,dl,dt,dd,ul,ol,li,h2,h3,h4,h5,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}
h2,h3,h4,h5,h5,h6 {
font-weight: normal;
font-size: 100%;
}
q:before,q:after {
content:'';
}
abbr,acronym { border: 0;
}

Eric Meyer.s CSS Reset

Как уже говорилось в оригинальной статье CSS гуру Эрика Мейера, это универсальный набор для сброса стилей . Это мощная вещь, эффективно нейтрализующая практически каждый важный аспект применяемых по умолчанию CSS правил браузера.
Этот сброс правил имеет далеко идущие последствия, сбрасывает различные свойства CSS. Имейте это в виду при дальнейшем редактировании CSS. Если у вас возникли неожиданные, необъяснимые последствия для ваших стилей, ищите и удаляйте подозрительные аспекты этого кода (или любого добавленного сброса стилей) как возможного виновника.

html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h2, h3, h4, h5, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
background: white;
line-height: 1;
color: black;
}
ol, ul {
list-style: none;
}
/* tables still need cellspacing="0" in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
/* remove possible quote marks (") from <q> & <blockquote> */
blockquote:before, blockquote:after, q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

Сокращенный Meyer Reset

Хотя я не уверен в конкретном источнике этого сброса CSS, похоже, что он представляет собой сжатую, слегка модифицированную версию сброса Мейера. Обратите внимание на повторяющиеся объявления для атрибутов заголовков (например, h2 – h6 ).

body, div, dl, dt, dd, ul, ol, li, h2, h3, h4, h5, h5, h6,
pre, form, fieldset, input, textarea, p, blockquote, th, td {
padding: 0;
margin: 0;
}
fieldset, img {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ol, ul {
list-style: none;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-weight: normal;
font-style: normal;
}
caption, th {
text-align: left;
}
h2, h3, h4, h5, h5, h6 {
font-weight: normal;
font-size: 100%;
}
q:before, q:after {
content: '';
}
abbr, acronym {
border: 0;
}

Tantek.s CSS Reset

Названный ” undohtml.css “, CSS Reset Tantek является хорошим выбором для удаления многих самых навязчивых стилей браузера по умолчанию. Этот сброс удаляет подчеркивание у ссылок и границы для связанных изображений, устраняет отступы и поля для наиболее распространенных элементов уровня блока, а также устанавливает размер шрифта 1em для заголовков, программного кода и абзацев. В качестве дополнительного бонуса, сброс Tantek также .де-italiзирует” печально известный элемент address!

Версия с комментариями

/* 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 */
h2,h3,h4,h5,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,h2,h3,h4,h5,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... */

Версия, в которой комментарии удалены
Code
/* 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. */:link, :visited {
text-decoration: none;
}
ul, ol {
list-style: none;
}
h2, h3, h4, h5, h5, h6, pre, code, p {
font-size: 1em;
}
ul, ol, dl, li, dt, dd, h2, h3, h4, h5, h5, h6, pre,
form, body, html, p, blockquote, fieldset, input {
padding: 0;
margin: 0;
}
a img, :link img, :visited img {
border: none;
}
address {
font-style: normal;
}

The Tripoli Reset

Сброс Триполи от David Hellsing содержит полный стандарт CSS для (X)HTML-отображения. Сброс Триполи “является стабильныой, кросс-браузерной основой для веб-проектов.” После сброса CSS стилей, Триполи generic.css правила могут быть использованы для “восстановления” содержимого типографики в браузере. Некоторые из наиболее характерных особенностей сброса включают в себя:

– пробелы в коде всех тегов
– отключение

<hr>

элемента
– весь текст сбросить так, что 1em равен 10px
– целевое отключение устаревших элементов:

<marquee> , <blink> и <nobr>

– включение устаревших элементов:

<listing> , <xmp> и <plaintext>

– отключение тегов

<font>

и других устаревших элементов
.. И многое другое!

Это версия Дэвида как есть с комментариями

/*
Tripoli is a generic CSS standard for HTML rendering.
Copyright (C) 2007 David HellsingThis program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/

* { 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, h2, h3, h4, h5, 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; }

/*

CHANGELOG

23/8-07

Added deprecated tags <listing>, <xmp> and <plaintext> in the code block

Resorted to normal white-space in all code tags

Disabled the deprecated <marquee>, <blink> and <nobr> tag in some browsers

*/

Это версия без комментариев

/*
Tripoli is a generic CSS standard for HTML rendering.
Copyright (C) 2007 David HellsingThis program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/

* {
text-decoration: none;
font-size: 1em;
outline: none;
padding: 0;
margin: 0;
}
code, kbd, samp, pre, tt, var, textarea,
input, select, isindex, listing, xmp, plaintext {
white-space: normal;
font-size: 1em;
font: inherit;
}
dfn, i, cite, var, address, em {
font-style: normal;
}
th, b, strong, h2, h3, h4, h5, 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 {
vertical-align: top;
text-align: left;
}
body {
background: white;
line-height: 1;
color: black;
}
q {
quotes: "" "";
}
ul, ol, dir, menu {
list-style: none;
}
sub, sup {
vertical-align: baseline;
}
a {
color: inherit;
}
hr {
display: none;
}
font {
color: inherit !important;
font: inherit !important;
color: inherit !important; /* editor's note: necessary? */
}
marquee {
overflow: inherit !important;
-moz-binding: none;
}
blink {
text-decoration: none;
}
nobr {
white-space: normal;
}

Источник

CSS Reset — сброс стилей css (зачем нужно + типы файлов)

У каждого браузера есть свои предустановленные правила оформления веб-страниц и элементов на них (user agent stylesheet), подключаемые автоматически по умолчанию. Тем не менее, большинство верстальщиков при создании нового проекта добавляет в него специальный файл Reset CSS, который осуществляет полное обнуление CSS стилей и позволяет разработчикам творить с «чистого листа». Почему и как это все делается — разберу в текущей статье.

Если вы посмотрите на картинку-превью к посту, то увидите, что обычная строка поиска по сайту в Safari, Chrome и Firefox отображается абсолютно разным образом. Да, иногда правила в них совпадают, например, все скрывают тег head через опцию display: none!, однако во многих случаях есть серьезные различия при рендеринге объектов на странице. Подозреваю, что некоторым вашим клиентам может не понравится, когда итоговый вариант верстки выглядит не так, как на макете.

Поэтому, если вы начинающий веб-разработчик, публикация вам однозначно пригодится для общего развития. Она является переводом этой заметки с обзором состояния дел в сфере CSS Resets в 2018 году. Уверен, что в 2019 и позже все это еще будет актуально, т.к. данной теме уже исполнилось больше 10лет (с момента выхода первого подобного решения).

Зачем нужен сброс CSS настроек

Как вы уже поняли из вступления, они позволяют устранить разбежности между базовыми стилями веб-браузеров и привести их к одному плюс-минус стандартизированному виду. Применяются всегда в самом начале перед остальными пользовательскими наработками. В статье Эрика Мейера о Reset CSS десятилетней давности упоминается основная причина этого подхода, которая спустя годы до сих пор актуальна:

Проблема заключается в том, что разные браузеры имеют свои настройки по умолчанию, причем все они не одинаковые. Мы думаем, что наш код изменяет начальное оформление страницы, однако это не совсем так, и с помощью reset-файлов можем сделать этот стандартный вид документа более однообразым для всех программ. Следовательно придется меньше времени тратить на борьбу с базовыми установками Firefox, Chrome и др. по умолчанию.

Но ведь сейчас ситуация в верстке менее противоречивая?

Да, действительно, в наше время многие параметры в user agent стали более похожими. Практически везде заголовку h2 задается размер шрифта 2em и горизонтальный отступ 0.67em. Однако это все относительно новые изменения, и как минимум, нужно учитывать поддержку старых версий программ, где подобной согласованности нет.

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

Но мы ведь применяем свои стили, переопределяя базовые?

Эта один из основных тезисов противников данного подхода — в конечном итоге все равно те или иные параметры заменяются собственным style.css, так зачем добавлять еще один лишний файл и уменьшать скорость загрузки сайта? Не смотря на то, что в этой фразе есть смысл, использование ресета оправдано двумя моментами:

• Во-первых, это помогает писать более чистый код. Мы сможем разделить его на несколько частей: отдельно для самого дизайна веб-проекта и набор правил, ориентированных под специфику конкретных браузеров. Это позволить не захламлять основный CSS-файл всякими IE-хаками и т.п.
• Во-вторых, все reset’ы весят очень мало, и их загрузка не требует большого количества времени.

Типы CSS Reset (скачать можно по ссылкам в статье)

Начиная с далекого 2004, когда появились первые подобные наработки, сейчас есть достаточно много методов, отличающихся по сложности и своей специфике. По сути, существует 3 цели, которые пытается решить сброс стилей CSS:

1. Исправление ошибок в user agent stylesheet.
2. Отмена нестандартного оригинального оформления в интернет-браузерах.
3. Создание универсальной совместимой базы стилей.

Есть варианты, решающие все три задачи и те, которые заточены только под одну конкретную проблему.

Коррекция/исправление ошибок

Рассмотрим первую из целей, озвученных выше. Как вы уже поняли, ликвидация разных недочетов и косяков броузеров наиболее актуальна для поддержки устаревших релизов. Один из хороших примеров такой ситуации — когда после появления HTML5 тот же Internet Explorer 9 не применил корректный тип display к новым объектам.

Поэтому в решениях по типу Normalize.css все ошибки учтены и обработаны:

/**
 * Add the correct display in IE.
 */
main {
  display: block;
}

/**
* Add the correct display in IE.
*/
main {
display: block;
}

Поскольку эти действия нужны только для старого софта, есть смысл использовать постпроцессор PostCSS такой как PostCSS Normalize совместно с Browserlist дабы добавлять их только, когда вам требуется реализовать поддержку определенных браузеров.

Другой пример кода от Pure CSS, который подходит в том числе и к современным веб-программам — исправление display элементов и атрибутом hidden.

[hidden] {
    display: none !important; // One of the good use cases of !important
}

[hidden] {
display: none !important; // One of the good use cases of !important
}

Убираем своеобразные стили браузеров

Это вторая причина сброса настроек CSS. В принципе, у каждого свое мнение относительно того какое оформление в user-agent stylesheet считать «своеобразным». Определение автора оригинальной заметки достаточно логичное: это такой стиль, который не является «голой» версией отображения элемента. Например, добавление отступов для заголовков в 2em (как это делают многие), идея не плохая, но почему именно 2em, а не 3em или не 4em. В таком случае базовым вариантом было бы отсутствие какого-либо отступа, то есть нулевой margin.

Самый простой универсальный подход, удаляющий отступы/поля тегов:

* {
    margin: 0;
    padding: 0;
}

* {
margin: 0;
padding: 0;
}

Данный метод слишком радикальный, т.к. применяется ко всем объектам, даже тем, где вы не ожидаете (в том же input). В качестве альтернативы чаще используется Eric Meyer Reset CSS, который убирает параметры margin/padding, границы и размер шрифта (в 0 или none) там, где это логически оправдано:

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;
}

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;
}

Переопределение стилей

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

Например, вместо установки всем шрифтам размера 1em и margins = 0 в Sanitize.css задаются другие величины:

/**
 * Correct the font size and margin on `h2` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
 
h2 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
* Correct the font size and margin on `h2` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/

h2 {
font-size: 2em;
margin: 0.67em 0;
}

В Bootstrap’s Reboot найдете еще одну иллюстрацию текущей задачи. Разработчики пошли чуть дальше и прописали шрифты и цвет фона для body.

// 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
//    the `inherit` value on things like `<th>` elements.
 
body {
  margin: 0; // 1
  font-family: $font-family-base;
  font-size: $font-size-base;
  font-weight: $font-weight-base;
  line-height: $line-height-base;
  color: $body-color;
  text-align: left; // 3
  background-color: $body-bg; // 2
}

// 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
// the `inherit` value on things like `<th>` elements.

body {
margin: 0; // 1
font-family: $font-family-base;
font-size: $font-size-base;
font-weight: $font-weight-base;
line-height: $line-height-base;
color: $body-color;
text-align: left; // 3
background-color: $body-bg; // 2
}

Итого. Что же выбрать

В оригинальной заметке есть результат соответствующего опроса из твиттера среди фолловеров — какие решения по данной теме они используют чаще всего.

В итоге победил Normalize.css, который комбинирует корректировку разных ошибок веб-браузеров с заданием базовых совместимых правил. Также многие респонденты сказали, что используют собственные наработки.

Что касается мнения автора статьи (Ire Aderinokun, фронтенд и UX девелопер), то она предпочитает скачать Reset CSS Эрика Мейера и немного модифицировать его под себя. Причины тут две:

• во-первых, удобно работать с максимально пустым списком директив, постепенно добавляя свои собственные;
• во-вторых, она сторонник задания отступов в одном направлении (вниз), в то время как многие ресеты не следуют этому принципу.

P.S. Что касается меня, то во многих шаблонах я чаще всего сталкивался с решением от Normalize.css. Если вы работаете с Bootstrap, то, как понимаю, ничего дополнительно придумывать не придется, там есть свой файл сброса стилей CSS. Если честно, не особо часто приходится верстать с нуля но для общего развития мне было интересно об этом почитать. Надеюсь, вам тоже;)

типы сброса стилей и особенности их использования

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

Многие стили согласованы во всех таблицах стилей пользовательских агентов. Например, я привык думать, что элемент head не был виден из-за какой-то специальной функции, но на самом деле он скрывается, как и любой другой элемент на странице, с помощью display: none! Вы можете увидеть этот же стиль в WebKit, Chromium и Mozilla.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Много стилей, однако, являются несовместимыми между разными таблицами стилей агента пользователя. Например, посмотрите, как выглядит поле поиска в разных браузерах.

Дело за CSS Resets

Чтобы устранить несоответствия между таблицами стилей агента пользователя, были разработаны CSS Resets. CSS Resets — это набор стилей, применяемых к странице перед любыми другими пользовательскими стилями, с целью создания более стандартизированной базы.

Эрик Мейер в 2007 году написал статью о причинах необходимости CSS Resets, которая, я думаю, до сих пор остается актуальной: Основная причина заключается в том, что все браузеры имеют настройки представления по умолчанию, и для разных браузеров они все разные… Мы думаем, что наш CSS изменяет внешний вид документа по умолчанию, но с помощью «сброса» таблицы стилей мы можем сделать этот стандартный вид более единообразным для всех браузеров, и, следовательно, тратить меньше времени на борьбу с настройками браузера по умолчанию.

Хотя сегодняшняя ситуация отличается от того, что было в 2007 году, я думаю, что CSS Resets могут быть полезны.

Являются ли таблицы стилей агентов пользователя в наши дни более согласованным?

Да, многие стили по умолчанию таблиц стилей разных агентов пользователя теперь очень похожи. Например, большинство браузеров применяют к элементу одинаковый горизонтальный отступ 0.67em и одинаковый размер шрифта h2 — 2em. Однако эта согласованность является относительно новой, и нам все еще необходимо рассматривать поддержку старых браузеров, которые имеют менее согласованные стили по умолчанию.

Кроме того, в зависимости от типа сброса, который мы хотим применить (как мы увидим ниже), нам все еще может понадобиться сбросить стили, даже если мы нацелены только на современные, более согласованные браузеры.

Разве мы не применяем собственные стили для переопределения сброса в любом случае?

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

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

Во-вторых, сбросы (как правило) очень малы и должны оказывать незначительное влияние на время загрузки. Мы часто используем каскад для переопределения и изменения стилей элементов, и, хотя в некоторых случаях может возникнуть некоторая регрессия производительности, она будет незначительной.

Типы сброса CSS

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

В целом, есть три цели, которые должен реализовать CSS Reset. Некоторые таблицы стилей сброса объединяют эти три цели, тогда как другие пытаются решить только одну.

Исправить ошибки стиля агента пользователя

Отменить любую «самовольную» стилизацию агента пользователя

Создать последовательную базу стилей

Корректирующий сброс

Одной из целей сброса CSS является исправление ошибок в таблицах стилей пользовательских агентов. Как вы можете представить, это в большей мере ориентировано на старые браузеры. Хороший пример этого — когда появился HTML5, и такие браузеры, как Internet Explorer 9, не применяли корректный тип display к новым элементам.

В таких сбросах, как normalize.css, эти ошибки специально были исправлены:

/**
* Добавляет корректный display в IE.
*/

main {
display: block;
}

Поскольку эти стили применяются только к более старым браузерам, мы также можем использовать PostCSS процессор, такой как PostCSS Normalize, наряду с browserlist. Это позволяет условно добавлять эти типы стилей, только если мы поддерживаем этот конкретный браузер.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

[hidden] {
display: none !important; // Подходящий случай использования !important
}

Отмена самовольного применения стиля агентом пользователя

Еще одна цель сброса CSS состояла в том, чтобы отменить любые произвольные стили от агентов пользователя.

Есть много мнений относительно того, что такое самовольный стиль. Мое определение самовольного стиля — это все, что не является (из-за отсутствия лучшего слова) «голой» версией. Например, я хотел бы рассмотреть возможность добавления отступов в 2em для заголовков, как это делают большинство таблиц стилей агентов пользователей? Почему не 3em? Или 4em? На мой взгляд, «несамовольным» стилем был бы просто отступ 0. Хорошо, вернемся к сбросу.

Простая версия этого — “Universal Reset”, который удаляет все поля и отступы для всех элементов:

* {
margin: 0;
padding: 0;
}

Этот сброс, вероятно, слишком сложный, так как он удаляет отступы для элементов, для которых вы не ожидаете этого; таких как input. Альтернативный, более часто используемый сброс — это CSS Reset Эрика Мейера. Он сбрасывает поля, отступы, границы и размер шрифта для определенных элементов на 0 или none. И это не включает элементы, для которых вы ожидаете увидеть поля.

html, body, div, span, applet, object, iframe,
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;
}

Сбросы для обеспечения последовательных стилей

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

Например, вместо установки для всех размеров шрифта 1em или 0 для полей, сбросы этого типа устанавливают произвольный стиль.

/**
* Исправление размера шрифта и отступов для элемента `h2` внутри контекста
* `section` и `article` в Chrome, Firefox и Safari.
*/

h2 {
font-size: 2em;
margin: 0.67em 0;
}

Bootstrap’s Reboot — это еще один пример. Они идут дальше, объявляя даже семейства шрифтов и цвета фона для элемента body.

// Body
//
// 1. Удаление отступов во всех браузерах.
// 2. В качестве лучшей практики, применяют `background-color` по умолчанию.
// 3. Явно устанавливают исходное значение text-align, поэтому мы позже можем использовать
// `унаследованное` значение для таких вещей, как элементы `<th>`.

body {
margin: 0; // 1
font-family: $font-family-base;
font-size: $font-size-base;
font-weight: $font-weight-base;
line-height: $line-height-base;
color: $body-color;
text-align: left; // 3
background-color: $body-bg; // 2
}

Как мы используем CSS Resets сегодня?

Недавно я провела опрос в Твиттере, спрашивая людей, какой сброс CSS они используют в настоящее время. Большинство людей используют такие сбросы, как Normalize.css, которые представляет собой комбинацию исправления ошибок браузеров и установки согласованных стилей. Большое количество людей сообщило о своих собственных индивидуальных сбросах, которые, как правило, попадают в третью категорию.

Мое мнение

Я всегда использовала слегка измененную версию сброса CSS Эрика Мейера по двум причинам.

Во-первых, я обычно предпочитаю работать с максимально пустым списком, добавляя стили по своему усмотрению. Это просто личное предпочтение.

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

В настоящее время я гораздо больше подправляю свой файл сброса, даже добавляя утилиты, которые мне нужны, в каждом проекте, над которым я работаю, например, в классе .sr-only. Это заставляет меня думать, что это больше не сброс, а скорее «база». С появлением новых сбросов, таких как Reboot, кажется, что эта тема на сегодняшний день хорошо проработана.

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

Источник: https://bitsofco.de/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Как убрать стили браузера и зачем нужно сбрасывать CSS, файл reset.css

09.07.18 CSS 1283

Современные браузеры содержат свои базовые стили CSS для многих элементов, это можно заметить, открыв консоль разработчика и наведя на любой элемент — в консоли отобразятся его стили, даже если Вы ничего не прописывали. Помечаются они обычно надписью «user agent stylesheet». Это и есть родные стили браузера, которые он применяет к элементам. Зачем нужно их сбрасывать и всегда ли следует это делать?

CSS позволяет задать нужное оформление любой странице, без него код на HTML выглядел бы уныло. Действительно, CSS практически полностью отвечает за внешнее оформление любого тега, ведь тег – это всего лишь кирпичик, стоит убрать у него стили, от него останется нативный каркас с функциональной составляющей. Зачем браузеры добавляют свои стили к элементам HTML? Как раз по это причине. Ведь если не будут добавлены базовые стили, на них страшно будет смотреть, пусть даже Вы и разработчик, всё содержимое попросту склеится и наедет друг на друга.

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

Итак, мы разобрались для чего браузер добавляет свои стили к элементам HTML. Но иногда нужно убрать стили браузера и применить свои. Это может понадобится для создания уникального оформления элементов, создания необычного дизайна. И тут базовые стили браузера могут помешать.

Как сбросить стили браузера, а точнее удалить их? Раньше часто можно было увидеть на многих сайтах подключение файлов reset.css, в которых содержались огромные перечисления элементов HTML, для которых перечислялись сбрасывающие свойства. Эти свойства по сути просто обнуляли отступы, дизайн и т.д. Но использование файла reset.css не самый лучший вариант, так как это подключение лишнего файла, а значит и замедление скорости загрузки сайта. Но это не все, на составление таких стилей придется потратить немало времени, а потом может выясниться, что этот файл только мешает и сбивает с толку при верстке.

Поэтому, в настоящее время нет необходимости составлять отдельные файлы для сброса стилей. При разработке достаточно смотреть в консоль разработчика и обнулять нужные свойства путем переопределения стилей – нужно просто задать свое свойство CSS для тега, предыдущее будет отменено. Для некоторых базовых тегов, можно в общем файле стилей Вашего сайта сделать сброс их основных свойств. Таким образом, сброс стилей браузера будет выполняться по необходимости, за счет применения стилей сайта.

Инструменты CSS: сброс CSS

Цель сброса таблицы стилей — уменьшить несогласованность браузера в таких вещах, как высота строки по умолчанию, поля и размер шрифта заголовков и т. Д. Если вам интересно, общая причина этого обсуждалась в сообщении в мае 2007 года. Стили сброса довольно часто появляются в фреймворках CSS, и оригинальный «сброс meyerweb» нашел свое место, среди прочего, в Blueprint.

Приведенные здесь стили сброса намеренно носят общий характер. Например, для элемента body не установлен цвет или фон по умолчанию.Я не особенно рекомендую вам просто использовать это в неизменном состоянии в ваших собственных проектах. Его следует настраивать, редактировать, расширять или иным образом настраивать в соответствии с вашим конкретным базовым планом сброса. Укажите предпочтительные цвета для страницы, ссылок и т. Д.

Другими словами, это отправная точка, а не замкнутый черный ящик безразличия.

Если вы хотите использовать мои стили сброса, не стесняйтесь! Все это явно является общественным достоянием (я должен официально сказать это, иначе меня спросят о лицензировании).Вы можете получить копию файла, чтобы использовать ее и настроить так, как вам удобно. Если вы предпочитаете копировать и вставлять или просто хотите предварительно просмотреть на странице то, что вы получите, вот оно.

  / * http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   Лицензия: нет (общественное достояние)
* /

html, тело, div, диапазон, апплет, объект, iframe,
h2, h3, h4, h5, h5, h6, p, цитата, pre,
а, сокр., аббревиатура, адрес, большой, цитировать, код,
del, dfn, em, img, ins, kbd, q, s, samp,
маленький, удар, сильный, sub, sup, tt, var,
б, ю, я, центр,
dl, dt, dd, ol, ul, li,
набор полей, форма, метка, легенда,
таблица, подпись, tbody, tfoot, thead, tr, th, td,
статья, в сторону, холст, детали, вставка,
рисунок, figcaption, нижний колонтитул, заголовок, hgroup,
меню, навигация, вывод, рубин, раздел, сводка,
time, mark, audio, video {
маржа: 0;
отступ: 0;
граница: 0;
размер шрифта: 100%;
шрифт: наследовать;
вертикальное выравнивание: базовая линия;
}
/ * Сброс отображаемой роли HTML5 для старых браузеров * /
article, aside, details, figcaption, figure,
нижний колонтитул, заголовок, hgroup, меню, навигация, раздел {
дисплей: блок;
}
body {
высота строки: 1;
}
ol, ul {
стиль списка: нет;
}
blockquote, q {
цитаты: нет;
}
цитата: до, цитата: после,
q: до, q: после {
содержание: '';
содержание: нет;
}
Таблица {
граница-коллапс: коллапс;
граница-интервал: 0;
}
  

Предыдущие версии

1. v1.0 (200802)

Благодарности

Спасибо Полу Чаплину за цитату из блока / q rules.

.

Как сбросить стили вашего сайта с помощью сброса CSS

Это первая часть серии статей, в которых будут обсуждаться конкретные передовые методы или советы CSS. Я расскажу о нескольких темах, касающихся передовых методов работы с CSS, оптимизации производительности, а также советов и приемов по улучшению вашего рабочего процесса. CSS — это основа веб-страниц, поэтому важно убедиться, что он оптимизирован для SEO. Здесь вы можете проверить оптимизацию вашего сайта для SEO.

Сегодня мы рассмотрим тему сброса ваших стилей.

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

Сброс CSS позволяет избежать несоответствий в браузере

Например, предположим, что вы используете тег привязки в своем HTML-документе.Обычно браузеры, такие как Internet Explorer и Firefox, отображают его как синий и подчеркнутый .

Но через пять лет кто-то решает выпустить новый браузер (назовем его UltraBrowser ), и они решают, что им не нравятся синие подчеркнутые ссылки, поэтому вместо этого они устанавливают стиль по умолчанию теги до красный и жирный . Если вы всегда устанавливаете базовое значение для элементов , то вам гарантируется, что оно всегда будет одинаковым, независимо от того, как UltraBrowser считает, что элементы должны выглядеть.CSS управляет стилем всего, от тегов h2 до отдельных абзацев, поэтому важно оптимизировать его для разных браузеров.

Простой пример

Пример 1 : Как теги абзаца отображаются по умолчанию.

В примере 1 я разместил три абзаца без стиля

внутри контейнера

 * {
  маржа: 0;
  отступ: 0;
} 

 * {маржа: 0; отступ: 0; }
p {margin: 5px 0 10px 0; } 

 body {
  высота строки: 1;
  черный цвет;
  фон: белый;
  } 

 body {
  высота строки: 1;

  цвет: # 996633

  фон: #ccc url (your-tiled-image.gif) repeat-x вверху слева;
  } 

  * {
отступ: 0;
маржа: 0;
}  

  * {
отступ: 0;
маржа: 0;
граница: 0;
}  

  * {
контур: 0;
отступ: 0;
маржа: 0;
граница: 0;
}  

  * {
вертикальное выравнивание: базовая линия;
вес шрифта: наследовать;
семейство шрифтов: наследовать;
стиль шрифта: наследовать;
размер шрифта: 100%;
граница: 0 нет;
контур: 0;
отступ: 0;
маржа: 0;
}  

  html, body {
отступ: 0;
маржа: 0;
}
html {
размер шрифта: 1em;
}
body {
размер шрифта: 100%;
}
a img,: ссылка img,: посетил img {
граница: 0;
}  

  * {
вертикальное выравнивание: базовая линия;
семейство шрифтов: наследовать;
стиль шрифта: наследовать;
размер шрифта: 100%;
граница: нет;
отступ: 0;
маржа: 0;
}
body {
отступ: 5 пикселей;
}
h2, h3, h4, h5, h5, h6, p, pre, blockquote, form, ul, ol, dl {
маржа: 20px 0;
}
li, dd, blockquote {
маржа слева: 40 пикселей;
}
Таблица {
граница-коллапс: коллапс;
граница-интервал: 0;
}  

  тело, div, dl, dt, dd, ul, ol, li, h2, h3, h4, h5, h5, h6, pre,
form, fieldset, input, p, цитата, таблица, th, td, embed, object {
отступ: 0;
маржа: 0;
}
Таблица {
граница-коллапс: коллапс;
граница-интервал: 0;
}
fieldset, img, abbr {
граница: 0;
}
адрес, подпись, цитировать, код, dfn, em,
h2, h3, h4, h5, h5, h6, strong, th, var {
шрифт: нормальный;
стиль шрифта: нормальный;
}
ul {
стиль списка: нет;
}
caption, th {
выравнивание текста: слева;
}
h2, h3, h4, h5, h5, h6 {
размер шрифта: 1.0em;
}
q: до, q: после {
содержание: '';
}
a, ins {
текстовое оформление: нет;
}  

  body, div, dl, dt, dd, ul, ol, li, h2, h3, h4, h5, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
отступ: 0;
маржа: 0;
}
Таблица {
граница-коллапс: коллапс;
граница-интервал: 0;
}
fieldset, img {
граница: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
шрифт: нормальный;
стиль шрифта: нормальный;
}
ol, ul {
стиль списка: нет;
}
caption, th {
выравнивание текста: слева;
}
h2, h3, h4, h5, h5, h6 {
шрифт: нормальный;
размер шрифта: 100%;
}
q: до, q: после {
содержание: '';
}
abbr, акроним {граница: 0;
}  

  html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h2, h3, h4, h5, h5, h6, p, цитата, pre, a, abbr, акроним, адрес, большой, цитировать, код,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
вертикальное выравнивание: базовая линия;
семейство шрифтов: наследовать;
вес шрифта: наследовать;
стиль шрифта: наследовать;
размер шрифта: 100%;
контур: 0;
отступ: 0;
маржа: 0;
граница: 0;
}
/ * не забудьте определить стили фокуса! * /
: focus {
контур: 0;
}
body {
фон: белый;
высота строки: 1;
черный цвет;
}
ol, ul {
стиль списка: нет;
}
/ * в разметке таблиц по-прежнему требуется cellspacing = "0" * /
Таблица {
граница-коллапс: раздельный;
граница-интервал: 0;
}
caption, th, td {
шрифт: нормальный;
выравнивание текста: слева;
}
/ * удаляем возможные кавычки (") из  и 
 * /
цитата: до, цитата: после, q: до, q: после {
содержание: "";
}
blockquote, q {
цитаты: "" "";
}  

  корпус, div, dl, dt, dd, ul, ol, li, h2, h3, h4, h5, h5, h6,
pre, form, fieldset, input, textarea, p, blockquote, th, td {
отступ: 0;
маржа: 0;
}
fieldset, img {
граница: 0;
}
Таблица {
граница-коллапс: коллапс;
граница-интервал: 0;
}
ol, ul {
стиль списка: нет;
}
address, caption, cite, code, dfn, em, strong, th, var {
шрифт: нормальный;
стиль шрифта: нормальный;
}
caption, th {
выравнивание текста: слева;
}
h2, h3, h4, h5, h5, h6 {
шрифт: нормальный;
размер шрифта: 100%;
}
q: до, q: после {
содержание: '';
}
abbr, акроним {
граница: 0;
}  

  / * undohtml.css * /
/ * (CC) 2004 Тантек Челик. Некоторые права защищены. * /
/ * http://creativecommons.org/licenses/by/2.0 * /
/ * Эта таблица стилей находится под лицензией Creative Commons License. * /
/ * Цель: отменить некоторые стили по умолчанию для обычных (X) HTML-браузеров * /

/ * подчеркивание ссылок делает гипертекст менее читаемым,
   потому что подчеркивание затемняет форму нижних половин слов * /
: ссылка,: посетил {text-decoration: none}

/ * по умолчанию нет списков-маркеров, так как списки чаще используются для семантики * /
ul, ol {стиль списка: нет}

/ * избегать несовместимых размеров шрифтов заголовков по умолчанию * /
/ * и pre / code тоже * /
h2, h3, h4, h5, h5, h6, pre, code {font-size: 1em; }

/ * удаляем несовместимые (среди браузеров) по умолчанию ul, ol padding или margin * /
/ * интервал по умолчанию в заголовках не совпадает и не совпадает с
   межстрочный интервал нормальный у всех, так что давайте избавимся от него.* /
/ * обнуляем интервалы вокруг pre, form, body, html, p, blockquote * /
/ * элементы формы странно несовместимы и не совсем эмулируются в CSS. * /
/ * тем не менее удаляем их поля и отступы * /
ul, ol, li, h2, h3, h4, h5, h5, h6, pre, form, body, html, p, цитата, набор полей, ввод
{маржа: 0; заполнение: 0}

/ * кто бы мог подумать, что синие границы связанных изображений - хорошая идея? * /
img,: ссылка img,: посетил img {border: none}

/ * деактивировать адрес * /
адрес {font-style: normal}

/ * дополнительная очистка лака при необходимости... * /  

  / * undohtml.css * /
/ * (CC) 2004 Тантек Челик. Некоторые права защищены. * /
/ * http://creativecommons.org/licenses/by/2.0 * /
/ * Эта таблица стилей находится под лицензией Creative Commons License. * /

: link,: посещено {
текстовое оформление: нет;
}
ul, ol {
стиль списка: нет;
}
h2, h3, h4, h5, h5, h6, pre, code, p {
размер шрифта: 1em;
}
ul, ol, dl, li, dt, dd, h2, h3, h4, h5, h5, h6, pre,
форма, тело, html, p, цитата, набор полей, ввод {
отступ: 0;
маржа: 0;
}
a img,: ссылка img,: посетил img {
граница: нет;
}
адрес {
стиль шрифта: нормальный;
}