От автора: сайтостроение в Сети бывает похоже на строительство на зыбучих песках. Браузеры делают все то же, но время от времени у них получаются раздражающе непредсказуемые отличия. Например, у всех браузеров есть «таблицы стилей user agent» — набор стилей CSS по умолчанию, чтобы заголовок выглядел заголовком и т.д., еще до назначения вами стилей странице1. Конечно, в каждом браузерном движке наборы по умолчанию применяются немного разные.
Одним из примеров являлись стили списка по умолчанию, где изначально в браузерных таблицах стилей по умолчанию Internet Explorer’а и Opera был отступ списка margin-left: 30pt;, тогда как Firefox и KHTML шли с padding-left: 40px;. Если вам хотелось изменить отступ по умолчанию, определив ul {padding-left: 0;}, то в браузерах это приводило к очень разным результатам.
СБРОС ИСХОДНЫХ НАСТРОЕК CSS
Чтобы добиться небольшой стабильности, некоторые разработчики сбрасываю все поля и отступы с помощью универсального селектора:
|
1 |
* {margin: 0; padding: 0;} |
Определив отступ списка и начав с этого свою таблицу стилей, вы получите то, что ожидали. Однако применение * означало, что поле и отступ по умолчанию «грохнулись» для всех элементов и, как только вы добавляли элемент form, становилось совсем тяжко.
Тантек Челик (Tantek Celik) и Эрик Майер (Eric Meyer) начали обсуждение более точного способа адресации к различиям стилей по умолчанию в 2004г., при этом в 2006г. появился YUI CSS Reset, и Meyer Reset в 2007г.
Цель сброса состоит в том, чтобы обнулить все, что можно… [и] послужить стартовой точкой ваших собственных основных стилей — Эрик Майер (Eric Meyer)
Вот вам первое правило текущей (v2.0) версии CSS Reset Эрика:
|
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, 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 временно включалось это правило:
|
1 2 3 4 |
/* помните о том, что нужно определить стили фокуса! */ :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:
Стили агента пользователя 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 2 3 4 5 6 7 8 9 10 11 12 |
/** * 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.
Комментарии (2)