По умолчанию браузер устанавливает свои настройки для некоторых свойств в css. Но беда тут в том, что веб-обозревателей много и каждый может устанавливать свои правила. Какое решение? Узнать, как сбросить настройки css по умолчанию и перезаписать на свои. А вот о том, как это можно сделать и будет посвящена эта статья.
CSS Reset или сброс настроек по умолчанию
CSS Reset — это набор стилей, которые сбрасывают какие-то параметры, установленные браузером по умолчанию. Этот файл пишет для себя каждый веб-разработчик индивидуально, а кто-то берет готовое решение. Вот с него я и предлагаю начать. Есть много хороших вариантов сброса стилей, но мне больше всего понравился этот, составленный Эриком Мейером:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
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;
}
/* 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;
}
Я немного прокомментирую код. Во-первых, тут сбрасываются внутренние и внешние отступы для всех нужных элементов. Во-вторых, на лицо поддержка HTML5 элементов. Для них задано правило, которое позволит им правильно отображаться в некоторых версиях браузеров. В-третьих, заданы типичные настройки для удобной работы с таблицами (убраны отступы между ячейками и двойные границы). А еще сброшены стандартные маркеры для списков и кавычки для цитат. Эти части кода стоит удалить, если вы хотите использовать стилизацию по умолчанию.
Как сбросить настройки css самостоятельно
При более менее нормальном владении css можно попробовать самому написать пару правил. Например:
*{
margin: 0;
padding: 0;
}
Это, пожалуй, самая простая команда. Звездочка в данном случае представляет все селекторы, поэтому стили будут применены ко всем элементам на веб-странице, сбросив у них внешние и внутренние отступы. Вы удивитесь, но этих простых строчек кода может хватить для обеспечения кроссбраузерности во многих веб-обозревателях. Все остальные правила можно добавить по собственному желанию. Я советую добавить еще display: block для всех тегов HTML5.
Где разместить правила css reset
Вот выше я вам предложил код, а куда его вставлять? Тут есть два варианта:
- Вставить его в самом начале главной таблицы стилей на вашем сайте
- Создать на сервере новый css-файл и сохранить в него код, после чего сохранить и подключить ко всем страницам ПЕРЕД основной таблицей style.css .
Подробнее о подключении таблицы стилей css к html смотрите
На мой взгляд, второй вариант хуже тем, что ухудшает производительность, добавляя в загрузку один лишний файл. С другой стороны, так вам проще будет управлять этими правилами. Но ради производительности я рекомендую использовать первый вариант.
Сброс настроек является одной из мер по обеспечению кроссбраузерности сайта, то есть одинакового отображения в разных веб-обозревателях. Конечно, это не все меры, которые обеспечат одинаковый внешний вид, об остальных я буду писать в дальнейшем на этом блоге. Подписывайтесь, если интересно.
В этой статье мы поговорим о сбросе стилей и рассмотрим пример создания такого файла reset.css .
Идея броса стилей появилась около 10 лет назад. Которая собственно заключалась в том, чтобы при помощи небольшого набора CSS стилей привести вид страницы во всех браузерах к одинаковому. Конечно не всегда это получается, но некоторые моменты можно исправить - например border не понятно откуда берущийся в некоторых версиях IE . Или синяя обводка (outline ) у полей.
Не для одного front-end разработчика не секрет, что браузеры очень привередливы и каждый обрабатывает элементы HTML по своему, добавляя свои стандартные стили.
Так как этой идей загорелись давно, не удивительно, что есть уже готовые файлы сброса, обычно их называют reset.css , и подключают ко всем проектам.
Почему в отдельном файле? Да просто по тому, что так удобнее их переносить от проекта к проекту.
Вот пример reset.css от 2007 года:
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ 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; } /* 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; }
Это лишь стандарт этого файла принятый определнным кругом веб-разработчиков.
Я же советую вам, будь вы опытным программистом или только начинающим разработать свой файл сброса. За основу можно взять вышеописанный стандарт, дополнить его своими селекторами или изменить существующие. Вот пример такого файла, который я разработал для себя:
input, textarea,a , button, select{outline:none} img {border:none;} hr { clear:both; border:none; background:none; } * { background-repeat:no-repeat; } /* 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; margin:0; padding:0; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; }
Вы можете коппировать любой вышеуказанный код для личного использования, но если будете использовать его в своих статьях - ставьте ссылку на источник.
CSS CSS по умолчанию для HTML-элементов (2)
Для каждого браузера разные, поэтому:
- Firefox (Gecko): . Или перейдите на resource://gre-resources/ и посмотрите на html.css .
- Chrome / Safari (WebKit):
- Chrome (Blink):
- Internet Explorer (Trident) , более ранние версии: http://web.archive.org/web/20170122223926/http://www.iecss.com/
Где я могу найти CSS для CSS по умолчанию для браузера?
Многие элементы HTML имеют некоторые свойства CSS по умолчанию, которые иногда могут приводить к неизвестному / нежелательному поведению. Например, поля ввода отображаются по-разному в разных браузерах. Я ищу место, которое покрывает новые свойства CSS3 и новые элементы HTML5.
Я видел в других (гораздо более старых) вопросах (таких как таблицы стилей CSS по умолчанию в браузерах), которые предлагают решение сброса CSS. Это решение иногда не нужно, часто мне хотелось бы сохранить некоторые основные свойства (например, выделение полей ввода в Chrome). Другими словами: я не хочу избавляться от вещей только потому, что не знаю, что они делают .
Итак, есть ли сайт, который может дать мне всю эту информацию (или, возможно, большинство)?
Репозиторий GitHub для всех спецификаций HTML W3C и таблиц стилей CSS по умолчанию для разработчиков можно найти
1.
2. Стандартные стили для Internet Explorer
3.
4. Стандартные стили для Opera
5. Стандартные стили для HTML4 (спецификация W3C)
6. Стандартные стили для HTML5 (спецификация W3C)
Пример, по спецификации W3C HTML4 по умолчанию:
Html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre { display: block; unicode-bidi: embed } li { display: list-item } head { display: none } table { display: table } tr { display: table-row } thead { display: table-header-group } tbody { display: table-row-group } tfoot { display: table-footer-group } col { display: table-column } colgroup { display: table-column-group } td, th { display: table-cell } caption { display: table-caption } th { font-weight: bolder; text-align: center } caption { text-align: center } body { margin: 8px } h1 { font-size: 2em; margin: .67em 0 } h2 { font-size: 1.5em; margin: .75em 0 } h3 { font-size: 1.17em; margin: .83em 0 } h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu { margin: 1.12em 0 } h5 { font-size: .83em; margin: 1.5em 0 } h6 { font-size: .75em; margin: 1.67em 0 } h1, h2, h3, h4, h5, h6, b, strong { font-weight: bolder } blockquote { margin-left: 40px; margin-right: 40px } i, cite, em, var, address { font-style: italic } pre, tt, code, kbd, samp { font-family: monospace } pre { white-space: pre } button, textarea, input, select { display: inline-block } big { font-size: 1.17em } small, sub, sup { font-size: .83em } sub { vertical-align: sub } sup { vertical-align: super } table { border-spacing: 2px; } thead, tbody, tfoot { vertical-align: middle } td, th, tr { vertical-align: inherit } s, strike, del { text-decoration: line-through } hr { border: 1px inset } ol, ul, dir, menu, dd { margin-left: 40px } ol { list-style-type: decimal } ol ul, ul ol, ul ul, ol ol { margin-top: 0; margin-bottom: 0 } u, ins { text-decoration: underline } br:before { content: "\A"; white-space: pre-line } center { text-align: center } :link, :visited { text-decoration: underline } :focus { outline: thin dotted invert } /* Begin bidirectionality settings (do not change) */ BDO { direction: ltr; unicode-bidi: bidi-override } BDO { direction: rtl; unicode-bidi: bidi-override } * { direction: ltr; unicode-bidi: embed } * { direction: rtl; unicode-bidi: embed } @media print { h1 { page-break-before: always } h1, h2, h3, h4, h5, h6 { page-break-after: avoid } ul, ol, dl { page-break-before: avoid } }
По определению разработка файла стилей предполагает задание свойствам CSS новых значений. Сложные файлы стилей со временем дорастают до того момента, когда значения CSS нужно удалить полностью, т. е., сбросить на их значения по умолчанию. В некоторых случаях эти значения по умолчанию хорошо известны и легко запоминаются, но не для всех свойств это верно. К счастью, современные возможности CSS предоставляют нам простой путь для сброса значений свойств.
Сброс настроек
Предположим, что Вы задали изображениям свойство всплытия влево:
Img { float : left ; }
После этого для изображений в особых случаях, например, для тех, у которых есть класс.recall, нужно задать отсутствие всплытия, но Вы не можете вспомнить, как именно записывается это свойство.
Другими словами, Вы знаете, что по умолчанию всплытие отсутствует, но Вы не помните, как задать отсутствие всплытия. Вместо того, чтобы искать, как это записать, можно просто добавить следующую строку в таблицу стилей:
Img.recall { float : initial; }
Существует распространенное заблуждение, что значение по умолчанию сбрасывает значение свойства на первое значение, которое было задано этому свойству в файле стиле, или на значение по умолчанию в спецификации CSS. Но оба эти варианта не верны: применение значения по умолчанию сбрасывает свойство на его значение по умолчанию для браузера пользователя.
В большинстве случаев значение по умолчанию будет одним и тем же или близким для всех браузеров. Это значение особенно полезно в следующих ситуациях:
Примеры использования
Значение по умолчанию может использоваться, чтобы сбросить настройки цвета. Изначальный цвет текста в большинстве браузеров - черный, и код CSS ниже сбросит настройки цвета для элементов заголовков:
Body { color : hsl(333 , 50 % , 25 % ) ; } h1, h2, h3 { color : initial; }
Обратите внимание, что черный цвет не обязательно будет цветом по умолчанию, так как это значение зависит от браузеров и, в конечном счете, от самих пользователей. Подобным образом следующая запись:
Aside { font-family : initial; }
даст разные результаты в разных браузерах, и шрифт на выходе не обязательно будет Times New Roman, так как у разных браузеров могут быть разные шрифты по умолчанию.
Есть несколько других вариантов применения для значения по умолчанию:
Сброс значения z-index у элемента на значение по умолчанию.
Сброс значений внешних отступов и трансформаций на их значения по умолчанию.
Ограничения использования
Одна из основных причин довольно редкого использования значения по умолчанию CSS – полное отсутствие его поддержки в браузере Internet Explorer, хотя в других браузерах оно поддерживается уже много лет. Однако браузер Edge поддерживает это значение, так что, вероятно, значение по умолчанию будет чаще появляться в файлах стилей в будущем.
Перевод — Дежурка
Данная статья - первая из цикла на тему укрощения 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. Опирайтесь на собственные принципы и собственный стиль.
Чтобы помочь вам правильно сделать выбор, приведу ещё пару ссылок:
- 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 без изменений».