• Перевод

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

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

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

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

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

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

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

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

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

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

  1. 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 без изменений».

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

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

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

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

html , body , div , span , applet , object , iframe ,

h1 , h2 , h3 , h4 , h5 , h6 , p , blockquote , pre ,

a , abbr , acronym , address , big , cite , code ,

del , dfn , em , img , ins , kbd , q , s , samp ,

small , strike , strong , sub , sup , tt , var ,

b , u , i , center ,

dl , dt , dd , ol , ul , li ,

fieldset , form , label , legend ,

table , caption , tbody , tfoot , thead , tr , th , td ,

article , aside , canvas , details , embed ,

figure , figcaption , footer , header , hgroup ,

menu , nav , output , ruby , section , summary ,

time , mark , audio , video {

margin : 0 ;

padding : 0 ;

border : 0 ;

font - size : 100 % ;

font : inherit ;

vertical - align : baseline ;

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

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

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

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

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

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

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

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

NORMALIZE.CSS

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

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

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

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

Применяем Meyer Reset

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

Applying Normalize.css v2

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

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

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

Я видел много различных CSS Reset , все они примерно одинаковые. Можете использовать вот такой:

Html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, 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 {
background: transparent;
border: 0;
font-size: 100%;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
content: none;
}
:focus {
outline: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

Думаю, чем его использование обусловлено и так понятно, а вот почему его, например, я не использую, как и многие другие верстальщики, об этом стоит рассказать. Во-первых, это лишний файл , во-вторых, лишнее время на обработку, но самое главное - мне нравятся свойства по умолчанию. Например, те же поля у таблицы. Ведь все свойства по умолчанию делали не просто так, а как наиболее оптимальный вариант отображения различных элементов. Уверяю Вас, обнулив padding у ячеек таблицы, скорее всего, Вы его вернёте в основном файле. И далеко не факт, что значение будет отличаться от того, что было по умолчанию. Вот и получается, что мы сначала это убираем, а затем это же возвращаем. А вместе с первыми недостатками (лишний файл и лишний код) многие верстальщики и вовсе не используют CSS Reset .

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

  • Перевод

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

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

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

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

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

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

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

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

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

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

  1. 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 без изменений».