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

20.10.2018 alexxlab

Содержание

Сброс 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 ничем особенным не выделяется.

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

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

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

Сброс стилей с помощью CSS Reset / Хабр

Данная статья — первая из цикла на тему укрощения CSS. Сегодня мы рассмотрим технологию CSS Reset.

Зачем это нужно?

Каждый браузер устанавливает свои значения стилей по умолчанию для различных HTML-элементов. С помощью CSS Reset мы можем нивелировать эту разницу для обеспечения кроссбраузерности стилей.

Например, вы используете элемент a в вашем документе. Большинство браузеров, как Internet Explorer и Firefox, добавляют ссылке синий цвет и подчёркивание. Однако представьте, что через пять лет кто-то решил создать новый браузер (назовём его UltraBrowser). Разработчикам браузера не нравился синий цвет и раздражало подчёркивание, поэтому они решили выделять ссылки красным цветом и полужирным шрифтом. Именно исходя из этого, если вы установите базовое значение стилей для элемента a, то он гарантированно будет таким, каким вы хотите его видеть, а не как предпочитают его отображать разработчики UltraBrowser.

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

Пример 1: отображение элемента p по умолчанию.

В первом примере я поместил 3 параграфа (p) без установленных стилей внутрь элемента div, которому я выставил синий фон и оранжевую границу.

По умолчанию, вы увидите, что в Firefox между верхней границей контейнера div и верхней границей первого параграфа существует промежуток. Аналогичная ситуация и с нижней границей контейнера. Однако, в Internet Explorer мы уже не видим тех промежутков, которые наблюдали в Firefox.

Так какой браузер всё же прав? На самом деле, это не имеет значения. Что действительно важно, так это совершенно различное отображение отступов в разных браузерах, если мы не используем собственные стили для их задания.

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

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

Как всё начиналось?

CSS Reset впервые был применён в далёком 2004 году (ещё динозавры по сети бродили) Эндрю Креспанисом (Andrew Krespanis). В своей статье он советовал использовать универсальный селектор (*) в начале CSS-файла, чтобы задать всем элементам нулевые отступы (margin и padding).

* 
{
  margin: 0;
  padding: 0;
}

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

Но теперь у нас вообще нет никаких отступов, в том числе между отдельными параграфами! Что делать? Не врать и не бояться: ниже нашего сброса мы опишем нужное нам правило. Сделать это можно разными способами: указать отступ снизу или сверху параграфа, указать его в процентах, пикселях или в em.

Самое главное, браузер теперь играет по нашим правилам, а не мы по его. Я решил сделать подобным образом:

* { margin: 0; padding: 0; }
p { margin: 5px 0 10px 0; }

В итоге у нас получилось то, что можно увидеть в третьем примере.

Вскоре после этого, CSS-гуру Эрик Мейер (Eric Meyer) производит дальнейшие исследования вышеописанного приёма сброса отступов. В них он затрагивает работу Тантека Челика и его набор CSS-правил undohtml.css, в котором не только сбрасывались отступы, но и устанавливались базовые значения других атрибутов: стили шрифтов, стили списков.

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

Разумеется, существуют и другие подобные решения (YUI Reset CSS от Yahoo!). Вы можете создать собственное, которое будет удовлетворять нуждам именно вашей вёрстки.

Применение CSS Reset

Давайте остановимся на некоторых моментах использования приёма в реальном мире.

1. Определите, как именно вы будете сбрасывать стили

Выше я указал два способа сброса стилей: простой, основанный на применении универсального селектора (который я не рекомендую использовать) и комплексный, с применением стилей от Эрика.

Помимо этого, вы можете использовать разработку от Yahoo! (YUI CSS Reset), которую вы можете забирать прямо с их сервера.

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

Чтобы помочь вам правильно сделать выбор, приведу ещё пару ссылок:

A Killer Collection of Global CSS Reset Styles;
Less is more — my choice of Reset CSS (Эд Эллиот).

2. Ваш CSS Reset — это первое, что должен увидеть браузер

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

Да, я понимаю, это прозвучало смешно, но это одна из основных ошибок разработчиков от мала до велика. Многие просто об этом забывают.

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

Давайте не будем сильно отходить от темы и продолжим. Применим стили Эрика Мейера к нашему примеру, но после описания наших свойств, как показано в 4 примере. Математики бы сказали следующее: «Что и требовалось доказать».

3. Используйте отдельный CSS-документ для CSS Reset

Я должен (нет, меня отнюдь не вынудили) упомянуть этот совет. Использование отдельного файла для CSS Reset — это обычная практика, которую поддерживает большое число разработчиков.

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

4. Старайтесь избегать использование универсального селектора

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

Данный совет особенно важен тогда, когда вы разрабатываете такие решения, как темы для CMS. Вы не можете заранее предсказать, как она будет использована и как её будут модифицировать. Лучше описать фундаментальные CSS-правила для всех элементов, чем использовать для этого непредсказуемый (пусть и меньший по объёму) механизм универсальных селекторов.

5. Избегайте избыточных описаний свойств при использовании CSS Reset

Ещё одна причина, по которой мне не нравится отдельный файл для CSS Reset — это потенциальная избыточность последующих деклараций CSS-свойств. Повторение отдельных ваших стилей среди всего набора CSS-файлов — это моветон и его следует избегать. Разумеется, иногда мы слишком ленивы, чтобы кропотливо пройтись по набору стилей и совместить некоторые из них, но следует хотя бы попытаться!

Вернёмся к CSS Reset от Эрика. Он устанавливает значения по умолчанию для line-height, color и background элемента body следующим образом:

body 
{
  line-height: 1;
  color: black;
  background: white;
}

Допустим вы уже знаете, как будет выглядеть элемент body:

background-color: #cccccc;
color: #996633;
Вы хотите по горизонтали повторять определённую фоновую картинку.

В этом случае нет необходимости создавать новый селектор для описания ваших свойств — вы можете их просто включить в CSS Reset. Сделаем это:

body 
{
  line-height: 1;

  color: #996633;
  background:#ccc url(tiled-image.gif) repeat-x top left;
}

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

Эрик Мейер по этому поводу сказал следующее: «это не тот случай, когда всем следует использовать CSS Reset без изменений».

Дополнительные материалы

[WSG] Zeroing default padding/margin

Возможно, первое упоминание сброса отступов с помощью универсального селектора в рассылке WSG.

Universal Selector

Эрик Мейерс изучает механизм работы универсального селектора.

No CSS Reset

Джонатан Снук (Johnathan Snook) приводит альтернативную точку зрения на CSS Reset и объясняет, почему избегает их. Мнение одного из уважаемых Web-разработчиков.

Tripoli — a CSS standard for HTML rendering

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

Нормальный сброс / Блог компании HTML Academy / Хабр

Расскажите про ресеты и нормалайзы, что лучше использовать?

Знаете, это как отвёртка и молоток — что лучше? Все хороши.

