Приветствую всех читателей текущей статьи, а также подписчиков моего обучающего блога. Наверное, вы не раз сталкивались с проблемой, когда стилевая разметка выполнена идеально, но несмотря на это в разных браузерах страницы сайта несколько отличаются. Для того чтобы этого не было я расскажу вам, что такое очистка css стилей.
Прочитав данную публикацию, вы узнаете историю возникновения данной технологии, разберете несколько видов чистки стилей, а также сможете закрепить свои новые знания, разобрав примеры кода. А теперь перейдем непосредственно к делу!
Как появилась технология CSS Reset и как ею пользоваться
CSS Reset – это список свойств каскадных стилевых таблиц, которые сбрасывают запрограммированные стандарты в браузерах по умолчанию.
Такой прием позволяет создать универсальный веб-сервис, который вне зависимости от браузера будет выглядеть неизменно и поможет избавиться от неиспользуемых стилей.
На сегодняшний день существует множество вариантов реализации reset библиотек или можно их еще назвать фреймворками.
Я считаю, что каждый уважающий себя разработчик веб-приложений должен иметь reset фреймворк, подстроенный под себя. Это может быть один из уже готовых, а может и свой персонально сверстанный reset-файл.
Что касается истории, то впервые похожая технология была использована Креспанисом Эндрю в 2004 году. В своих технических публикациях он советовал верстальщикам в начале документа со стилями использовать универсальный селектор, т.е. *, и в нем обнулять отступы объектов, которые задаются в каждом браузере по умолчанию.
Программная реализация такого приема выглядит так:
1 2 3 4 | *{
margin: 0;
padding: 0;
} |
Для наглядности я сверстал небольшой пример с использованием описанного минималистичного reset-а Креспаниса.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
Пример работы подхода Э. Креспаниса
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
background: #bbf;
width: 450px;
border: 3px double blue;
}
</style> |
Если запустить пример, то видно, что блок расположился впритык к левому верхнему углу.
Как я уже говорил, существует множество решений сброса прописанных в браузерах каскадных стилевых таблиц. Первый способ я уже описал выше. Существует еще два простеньких варианта reset-ов, которые отличаются от решения Креспаниса только несколькими дополнительными свойствами.
Так, в одном из подходов используется дополнительное обнуление всех границ веб-объектов (добавляется строка border: 0;), а в другом – сброс параметров границ и внешнего контура элементов (к первому варианту добавляется outline: 0; border: 0;).
Однако все они обладают рядом недостатков. Так как это самые первые версии стилевого «контроля» браузеров, они не идеальны. Взять даже текст с параграфами. При использовании первой реализации reset-а, исчезнут отступы между абзацами. В этом случае каждый раз css-разметку придется корректировать.
Поэтому многие веб-гуру и профессионалы в IT-области продолжали совершенствовать новое направление. Так, Эрик Мейер провел ряд исследований, изучил множество работ, написанных в то время, и создал мощный инструмент под названием CSS Reset.
Осторожно! Веб-мафия! Убьет любой браузерный стандарт стилей!
Итак, что же мы имеем с CSS Reset? Данное решение не использует универсальный селектор, а задает стилевую разметку через теги. При этом в коде предусмотрена обработка «проблемных» зон как, например, border-collapse, который в некоторых браузерах функционирует плохо.
Хочу отметить важную деталь: сброс стилевой разметки обязательно нужно делать перед установкой других свойств, так как css обрабатывает стилевые правила по порядку и перезаписывает значения параметров, указанных несколько раз для одних и тех же тегов.
Вернемся к Эрику Мейеру и его CSS Reset. В своем решении он прописывает правила для почти всех элементов языка css, начиная от контейнеров и заканчивая такими мелкими тегами, как strong, var, mark и другие. Вот тут расположена официальная вторая версия этого документа: http://meyerweb.com/eric/tools/css/reset/index.html
После появления выше описанного варианта подгонки дизайна сайта «под одну гребенку» во всех браузерах, многие крупные фирмы создали свои модификации.
Например, Yahoo! создали YUI CSS Reset, который они выложили в свободный доступ (можно посмотреть по этой ссылке: http://yui.github.io/yui2/#start).
Крис Потит с единомышленниками разработал Siolon`s CSS Browser Reset (http://www.siolon.com/blog/browser-reset-css/). И так можно перечислять очень долго.
Некоторые советы по поводу использования такой технологии
Здесь я хочу перечислить некоторые важные правила и рекомендации использования CSS Reset:
- Как я уже и говорил, первое, что должно отработать в css-коде, это сброс параметров. Хоть это и интуитивно понятно, но очень часто новички и разработчики с опытом спотыкаются об эту ошибку;
- Считается хорошим тоном использовать отдельный css-документ для CSS Reset. К тому же такой файл становится универсальным инструментом девелопера и может быть использован в разных веб-проектах;
- Не бойтесь внедрять персональные модификации или создавать свои собственные reset-фреймворки;
- Старайтесь не слепо использовать готовые решения по сбросу стилей и после переопределять некоторые параметры. Это грозит избыточностью кода. А такое айтишники не любят. Поэтому в случае с Yahoo CSS Reset если вам в этих свойствах: caption, th {text-align: left;} нужно выравнивание по центру, а не слева, то смело пишите ключевое слово center.
Что касается меня, то я использую свой CSS Reset, который включает в себя основные общие правила шаблонов и мои поправки.
На этом статья подошла к концу. Буду благодарен, если вы оцените мою работу по достоинству, а также вступите в ряды моих подписчиков. Не забывайте делиться ссылкой на мой блог с друзьями и коллегами. Удачи!
Пока-пока!
С уважением, Роман Чуешов
