Сброс css: HTML и CSS. Сброс стилей reset.css (16 вариантов)

Сброс стилей с помощью 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. Опирайтесь на собственные принципы и собственный стиль.

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

1. A Killer Collection of Global CSS Reset Styles;
2. 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:

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

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

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

/* html.css */
HTML 4:    78;
Chrome:  1123;
Firefox:  907;

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

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

* {
  margin: 0;
  padding: 0;
  border: 0;
  joffrey: kill;
  cersei: kill;
  frey: kill;
}
/* ORLY? */
div , span {
  margin: 0;
  padding: 0;
  border: 0;
}

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

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

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

/* YUI Reset */
html {
  color: #000;
  background: #FFF;
}
select {
  *font-size:100%;
}
/* Не забыть
   вернуть обводку */
:focus {
  outline: 0;
}
/* Забыл */

Многих ресеты раздражали: для внутренних блоков с содержимым приходилось восстанавливать стили не только для списков, но и базовых текстовых элементов вроде strong, em, code и других. У 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;
}

---

• Default style sheet for HTML 4
• Reset CSS
• Normalize.css
• CSS: all

---

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Что такое файл сброса CSS и как его использовать?

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

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

Начнем.

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

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

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

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

Примеры сброса CSS

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

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

 
 /*  
 Исправьте размер шрифта и поля для элементов h2 в контекстах section и article в Chrome, Firefox и Safari. 
 */ 
  h2 { размер шрифта: 2em; margin: 0.67em 0;} 
 

Приведенный выше код является фрагментом файла Normalize; обратите внимание, что свойства получают определенное значение. Сброс CSS, эквивалентный этому, будет выглядеть следующим образом.

 
 /* 
 Исправьте размер шрифта и поля для элементов `h2` в контекстах `section` и `article` в Chrome, Firefox и Safari. 
 */ 
  h2 { размер шрифта: 1em; margin: 0;} 
 

Этот код будет версией CSS Reset приведенного выше кода Normalize, который корректирует размер шрифта и значения полей для тегов h2. Этот код на самом деле не из CSS-файла Reset, а просто показывает, как Reset будет обрабатывать вещи по-другому.

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

 
 html, body, div, span, applet, object, iframe, h2, h3, h4, h5, h5, h6, p, цитата, 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, форма, метка, легенда, таблица, заголовок, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output , ruby, раздел, сводка, время, отметка, аудио, видео {  
   маржа: 0; 
   заполнение: 0; 
   граница: 0; 
   размер шрифта: 100%; 
   шрифт: наследовать; 
   vertical-align: baseline; 
 }  
 

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

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

Давайте рассмотрим каждый пример, а затем обсудим результаты на основе первой веб-страницы.

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

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

Код для файла Normalize направлен на то, чтобы привести значения по умолчанию в разных браузерах к равным игровым полям.

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

Начало работы с использованием файла сброса CSS

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

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

В чем разница между Normalize.css и Reset CSS?

Normalize.css

Normalize.css — это небольшой файл CSS, обеспечивающий кросс-браузерную согласованность стилей HTML-элементов по умолчанию.

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

Но в некоторых случаях мы не можем исправить неисправные браузеры по стандарту, обычно из-за IE или EDGE. В этих случаях исправления в Normalize будут применять стили IE или EDGE к остальным браузерам.

Пример из жизни

Chrome, Safari и Firefox отображают

теги, которые находятся внутри тега

/