HTML хорош тем, что вы набросали тегов и всё — они сразу выглядят. И во всех браузерах всё примерно одинаково: чёрным Таймсом по белому <body>, да с синими ссылками. Эх, красота! Но в том и дело, что почти: точные стили для всех элементов хоть и рекомендованы сегодня в HTML5, но в каждом браузере свои.

В HTML 4 было всего 78 строк стилей по умолчанию, вроде head { display: none } или text-decoration: underline для ссылок. В WebKit, Chrome и Firefox сегодня около 1000 строк стилей, в которые смело можно снаряжать археологическую экспедицию. Но мы не будем, у нас и так дел хватает.

Разработчикам долго не мешало это примерное соответствие стилей, к тому же браузеры старались их изредка улучшать и унифицировать. Проблема была в другом: все эти отступы, рамки, подчёркивания всегда не по дизайну и приходится их снова и снова отменять для каждого элемента. Но потом кто-то придумал ластик, первый сброс стилей.

* {
  margin: 0;
  padding: 0;
  border: 0;
  joffrey: kill;
  cersei: kill;
  frey: kill;
}

Звёздочка выбирает все элементы, а дальше начинается: margin: 0, padding: 0, border: 0, джоффри, серсея, фрей и все остальные свойства, которые мешают вам жить. Способ довольно варварский: не только потому, что выбирает элементы, которым ничего не нужно сбрасывать, но и потому, что некоторые стили лучше не трогать, иначе всё развалится — например, элементы форм.

/* ORLY? */

div, span {
  margin: 0;
  padding: 0;
  border: 0;
}

Следующей попыткой сделать из HTML стерильный набор кубиков, стал CSS Reset из Yahoo UI, который сбрасывал стили только там, где это было нужно. Ещё большую популярность получил Reset CSS Эрика Мейера, сделанный по мотивам Yahoo UI. Эти ресеты не только сбрасывали отступы, но и приводили к единому значению размер и семейство шрифта, выравнивание для текста и другие свойства.

/* YUI Reset */

html {
  color: #000;
  background: #FFF;
}
select {
  *font-size:100%;
}

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

Эти ресеты никогда не были чистыми сбросами браузерных стилей: нет-нет, да назначались цвета, выравнивание, начиналась борьба за кроссбраузерность. В итоге все проекты несли печать предпочтений конкретных авторов. Самым нейтральным из ресетов до сих пор остаётся Reset CSS Мейера, но даже он убрал вредный :focus { outline: 0 } — и правильно сделал.

/* Не забыть вернуть обводку */

:focus {
  outline: 0;
}

/* Забыл */

Многих ресеты раздражали: для внутренних блоков с содержимым приходилось восстанавливать стили не только для списков, но и базовых текстовых элементов вроде <strong>, <em>, «` и других. У Yahoo даже был CSS Base, который назначал правильные базовые стили. После ресета, который отменял неправильные. Почему бы и нет.

Николас Галлахер и Джонатан Нил зашли с другой стороны: вместо того, чтобы сбрасывать примерно одинаковые браузерные умолчания, они подробно изучили все различия и проблемы — и сделали Normalize.css. Он делает везде одинаково и решает много проблем по пути.

С Normalize вам снова приходится убирать отступы со списков. Многих это провоцирует использовать элементы попроще, но будьте внимательны — это чревато диватозом. Зато Normalize берёт на себя сложности оформления элементов форм, поведение мобильных браузеров и много мелких багов.

Видите? Совсем другую задачу решает проект. Я на днях видел сайт, на котором после Normalize.css подключают Reset CSS, чтобы оставить нормализацию, но при этом получить нейтральный конструктор. Это конечно глупости, которые приводят к распуханию глобальных стилей. Уж лучше собрать свой гибрид — кода там всего ничего.

@import "normalize.css";
@import "reset.css";
@import "yui-reset.css";
@import "yui-base.css";
@import "h5bp.css";

Благо Normalize.css дотошно документирован: у каждого свойства стоит объяснение зачем оно нужно. В сомнительных местах, которые не нормализуют, а назначают более подходящие (по мнению авторов) умолчания — стоят пометки. Это помогает не просто слепо копировать его из проекта в проект, а использовать только нужные части.

Представьте, что вы в рамках проекта делаете модуль, который потом будет использоваться на другом сайте. У вас есть Normalize, а у них? Или наоборот: на ваш проект приходит сторонний модуль — а там нет Normalize и всё подогнано под браузерные баги, ну или особенности. Или даже есть Normalize, но другой версии. Так себе модульность получается.

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

Reset CSS не обновлялся с 2011 года, хотя до сих пор отлично работает. Но его эпоха уже прошла — на смену спешит новое свойство all со значением unset. Оно сбрасывает браузерные умолчания, где это нужно — почитайте на MDN. Normalize.css сейчас в моде и хорошо решает проблемы кроссбраузерности, но попробуйте использовать его как справочник. Ну так Reset или Normalize? Танцуйте от задачи.

/* Welcome to the */

.future {
  all: initial;
  all: inherit;
  all: unset;
}

Видеоверсия

Вопросы можно задавать здесь.

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

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

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

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

/* Указываем box sizing */ *, *::before, *::after { box-sizing: border-box; } /* Убираем внутренние отступы */ ul[class], ol[class] { padding: 0; } /* Убираем внешние отступы */ body, h2, h3, h4, h5, p, ul[class], ol[class], li, figure, figcaption, blockquote, dl, dd { margin: 0; } /* Выставляем основные настройки по-умолчанию для body */ body { min-height: 100vh; scroll-behavior: smooth; text-rendering: optimizeSpeed; line-height: 1.5; } /* Удаляем стандартную стилизацию для всех ul и il, у которых есть атрибут class*/ ul[class], ol[class] { list-style: none; } /* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */ a:not([class]) { text-decoration-skip-ink: auto; } /* Упрощаем работу с изображениями */ img { max-width: 100%; display: block; } /* Указываем понятную периодичность в потоке данных у article*/ article > * + * { margin-top: 1em; } /* Наследуем шрифты для инпутов и кнопок */ input, button, textarea, select { font: inherit; } /* Удаляем все анимации и переходы для людей, которые предпочитай их не использовать */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }

/* Указываем box sizing */

*::before,

*::after {

box-sizing: border-box;

}

/* Убираем внутренние отступы */

ul[class],

ol[class] {

padding: 0;

}

/* Убираем внешние отступы */

body,

h2,

h3,

h4,

h5,

ul[class],

ol[class],

li,

figure,

figcaption,

blockquote,

dl,

dd {

margin: 0;

}

/* Выставляем основные настройки по-умолчанию для body */

body {

min-height: 100vh;

scroll-behavior: smooth;

text-rendering: optimizeSpeed;

line-height: 1.5;

}

/* Удаляем стандартную стилизацию для всех ul и il, у которых есть атрибут class*/

ul[class],

ol[class] {

list-style: none;

}

/* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */

a:not([class]) {

text-decoration-skip-ink: auto;

}

/* Упрощаем работу с изображениями */

img {

max-width: 100%;

display: block;

}

/* Указываем понятную периодичность в потоке данных у article*/

article > * + * {

margin-top: 1em;

}

/* Наследуем шрифты для инпутов и кнопок */

input,

button,

textarea,

select {

font: inherit;

}

/* Удаляем все анимации и переходы для людей, которые предпочитай их не использовать */

@media (prefers-reduced-motion: reduce) {

* {

animation-duration: 0.01ms !important;

animation-iteration-count: 1 !important;

transition-duration: 0.01ms !important;

scroll-behavior: auto !important;

}

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

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

*::before,

*::after {

box-sizing: border-box;

}

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

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

/* Убираем внутренние отступы */

ul[class],

ol[class] {

padding: 0;

}

/* Убираем внешние отступы */

body,

h2,

h3,

h4,

h5,

ul[class],

ol[class],

li,

figure,

figcaption,

blockquote,

dl,

dd {

margin: 0;

}

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

Но хотя, я упомяну ситуацию со списками. Тут я выбрал только те списки, у которых есть атрибут class, так как если я буду использовать чистый <ul> или <ol>, то я хочу, чтобы он выглядел реально как список. Тут главное не переусердствовать, охватив всё, как в предыдущем моменте, что удалит все отступы.

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

body {

min-height: 100vh;

scroll-behavior: smooth;

text-rendering: optimizeSpeed;

line-height: 1.5;

}

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

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

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

ul[class],

ol[class] {

list-style: none;

}

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

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

a:not([class]) {

text-decoration-skip-ink: auto;

}

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

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

img {

max-width: 100%;

display: block;

}

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

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

article > * + * {

margin-top: 1em;

}

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

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

input,

button,

textarea,

select {

font: inherit;

}

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

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

@media (prefers-reduced-motion: reduce) {

* {

animation-duration: 0.01ms !important;

animation-iteration-count: 1 !important;

transition-duration: 0.01ms !important;

scroll-behavior: auto !important;

}

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

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

`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:

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

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

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

