В этой статье мы поговорим о сбросе стилей и рассмотрим пример создания такого файла 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;
}Вы можете коппировать любой вышеуказанный код для личного использования, но если будете использовать его в своих статьях - ставьте ссылку на источник.
Добавить комментарий
Авторизоваться с помощью: