Войти
RSS-подписка
Читать в ЖЖ
Яndex-Лента
В Google Reader
Известный веб-стандартист и гуру CSS, Eric Meyer, описал вторую версию стилей, обнуляющих дефолтные значения отступов, рамок, размеров шрифтов и т.д. для HTML-элементов, существенно облегчающих начало работы над сайтом.
Вот они, собственно:
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,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
background: transparent;
}
/* Не забываем описать стили для :focus! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* Для таблиц все еще надо прописывать 'cellspacing="0"' в коде */
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}С некоторыми из этих правил можно поспорить, да они и не претендуют на универсальность, но в любом случае более полно и четко задают значения для элементов, чем широко используемое * {margin:0; padding:0;}.
Естественно, что не стоит бездумно вставлять эти стили в каждый файл. Можно и нужно видоизменять их в соответствии со своими предпочтениями и нуждами, особенно то что касается свойств background и color .
Для тех, кто спросит зачем это вобще надо скажу, что все браузеры имеют те или иные дефолтные значения для отображения HTML-элементов, но не для всех браузеров эти значения одинаковы. На пример списки (ul) в некоторых браузерах отображаются с использованием margin, а в некоторых с помощью padding. И таких примеров не мало. Кроме того, существуют еще и другие дефолтные значения, кроме отступов как то, высота строки, размер шрифта, рамки…
Я думаю что если попытаться озвучить основную мысль обнуления дефолтных значений, то получится что-то вроде:
- Не оставляйте браузеру возможности отображать элементы интерфейса так как этого “хочется” ему - описывайте стили сами!
Upd. Ресет обновился
Загрузка ...
Ни фига себе. Даже представить не мог, что столько кода нужно. Я довольствуюсь * {margin:0; padding:0;}
Комментарий by Slaff — Май 2, 2007 @ 6:27 pm | Цитировать
Slaff
я обычно тоже, со следующего сайта попробую “по-эрикмееровски”
Думаю так все же правильнее.
Комментарий by neutrino — Май 2, 2007 @ 8:32 pm | Цитировать
* {margin:0; padding:0;} - НАШ ВЫБОР!
Комментарий by Number One — Май 2, 2007 @ 10:09 pm | Цитировать
Ггг
Капиталистические выкрутасы не пройдут!
Комментарий by neutrino — Май 2, 2007 @ 10:27 pm | Цитировать
когда же наконец cellspacing=”0″ внесут в CSS?
Комментарий by angelZ — Май 3, 2007 @ 7:11 am | Цитировать
Как раз вчера сидел и матерился по этому поводу, когда надо было добраться до таблицы, которая генерируется самостоятельно..
Комментарий by neutrino — Май 3, 2007 @ 9:34 am | Цитировать
* {margin: 0; padding: 0;} плохо не потому что “не модно”, а по совершенно конкретной причине: оно убирает дефолтные отступы у кнопок и текстовых полей. А тем самым, что уж совсем уродливо, отключает им системный вид и заставляет дизайнера придумывать свой собственный вид элементам управления. Правда надо сказать, что многие дизайнеры от этого до сих пор в восторге :-/
Комментарий by Иван Сагалаев — Май 3, 2007 @ 11:04 am | Цитировать
Многим дизайнерам к сожалению наплевать на все кроме собственного эго. Я частенько доделываю за дизайнера работу, особенно во всем что связано с юзабилити…
Комментарий by neutrino — Май 3, 2007 @ 11:07 am | Цитировать
Клево, спасибо.
Комментарий by burkanov — Май 3, 2007 @ 10:53 pm | Цитировать
Зачем, если указан border-collapse:collapse?
Комментарий by kost — Май 6, 2007 @ 5:24 pm | Цитировать
2kost
Потому что указывая border-collapse ты указываешь поведение “рамок” ячеек, а к отступу это отношения не имеет.
Комментарий by neutrino — Май 6, 2007 @ 9:17 pm | Цитировать
классно! уже попробовал!
Комментарий by Финист — Май 7, 2007 @ 11:38 am | Цитировать
td {padding: 0px} делает именно это.
Комментарий by Del'ka — Май 10, 2007 @ 7:12 pm | Цитировать
Del’ka
Не согласен.
Комментарий by neutrino — Май 10, 2007 @ 8:13 pm | Цитировать
border-collapse:collapse;
)
Комментарий by afreaka — Август 11, 2007 @ 3:07 pm | Цитировать
Непонятен восторг собравшихся, а также повальное увлечение полного обнуления всего и вся. Во-первых, проблемы с элементами форм, во-вторых, все списки нужно переписать и учесть заново, в-третьих, зачем размер для заголовков весь одинаковый? Зачем указывать inherit? Зачем все эти обнуления для строчных элементов? Думайте головой, ребята. Не копируйте бездумно чужой код.
Комментарий by 111 — Октябрь 24, 2007 @ 7:10 pm | Цитировать
td {padding: 0px} делает именно это.
Именно это делает margin, а не padding
Комментарий by Shoorick — Ноябрь 30, 2007 @ 12:00 pm | Цитировать
Про то, что нужно думать не жопой - это ты правильно подметил, а вот твои эти “проблемы” - это проблемы для чайников.
Все это нужно для одинакового отображения страницы во всех браузерах, ибо они (браузеры) все имеют разные дефолтовые значения для стандартных элементов. Мы же верстаем для всех браузеров, и хотим видет сайты в них одинаково?
Дизайнер продумывает оформление - верстальщик его реализует.
Сначала все нафик сбрасываем, потом задаем свое, иначе никак, иначе получиться гомно, причем везде разного цвета и запаха (может, конечно, и не полное, но оно).
Резюме: reset.css - обязателен к применению.
Админу сайта: Пирдатый сайт, полезный, только седня наткнулся… =) Только вот нафик “мыло” в комментах обязатльное поле? (лучше не надо…)
Комментарий by Deflate_ — Декабрь 18, 2007 @ 12:11 am | Цитировать
Deflate_, спасибо, только “пирдатый” звучит двусмысленно
А мэйл нужен для того, чтобы ты мог получать уведомления, на пример
Комментарий by neutrino — Декабрь 18, 2007 @ 1:01 am | Цитировать