Рассмотрим первую из целей, озвученных выше. Как вы уже поняли, ликвидация разных недочетов и косяков броузеров наиболее актуальна для поддержки устаревших релизов. Один из хороших примеров такой ситуации — когда после появления 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: 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;}

* {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;
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 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;
 }
/* помните о том, что нужно определить стили фокуса! */
  :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;
 }
/**
   * 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
Источник: //the-pastry-box-project.net/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
 Узнать подробнееPSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
 Смотреть Инструменты 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,
a, abbr, акроним, адрес, большой, цитировать, код,
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;
}
  
 Предыдущие версии 
 v1.0 (200802)
 Благодарности 
 Спасибо Полу Чаплину за цитату из блока  / q  rules.
 Сброс CSS 
 Возможно, этот пост должен быть первым из первых, потому что он о том, как начать свой CSS. Опять же, вы должны понимать, что именно вы делаете, так что я не слишком поздно с этим.
  Сброс в коде представляет собой короткий набор правил, сбрасывающих стили всех элементов до согласованного базового уровня.Это необходимо, потому что стиль в разных браузерах не согласован. Вам не нужно что-то вроде предварительной укладки, например. table, чтобы возиться с вами, когда вы находитесь. 
 Практика 
 Когда я начинал с CSS, мне говорили, что в начале всегда нужно писать:
  * {
    маржа: 0;
    отступ: 0;
 }
  
 Это был базовый сброс CSS.
  Некоторые из наиболее распространенных элементов, стилизованных по-разному в разных браузерах, — это гиперссылки (), изображения (), заголовки (от
 до) и поля для различных элементов.Это общеизвестный факт, что браузеры добавляют определенное количество отступов почти ко всему. 
 Пример различного стиля кнопки оформления заказа в браузерах:
 Пример различных стилей различных элементов (заголовок, ссылка, диапазон, код, цитата):
 Каждый браузер имеет форматирование HTML по умолчанию, и вы можете увидеть его в  «Таблице стилей пользовательского агента»  в режиме проверки. Если стиль добавлен для конкретного элемента, его форматирование браузера по умолчанию перезаписывается.
 Сценарии сброса
 Мой любимый скрипт сброса CSS — один из http://html5doctor.com:
  html, body, div, span, object, iframe, h2, h3, h4, h5, 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 {
     маржа: 0;
     отступ: 0;
     граница: 0;
     контур: 0;
     размер шрифта: 100%;
     вертикальное выравнивание: базовая линия;
     фон: прозрачный;
 }
 
 body {
     высота строки: 1;
 }
 
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
     дисплей: блок;
 }
 
 nav ul {
    стиль списка: нет;
 }
 
 blockquote, q {
    цитаты: нет;
 }
 
 цитата: до, цитата: после, q: до, q: после {
    содержание: '';
    содержание: нет;
 }
 
 a {
    маржа: 0;
    отступ: 0;
    размер шрифта: 100%;
    вертикальное выравнивание: базовая линия;
    фон: прозрачный;
 }
 
 / * меняем цвета в соответствии с вашими потребностями * /
 ins {
    цвет фона: # ff9;
    цвет: # 000;
    текстовое оформление: нет;
 }
 
 / * меняем цвета в соответствии с вашими потребностями * /
 отметка {
    цвет фона: # ff9;
    цвет: # 000;
    стиль шрифта: курсив;
    font-weight: жирный;
 }
 
 del {
    оформление текста: сквозное;
 }
 
 abbr [название], dfn [название] {
    нижняя граница: 1px с точками;
    курсор: справка;
 }
 
 стол {
    граница-коллапс: коллапс;
    граница-интервал: 0;
 }
 
 / * изменяем цвет границы в соответствии с вашими потребностями * /
 hr {
    дисплей: блок;
    высота: 1 пикс;
    граница: 0;
    верхняя граница: сплошной 1px #cccccc;
    маржа: 1em 0;
    отступ: 0;
 }
 
 input, выберите {
    вертикальное выравнивание: средний;
 }
   Некоторые из определенных стилей являются довольно стандартными (для  и для
), некоторые добавлены для облегчения доступа (для  и ), а некоторые добавлены дополнительно (
).
 Есть список других сценариев сброса, которые вы можете использовать:
 Вместо сброса CSS некоторые разработчики используют  CSS normalize  (а некоторые называют его «новым сбросом»). В то время как сброс используется для уничтожения всего и превращения вашего проекта в «tabula rasa», normalize сохраняет передовой опыт, нейтрализуя противоречивость стиля кроссбраузерности. Я обязательно напишу о нормализации CSS в будущем. А пока проверьте этот пост.
 Заключение 
 Нет необходимости сбрасывать CSS, но нужно помнить о предварительной стилизации браузеров и существовании сброса CSS.
  Чтобы двигаться дальше о том, что делать после добавления сброса в CSS, подпишитесь на нашу рассылку. 
 Дисплей: содержимое не является сбросом CSS 
  1 мая 2018 г. ; 0 комментариев Сброс CSS — это набор стилей CSS, которые отменяют стиль браузера по умолчанию для многих или большинства элементов HTML.
 Недавно я видел случаи, когда разработчики использовали  display: contents  в списках и заголовках для удаления полей и отступов, и, как правило, для  визуально  делало то, что может сделать сброс CSS.По сути, они используют  display: contents  как быстрый и грязный сброс CSS.
 Это опасно для доступности.
 Я объясняю почему в следующих разделах этого поста, потому что, если бы мне пришлось исследовать это, чтобы быть уверенным, вы, черт возьми, должны его прочитать.
 Что такое дисплей: содержимое? 
 Это может помочь идентифицировать , о чем мы говорим. Вы можете пропустить эту часть, если вы уже знакомы (это продолжается немного).
 От разработчиков 
 В своей простейшей форме  display: contents  существует для визуального удаления блока элемента и замены его содержимым. По сути, он обрабатывает элемент так, как если бы открывающий и закрывающий теги элемента были удалены, а контент остался на странице открытым.
 Это может иметь значение при применении к странице 
  -soup, для которой вы хотите использовать сетку CSS или гибкость.Возможно, вы унаследовали страницу Bootstrap с ее реками   сек и хотите постепенно улучшать ее для использования сетки CSS.
 Ире Адеринокун дает общий обзор в своем посте  Как отображать: содержимое; Работает , хотя браузеры не совсем то, что она утверждает.
 Хидде де Фрис также объясняет это в своем посте  Более доступная разметка с отображением: содержимое . Его пост, однако, смотрит на это не совсем так, как я видел  display: содержимое  в игре.
 согласно W3C 
 Спецификация CSS 3 также предоставляет руководство:
 Сам элемент не генерирует никаких блоков, но его дочерние элементы и псевдоэлементы по-прежнему генерируют блоки, и текст работает как обычно. В целях создания блока и макета элемент должен рассматриваться так, как если бы он был заменен в дереве элементов своим содержимым (включая его дочерние элементы исходного документа и его псевдоэлементы, такие как  :: before  и ). :: after  псевдоэлементов, которые генерируются до / после дочерних элементов элемента как обычно).
 Примечание. Поскольку затрагивается только дерево блоков, никакая семантика, основанная на дереве документа, например сопоставление селекторов, обработка событий и наследование свойств, не затрагивается.
 Это значение ведет себя как  display: none  для замененных элементов и других элементов, отображение которых не полностью контролируется CSS; подробности см. в Приложении B: Эффекты отображения: содержание необычных элементов.
  CSS Display Module Level 3 — W3C Working Draft, 20 апреля 2018 г .: 2.5. Генерация боксов: ключевые слова none и contents 
 Возможно, более интересным является сборник частных случаев:
  
 
   
  <метр> 
  <прогресс> 
  <холст> 
  <вставка> 
  <объект> 
  <аудио> 
  <кадр> 
   
  <видео> 
  <рамка> 
  
  <вход> 
  </code> </dt>
     <dt> <code> <выбрать> </code> </dt>
     <dd>
      <p> <code> дисплей: содержимое </code> ведет себя как <code> дисплей: нет </code>.</p>
     </dd>
     <dt> <code> <легенда> </code> </dt>
     <dd>
      <p> Согласно HTML, легенда <code> </code> с отображением <code>: содержимое </code> не является визуализированной легендой, поэтому у нее нет волшебного поведения отображения. (Таким образом, он реагирует на отображение <code>: содержимое </code> нормально.) </p>
     </dd>
     <dt> <code> <кнопка> </code> </dt>
     <dt> <code> <подробности> </code> </dt>
     <dt> <code> <fieldset> </code> </dt>
     <dd>
      <p> Эти элементы не имеют особого поведения; <code> display: contents </code> просто удаляет их основное поле, и их содержимое отображается как обычно.</p>
     </dd>
     <dt> любой другой элемент HTML </dt>
     <dd>
      <p> Работает нормально для дисплея <code>: содержимое </code>. </p>
     </dd>
  </dl> <cite> W3C CSS 3: элементы HTML </cite> </blockquote>




  <h3><span class="ez-toc-section" id="i-19"> Эти последствия для доступности </span></h3> 

 <p>
Сегодня браузеры возьмут элемент с <code> display: contents </code> и отбросят его из дерева доступности. Если вы читали мою статью о добавлении семантики таблицы обратно в элементы <code> <table class="table table-hover"> </code> с помощью ARIA (после применения свойств отображения CSS), что ж, здесь это не сработает.Ни капли.
 </p>




  <h4><span class="ez-toc-section" id="i-20"> Демо, которое вы можете попробовать </span></h4> 

 <p>
Я встроил CodePen ниже, хотя отладочную версию легче протестировать, поскольку она сбрасывает весь код оболочки CodePen.
 </p>

 <p data-height="420" data-theme-id="0" data-slug-hash="mxpWKX" data-default-tab="result" data-user="aardrian" data-embed-version="2" data-pen-title="Table with display:contents"> См. Таблицу перьев с отображением: содержимое Адриана Розелли (@aardrian) на CodePen. </p>
  <h4><span class="ez-toc-section" id="i-21"> Пример программы чтения с экрана </span></h4> 

 <p>
Я прошел через это с NVDA и Firefox, чтобы продемонстрировать это в действии. Я пытаюсь перемещаться по таблице (<kbd> T </kbd>), списку (<kbd> L </kbd>), кнопке (<kbd> B </kbd>) и заголовку 2 (<kbd> 2 </kbd>).Никто из них не признан. Возможно, стоит отметить, что к каждому из этих элементов применяется роль ARIA, соответствующая его собственной роли.
 </p>

Использование NVDA и Firefox 59.02 <p>
Поскольку я сделал это видео, я изменил CodePen, чтобы он содержал два <code> <button> </code> s, один с обработчиком событий <code> onkeypress, </code> и <code> tabindex = "0" </code>, чтобы показать, что он мертв для пользователей клавиатуры. Я сделал это, потому что вы все еще можете нажать на другой <code> <button> </code>, и он запустит событие <code> onclick </code>.</p>




  <h4><span class="ez-toc-section" id="i-22"> Дерево доступности </span></h4> 

 <p>
Чтобы избавить вас от мысли, что в этом виновата программа чтения с экрана, могу заверить вас, что никакая информация элемента (включая ARIA) не попадает в программу чтения с экрана. Эти снимки экрана взяты из Chrome 66.
 </p>

В дереве специальных возможностей Chrome отображается <code>  <h3><span class="ez-toc-section" id="_display_content_Chrome_Chrome_Chrome"> </code>, как обычно, а затем после <code> display: content </code> применено. В нем говорится, что элементы игнорируются и узел доступности <q> не отображается.</q> Дерево специальных возможностей Chrome, показывающее <code> <table class="table table-hover"> </code>, как оно обычно отображается, а затем после <code> отображается: было применено содержимое </code>. В нем говорится, что элементы игнорируются и узел доступности <q> не отображается. </q> Дерево специальных возможностей Chrome, показывающее <code> <ul> </code> в обычном виде, а затем после <code> отображается: было применено содержимое </code>. В нем говорится, что элементы игнорируются и узел доступности <q> не отображается. </q> В дереве специальных возможностей Chrome отображается <code> <button> </code>, как обычно, а затем после отображения <code>: было применено содержимое </code>.В нем говорится, что элементы игнорируются и узел доступности <q> не отображается. </q> <h3><span class="ez-toc-section" id="_display_content_Chrome_Chrome_Chrome"> Ошибки браузера и спецификации </span></h3> 

 <p>
За десять дней до моих тестов Хидде де Врис уже сообщал об ошибках в браузерах, основанных на использовании <code> display: contents </code> в макетах сетки:
 </p>

 <ul> <li> Ошибка Firefox 1455357: Настройка отображения элемента сетки: содержимое сбрасывает его доступную роль
   <ul> <li> Обновление <strong>, 15 мая 2018 г .: </strong> Проверено исправлено в Firefox 62.0a1 (20180515220059).</li>
    <li> Обновление <strong> от 22 октября 2018 г .: </strong> исправлено только для списков, как это узко определено в исходной ошибке. </li>
   </ul> </li>
  <li> Chromium, ошибка 835455: элемент не отображается в дереве специальных возможностей, если для него задано отображение: содержимое </li>
  <li> Ошибка Safari 39630240 (которую я не вижу, потому что мой AppleID может не иметь необходимых разрешений для ее просмотра) </li>
 </ul> <p>
После разговора в Твиттере сегодня утром с Ильей Стрельцыным он выступил с инициативой подать жалобу против спецификации CSS:
 </p>

 <ul> <li> CSSWG # 2632: [css-display] [css-aam] [selectors-4] Как фокусируются элементы с `display: contents`? </li>
 </ul>  <h3><span class="ez-toc-section" id="i-23"> Твитов </span></h3> 

 <p>
Не думаю, что я первым заметил дисплей <code>: содержимое </code> используется для сброса CSS, но мои твиты сегодня утром, похоже, застали некоторых людей врасплох, а также дали мне некоторое представление о проблемах.</p>


 <blockquote>
  <p>
 Ого, это открытие делает `display: contents` бесполезным для работы со списками и другими вещами. 😲 twitter.com/aardrian/statu… # a11y
  </p>
  <cite> Stefan Judis (@stefanjudis) 30 апреля 2018 г. </cite> </blockquote>


 <blockquote>
  <p>
 Это плохое поведение браузеров, но пока оно не будет исправлено, единственное приемлемое использование для `display: contents` — это удалить лишние блоки div, которые вы добавили для резервного макета, но не нужны для макета сетки.</p> <p> Не использовать — пока еще — для семантических элементов: <ul>, <nav>, <button>, <header> и т. Д. Twitter.com/aardrian/statu…
  </p>
  <cite> Амелия Беллами-Ройдс (@AmeliasBrain) 30 апреля 2018 г. </cite> </blockquote>


 <blockquote>
  <p>
 Интересно, что некоторые другие изменения на веб-сайте * после * его загрузки заставят его каким-то образом снова появиться, по крайней мере, в Firefox. @jcsteh исследовал это буквально на позапрошлой неделе, и у нас есть ошибка в Bugzilla, которая исследуется на эту проблему.Вся тема: 👇 twitter.com/aardrian/statu…
  </p>
  <cite> Marco Zehe (@MarcoInEnglish) 30 апреля 2018 г. </cite> </blockquote>


 <blockquote data-conversation="none">
  <p>
 tl; dr: для меня _the_ вариант использования display: contents — это повышенная доступность, которая теперь нигде не работает из-за этих ошибок.
  </p>
  <cite> Hidde (@hdv) 30 апреля 2018 г. </cite> </blockquote>


 <blockquote data-conversation="none">
  <p>
 Это… Он также удаляет его из дерева блоков CSS. Если вы попытаетесь использовать его таким образом, у него будут всевозможные плохие побочные эффекты.</p>
  <cite> 🌺Taudry Hepburn🌺 (@tabatkins) 30 апреля 2018 г. </cite> </blockquote>


 <blockquote>
  <p>
 Использование `display: contents` в качестве хака сброса элементов не только создает серьезную проблему # a11y, но и плохо поддерживается. </p> <p> Попробуйте вместо этого `all: initial`. Он сбрасывает стили элемента, и он намного лучше поддерживается: <br/> caniuse.com/#feat=css-all <br/> caniuse.com/#feat=css-display-contents <br/> twitter.com/aardrian/statu…
  </p>
  <cite> Джеймс Штайнбах (@jdsteinbach) 30 апреля 2018 г. </cite> </blockquote>


 <blockquote data-conversation="none">
  <p>
 Если бы браузеры реализовали это так, как было задумано, это было бы очень полезно, позволяя вам иметь оболочки семантической разметки, независимые от вашего макета.</p> <p> например список <nav>, за которым следует панель поиска и селектор языка, представленные в виде единой сетки или гибкого контейнера.
  </p>
  <cite> Амелия Беллами-Ройдс (@AmeliasBrain) 30 апреля 2018 г. </cite> </blockquote>


 <blockquote data-conversation="none">
  <p>
 На самом деле существует множество разумных причин для использования элементов, которые визуально не нужны для создания коробки.
  </p>
  <cite> Рэйчел Эндрю (@rachelandrew) 30 апреля 2018 г. </cite> </blockquote>


 <blockquote data-conversation="none">
  <p>
 Да, в настоящее время он сломан.Спасибо за отличный отзыв о фокусировке элементов `display: contents`! Я открыл проблему в репозитории CSSWG по этому поводу: github.com/w3c/csswg-draf…, сообщим об ошибках для браузеров, как только это будет разъяснено в спецификации!
  </p>
  <cite> SelenIT (@ SelenIT2) 30 апреля 2018 г. </cite> </blockquote>


  <h3> Заключение </h3> 

 <p>
На данный момент используйте только дисплей <code>: содержимое </code>, если вы собираетесь тестировать со вспомогательными технологиями и можете подтвердить результаты работы для пользователей.</p>



  <h3><span class="ez-toc-section" id="_17_2018"> Обновление: 17 октября 2018 г. </span></h3> 

 <p>
Вы не можете предположить, что использование дисплея <code>: содержимое </code> безопасно, не взвешивая риски. Chrome и Safari по-прежнему сбрасывают семантику. Исправление Firefox — только недавнее обновление, поэтому пользователи Firefox, которым поставщики программ чтения с экрана сказали получить ESR (который основан на 52) из-за проблем с программой чтения с экрана, также все еще затронут.
 </p>

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

 <p>
Это обновление принесло вам мою хвалу (ниже) в неудачном твите (с отсутствующим альтернативным текстом изображения).
 </p>


 <blockquote>
  <p>
 ♠ «Не используйте display: contents, поскольку он удаляет семантику из вашего HTML». Работа с дисплеем <code>: содержимое </code> нарушит родную семантику HTML в большинстве браузеров.
  </p>
  <p>
 Адрианроселли.ru / 2018/05 / displa…
  </p>
  <p>
  </p>
  <cite> Адриан Розелли (@aardrian) 16 октября 2018 г. </cite>
  </blockquote>

 <p>
Кстати, эту фотографию Дженни Хиселер сделала на афтепати # a11yTOConf, смоделировала ее и опубликовала в Твиттере той ночью, и на следующее утро она неожиданно появилась на слайдах Мануэля Матузовича. Рубашка была счастливым совпадением, странное выражение моего лица — нет.
 </p>





  <h3><span class="ez-toc-section" id="_22_2018"> Обновление: 22 октября 2018 г. </span></h3> 

 <p>
Поскольку я обычно не работаю с клиентами над новейшими материалами, и поскольку я не использую <code> display: contents </code>, Скотт выбрал, что Firefox сделал <em>, а не </em>, на самом деле исправил отображение <code> display: contents </code> повсеместно.</p>

 <p>
В своем посте <cite> Unbuttoning Buttons </cite> у него есть отличная демонстрация, которая показывает, как она падает. Я собрал отзывы о Твиттерах, а затем зарегистрировал новую ошибку (не лучшее название, жонглирование звонками):
 </p>

 <p>
Поскольку на этой неделе проводится TPAC, я знаю, что об этом тоже говорили, так что сейчас подходящий момент.
 </p>

 <p>
Есть еще две связанные ошибки:
 </p>

 <p>
Firefox 64 Nightly также показывает эту ошибку.Пожалуйста, избегайте <code> display: contents </code>, тем более что теперь мы знаем, что даже в одном браузере, который утверждал, что исправил это, он все еще не работает.
 </p>





  <h3><span class="ez-toc-section" id="_21_2019"> Обновление: 21 июня 2019 г. </span></h3> 

 <p>
Firefox исправил отображение ошибки: содержимое удаляет атрибуты из дерева (например, кнопку). В очень быстром тесте все выглядит хорошо.
 </p>




 <h3><span class="ez-toc-section" id="i-25"> Теги </span></h3> 

<p>
доступность, браузер, Chrome, css, Firefox, Safari, стандарты, таблицы </p>

 <h3><span class="ez-toc-section" id="i-26"> Другие сообщения </span></h3> 

      
  <p>
Предыдущее сообщение: <cite> Доступных мемов можно сделать </cite>
</p>
  <p>
Более свежая публикация: <cite> WordCamp Buffalo: Свойства отображения CSS против семантики HTML </cite>
</p>

 <h2><span class="ez-toc-section" id="CSS"> CSS свойство сброса счетчика </span></h2> 
      



 <br/>
  <h4><span class="ez-toc-section" id="i-27"> Пример </span></h4> 
 <p> Создайте счетчик («my-sec-counter») и увеличьте его на единицу для каждого
появление селектора <h3><span class="ez-toc-section" id="_body_my-sec-counter_0_h3_before_my-sec-counter_1_counter-increment_my-sec-counter_counter_my-sec-counter">: </p>

  
    body {<br/> / * Установить «my-sec-counter» на 0 * / <br/>
    сброс счетчика: счетчик моих секунд; <br/>} <p> h3 :: before {<br/> / * Увеличение «my-sec-counter» на 1 * / <br/> counter-increment:
    my-sec-counter; <br/> содержание: «Раздел»
    counter (my-sec-counter) «.»; <br/>}
 </p>
Попробуй сам »

 <p> Дополнительные примеры «Попробуйте сами» ниже. </p>
 <hr/>  <h3><span class="ez-toc-section" id="_body_my-sec-counter_0_h3_before_my-sec-counter_1_counter-increment_my-sec-counter_counter_my-sec-counter"> Определение и использование </span></h3> 
 <p> Свойство <code> counter-reset </code> создает или сбрасывает один или несколько счетчиков CSS. </p>
 <p> Свойство <code> сброс счетчика </code> обычно используется вместе с
свойство counter-increment и свойство
Content свойство. </p>

 <table class="table table-hover"> <tr> <th> Значение по умолчанию: </th>
     <td> нет </td>
   </tr> <tr> <th> Унаследовано: </th>
     <td> № </td>
   </tr> <tr> <th> Анимация: </th>
     <td> нет.Прочитать о <em> animatable </em>
   </td>
   </tr> <tr> <th> Версия: </th>
     <td> CSS2 </td>
   </tr> <tr> <th> Синтаксис JavaScript: </th>
     <td> <i> объект </i> .style.counterReset = «section»
Попытайся
 </td>
   </tr> </table>
 <hr/>  <h3><span class="ez-toc-section" id="i-28"> Поддержка браузера </span></h3> 
 <p> Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство. </p>

 <table class="table table-hover"> <tr> <th> Имущество </th>
     <th title="Chrome"/>
     <th title="Internet Explorer / Edge"/>
     <th title="Firefox"/>
     <th title="Safari"/>
     <th title="Opera"/>
   </tr> <tr> <td> сброс счетчика </td>
     <td> 4.0 </td>
     <td> 8,0 </td>
     <td> 2,0 </td>
     <td> 3,1 </td>
     <td> 9,6 </td>
   </tr> </table>
 <hr/>
 <hr/>  <h3><span class="ez-toc-section" id="_CSS-9"> Синтаксис CSS </span></h3> 
 <p>
сброс счетчика: нет | <i> имя номер </i> | начальная | наследование; </p>

  <h3><span class="ez-toc-section" id="i-29"> Значения собственности </span></h3> 

 <table class="table table-hover"> <tr> <th> Значение </th>
     <th> Описание </th>
   </tr> <tr> <td> нет </td>
     <td> Значение по умолчанию. Счетчики не сбрасываются </td>
   </tr> <tr> <td> <i> идентификационный номер </i> </td>
     <td> Идентификатор <i> </i> определяет, какой счетчик сбрасывать.Число <i> </i> устанавливает значение счетчика.
      сбрасывается при каждом появлении селектора. По умолчанию номер <em>, значение </em>: 0 </td>.
   </tr> <tr> <td> начальный </td>
     <td> Устанавливает для этого свойства значение по умолчанию. Читать про <em> начальные </em> </td>
     </tr> <tr> <td> наследовать </td>
     <td> Наследует это свойство от своего родительского элемента. Читать про <em> наследство </em> </td>
     </tr> </table>
 <hr/>  <h3><span class="ez-toc-section" id="i-30"> Другие примеры </span></h3> 

  <h4><span class="ez-toc-section" id="i-31"> Пример </span></h4> 
 <p> Создайте счетчик («my-sec-counter») и уменьшите его на единицу для каждого
появление селектора <h3><span class="ez-toc-section" id="_body_my-sec-counter_0_h3_my-sec-counter_1_counter-increment_--_-1_counter_my-sec-counter_1_11_12_0_h2_0_h2_before_1_-_content_counter_h3_before_1_-_body_my-sec-counter_0_h3_my-sec-counter_1_counter-increment_my-sec-counter_my-sec-counter">: </p>

  
    body {<br/> / * Установить «my-sec-counter» на 0 * / <br/>
    сброс счетчика: счетчик моих секунд; <br/>} <p> h3 :: до {<br/>
    / * Уменьшаем «my-sec-counter» на 1 * / <br/> counter-increment:
    мой-секунд-счетчик -1; <br/> содержание: «Раздел»
    counter (my-sec-counter) «.»; <br/>}
 </p>
Попробуй сам »



  <h4> Пример </h4> 
 <p> Нумерация разделов и подразделов с помощью «Раздел 1:», «1.1», «1.2» и т.д .: </p>

тело
 {<br/> / * Установить «раздел» на 0 * / <br/>
  
 сброс счетчика: секция; <br/>
 } <p> h2
 {<br/> / * Установить «подраздел» на 0 * / <br/>
 сброс счетчика: подраздел; <br/>
 } </p> <p> h2 :: before
 {<br/> / * Увеличить «раздел» на 1 * / <br/>
  
 счетчик-инкремент: раздел; <br/>
  
 content: «Раздел» counter (раздел) «:»; <br/>
 } </p> <p> h3 :: before {<br/> / * Увеличить «подраздел» на 1 * / <br/>
  
 счетчик-инкремент: подраздел; <br/>
  
 содержание: счетчик (раздел) ».»счетчик (подраздел)» «; <br/>
 }
 </p>
Попробуй сам »



  <h4> Пример </h4> 
 <p> Создайте счетчик и увеличьте его на единицу (римскими цифрами) для каждого
появление селектора <h3><span class="ez-toc-section" id="_body_my-sec-counter_0_h3_my-sec-counter_1_counter-increment_--_-1_counter_my-sec-counter_1_11_12_0_h2_0_h2_before_1_-_content_counter_h3_before_1_-_body_my-sec-counter_0_h3_my-sec-counter_1_counter-increment_my-sec-counter_my-sec-counter">: </p>

  
    body {<br/> / * Установить «my-sec-counter» на 0 * / <br/>
    сброс счетчика: счетчик моих секунд; <br/>} <p> h3 :: до {<br/>
    / * Увеличиваем «my-sec-counter» на 1 * / <br/> counter-increment:
    my-sec-counter; <br/> содержимое: счетчик (my-sec-counter,
    верхнеримский) «.»; <br/>}
 </p>
Попробуй сам »


 <hr/>  <h3><span class="ez-toc-section" id="_body_my-sec-counter_0_h3_my-sec-counter_1_counter-increment_--_-1_counter_my-sec-counter_1_11_12_0_h2_0_h2_before_1_-_content_counter_h3_before_1_-_body_my-sec-counter_0_h3_my-sec-counter_1_counter-increment_my-sec-counter_my-sec-counter"> связанные страницы </span></h3> 
 <p> Ссылка CSS: :: before псевдоэлемент </p>
 <p> Ссылка CSS: :: after псевдоэлемент </p>
 <p> Ссылка CSS: свойство содержимого </p>
 <p> Ссылка CSS: свойство counter-increment </p>
 <p> Ссылка на HTML DOM: свойство counterReset </p>
 <br/>

 <br/>  <h2><span class="ez-toc-section" id="CSS_counter-reset_GeeksforGeeks"> CSS | свойство counter-reset — GeeksforGeeks </span></h2> 
 <p> <code> <! DOCTYPE html> </code> </p>
 <p> <code> <</code> <code> HTML </code> <code>> </code> </p>
 <p> <code> </code> </p>
 <p> <code> <</code> <code> голова </code> <code>> </code> </p>
 <p> <code> </code> </p>
 <p> <code> </code> </p>
 <p> <code> </code> <code> <</code> <code> стиль </code> <code>> </code> </p>
 <p> <code> </code> </p>
 <p> <code> </code> <code> / * установить счетчик разделов на 0 * / </code> </p>
 <p> <code> </code> <code> кузов {</code> </p>
 <p> <code> </code> <code> сброс счетчика: глава; </code> </p>
 <p> <code> </code> <code>} </code> </p>
 <p> <code> </code> <code>.Глава: до {</code> </p>
 <p> <code> </code> <code> содержание: счетчик (раздел) «.»; </code> </p>
 <p> <code> </code> <code> дисплей: встроенный; </code> </p>
 <p> <code> </code> <code>} </code> </p>
 <p> <code> </code> <code>. Глава {</code> </p>
 <p> <code> </code> </p>
 <p> <code> </code> <code> / * Увеличить счетчик главы на 1, </code> </p>
 <p> <code> </code> <code> то же, что и приращение счетчика: глава 1; * / </code> </p>
 <p> <code> </code> <code> счетчик: глава; </code> </p>
 <p> <code> </code> </p>
 <p> <code> </code> <code> / * установить счетчик секций на 0 * / </code> </p>
 <p> <code> </code> <code> сброс счетчика: секция; </code> </p>
 <p> <code> </code> <code> размер шрифта: 20 пикселей; </code> </p>
 <p> <code> </code> <code> font-weight: жирный; </code> </p>
 <p> <code> </code> <code>} </code> </p>
 <p> <code> </code> <code> </ </code> <code> стиль </code> <code>> </code> </p>
 <p> <code> </ </code> <code> головка </code> <code>> </code> </p>
 <p> <code> </code> </p>
 <p> <code> <</code> <code> корпус </code> <code>> </code> </p>
 <p> <code> </code> <code> <</code> <code> h2 </code> <code>> GeeksforGeeks </ </code> <code> h2 </code> <code>> </code> </p>
 <p> <code> </code> </p>
 <p> <code> </code> <code> <</code> <code> div </code> <code> class </code> <code> = </code> <code> «раздел» </code> <code>> HTML </ </code> <code> div </code> <code>> </code> </p>
 <p> <code> </code> <code> <</code> <code> дел </code> <code> класс </code> <code> = </code> <code> «глава» </code> <code>> CSS </ </code> <code> div </code> <code>> </code> </p>
 <p> <code> </code> <code> <</code> <code> div </code> <code> class </code> <code> = </code> <code> "chapter" </code> <code>> PHP </ </code> <code> div </code> <code>> </code> </p>
 <p> <code> </ </code> <code> кузов </code> <code>> </code> </p>
 <p> <code> </code> </p>
 <p> <code> </ </code> <code> html </code> <code>> </code> </p>
  <h2><span class="ez-toc-section" id="Front_End_-_CSS_Voi_Normalizecss"> Front End - Сброс CSS Với Normalize.css </span></h2>  <p> Mình thật sự chưa biết <strong> Сброс CSS </strong> là gì cho n khi mình gặp một vài vấn đề liên quan trong quá trình code giao diện. </p>

 <p> Hôm bữa mình đang ngồi code mấy cái thẻ <code> div </code> ngon lành, chèn CSS khí thế đủ thứ kiểu, lúc sau inspect vào cái mấy <code> div </code> t dưng l . </p>

 <p> Sau quá trình tìm hiểu, mình mới nhận ra nguyên do là mỗi phần tử <code> HTML </code> đều có những quy tắc hiển thị khác nhau tuỳ theo mỗi trình duyệt.Và đó là lí do mình viết bài post này. Hãy share và bình luận nếu các anh em cảm thấy nó hữu ích. Ахихи </p>

 <p> ây là link bài viết của tui: <br/> <strong> https://hungphamdevweb.com/front-end-reset-css-voi-normalize-css.html </strong> </p>

  <h3><span class="ez-toc-section" id="_CSS_la_gi"> Сброс CSS là gì? </span></h3> 

 <p> Chúng ta hãy dành một tí phút để tìm hiểu, trước khi sử dụng nó nhé. Cng giống như cái title <strong> CSS Reset </strong>, hiển nhiên nó là một số thuộc tính CSS dùng để "cài đặt" lại tất cả các CSS của trình duyệt về mặc định.</p>

 <p> Việc này là tối quan trọng nếu các anh em không muốn viết nhiều phiên bản CSS trên project của mình riêng cho mỗi trình duyệt. </p>

 <p> Thc chất nếu các anh em chỉ thường sử dụng các <code> CSS Framework </code> như Bootstrap, это cũng chả cần quan tâm vấn này vì hầu như chúng luôn c включает в себя <code> Front End c Framework <code>. </p>

 <p> Chúng ta chỉ thực sự để tâm đến <b> Сброс CSS </b> khi các anh em muốn tạo riêng cho mình một <code> Mini CSS Framework </code> để xây dựng giao diện với một số công nghạn CSS nhn giớiiiii?

 <p> </p>

  <h3><span class="ez-toc-section" id="Thu_Vien_CSS_Reset_NormalizeCSS"> Thư Viện CSS Reset Normalize.CSS </span></h3> 

 <p> Các anh em có thể tìm hiểu và download <code> Normalize </code> ây nhé <strong> Normalize.css </strong>. </p>

 <p> Có rất nhiều thư viện về <b> CSS Reset </b> nhưng ở ây mình sẽ chỉ giới thiệu về Normalize thôi, bởi vì độ phổ biến và s tin dùng của nó. </p>

 <p> </p>

 <p> Cơ bản <code> Normalize </code> là một chuỗi các thuộc tính chuyên dùng chỉ để Сбросить CSS. </p>

 <p> Dưới đây là một đoạn code nhỏ trong <code> Нормализовать </code> </p><pre> / **
 * 1. Исправьте высоту строки во всех браузерах.* 2. Предотвратить корректировку размера шрифта после изменения ориентации в iOS.
 * /

html {
  высота строки: 1,15; / * 1 * /
  -webkit-text-size-adjust: 100%; / * 2 * /
}

/ * Разделы
   ================================================== ======================== * /

/ **
 * Убрать маржу во всех браузерах.
 * /

body {
  маржа: 0;
}

/ **
 * Последовательная визуализация элемента `main` в IE.
 * /

главный {
  дисплей: блок;
}
 </pre><p> Ở ây người ta cũng đã chú thích rất kỹ, các anh em chỉ cần đọc sơ qua thôi cũng sẽ hiểu.</p>

  <h3><span class="ez-toc-section" id="Nguyen_Tac_Su_Dung_CSS"> Nguyên Tắc Sử Dụng Сброс CSS </span></h3> 

 <p> Di đây là một vài nguyên tắc hoạt động <strong> CSS Reset </strong>, các anh em nên biết sơ qua trước khi bắt đầu code giao diện: </p>

  <h4><span class="ez-toc-section" id="_1_CSS_luon_o_dau_tien_trong_cac_file_CSS"> Правило 1: сброс CSS luôn ở đầu tiên trong các file CSS </span></h4> 

 <p> iều này thì các anh em đã rõ như ban ngày rồi. Nu nó là một file riêng hãy import nó trên cùng, còn nếu copy thì cũng nên nhớ paste nó trên cùng file CSS của mình. </p>

  <h4><span class="ez-toc-section" id="_2_CSS_luon_xu_ly_cac_element_HTML"> Правило 2: Сброс CSS luôn xử lý các element HTML </span></h4> 

 <p> Nhiệm vụ của <b> CSS Reset </b> là làm việc trực tiếp với các element chứ không phải các class hay ID nào cả.Bởi nó sẽ làm việc với trình duyệt, mà các trình duyệt cũng làm cách tương tự để thêm các CSS mặc định vào. </p>

  <h4><span class="ez-toc-section" id="_3_CSS"> Правило 3: Пользовательский стиль CSS, связанный с классом / идентификатором, связанным с родительским элементом </span></h4> 

 <p> iều này rất rõ ràng và cần thiết trong <strong> Code Standards </strong>: <br/> Bn nên code vào <code> .button </code> thay vì <code> a.button </code> <br/> Bn nên code vàì <code> ul. List <code> ul. .list li </code> <br/> Элемент, содержащий элемент, соответствующий классу / идентификатору, имеет значение, соответствующее параметру giúp bạn dễ dng xử lý xung, соответствует <strong> Сброс CSS </strong> в пользовательском стиле.</p>

  <h3><span class="ez-toc-section" id="Ket_Luan"> Kết Luận </span></h3> 

 <p> Mc dù <strong> Сброс CSS </strong> ã là một kiến thức lỗi thời rồi nhưng mình nghĩ cũng còn i đa số các anh em <code> Developer </code> như mình vẫn chưa có biết. Nu muốn sớm trở thành một <strong> Senior Front-end </strong>, mình nghĩ đây là một kiến thc bn mà bất kì <code> Coder </code> nào cn phải có.															</div>

							<div class="post-meta">
															</div>
							
						</article>
			
	<nav class="navigation post-navigation" aria-label="Записи">
		<h2 class="screen-reader-text">Навигация по записям</h2>
		<div class="nav-links"><div class="nav-previous"><a href="https://xn--80aahvkuapc1be.xn--p1ai/raznoe/kak-sozdat-pdf-kak-sozdat-pdf-fajl.html" rel="prev"><span class="meta-nav">Предыдущая запись</span> Как создать пдф – Как создать pdf файл</a></div><div class="nav-next"><a href="https://xn--80aahvkuapc1be.xn--p1ai/raznoe/svetlyj-parket-tekstura-besshovnye-tekstury-parketa-2.html" rel="next"><span class="meta-nav">Следующая запись</span> Светлый паркет текстура: Бесшовные текстуры паркета</a></div></div>
	</nav>
			
<div id="comments" class="comments-area">

	
		<div id="respond" class="comment-respond">
		<h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe/css-reset-2018-sbros-css-stilej-primery-rabotayushhih-reshenij-tehnicheskij-blog.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://xn--80aahvkuapc1be.xn--p1ai/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required>
Имя * 
Email * 
Сайт