Глобальные сбросы css

12
Shamrays
На сайте с 02.12.2009
Offline
9
1081

Хотел бы проконсультироваться у знающих и умеющих.

Как правило в каждом браузере для каждого элемента есть дефолтные(по умолчанию) стили.

Например для списков (<ul><li>) это margin-left. Причем дефолты эти у каждого браузера свои.

По-этому принято использовать глобальные сбросы, что-бы как-бы "уровнять" или сбросить стили всех браузеров в один стиль (как-то так :))

* {

margin: 0;
padding: 0;
}

Недавно встретил что многие используют и другие конструкции на подобии Yahoo! UI Library и прочее.

Собственно вопрос:

Какой глобальный сброс лучше использовать и почему?

Грамотная верстка (/ru/forum/504917)
JTRTA
На сайте с 06.07.2008
Offline
25
#1

если уж по полной сбрасывать то, как то так

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,
b, u, i, center,
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-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

:focus {
outline: 0;
}

ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

table {
border-collapse: collapse;
border-spacing: 0;
}
Дизайн /ru/forum/493415 (/ru/forum/493415) Верстка от 15$ /ru/forum/509339 (/ru/forum/509339) Сайты под ключ aiogino.studio@gmail.com icq: 460146806
Olldman
На сайте с 21.04.2010
Offline
79
#2

А стОит ли перечислять все элементы для обнуления отступов? Достаточно указать обнуление только в универсальном селекторе(*), т.к. это будет распространяться на все элементы html.

С элементом <ul> тоже не все так - очень часто заказчики жаловались на то, что при вставке списка у них куда-то пропадали маркеры, так что list-style:none; для списков делать не всегда нужно, т.к. запросы могут быть разные (если только вы делаете это для себя),

а вот list-style-position:inside; я применяю, дабы маркеры не "вылазили".

собсно мой вариант:

*{margin:0px;padding:0px;border:none;outline:none;}

html{height:100%;}
body{width:1002px;margin:0px auto;min-height:100%;position:relative;font:62.5% Verdana, Arial, Helvetica, sans-serif;}
ul, ol{list-style-position:inside;}
table{border-collapse:collapse;}

в остальном же все зависит от конкретного заказа.

TA
На сайте с 12.06.2009
Offline
116
TiA
#3
Olldman:
А стОит ли перечислять все элементы для обнуления отступов?

Здесь мнения расходятся. Я в своей практике выполняю сброс только для элементов, которым это нужно и которые я планирую использовать.

Профессиональная верстка и разработка сайтов на WordPress (http://www.maultalk.com/topic139110s0.html)
JTRTA
На сайте с 06.07.2008
Offline
25
#4
Olldman:
А стОит ли перечислять все элементы для обнуления отступов?

когда только начинал верстать тоже обнулял через * , но были какие то проблемы(теперь уже не помню какие, кажется сафари не совсем правильно отрабатывал)

маркеры, так что list-style:none; для списков делать не всегда нужно, т.к. запросы могут быть разные (если только вы делаете это для себя),

ну для блоков с контентом стоит прописать стили, стандартные все равно кривые....

I
На сайте с 22.12.2006
Offline
33
Ink
#5

Сброс типа * {} влияет и на такие элементы, как <title>, так что могут быть неприятные сюрпризы :)

vandamme
На сайте с 30.11.2008
Offline
675
#6

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,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0; /* нулевая граница */
padding: 0; /* нулевые отступы */
border: 0; /* больше всего для картинок в IE6 */
outline: 0; /* точечная граница вокруг ссылок в Firefox */
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul, li {
list-style: none; /* маркеры без кружочков */
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
:focus {
outline: 0; /* Firefox выделяет рамкой из точек все ссылки при нажатии */
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse; /* cellspacing="0" */
border-spacing: 0;
}

Взял отсюда http://arniwebdesign.com/css-reset-sbros-css-stilej/

не забываем про

ol, ul, li {

list-style: none; /* маркеры без кружочков */

}

Olldman
На сайте с 21.04.2010
Offline
79
#7
Здесь мнения расходятся. Я в своей практике выполняю сброс только для элементов, которым это нужно и которые я планирую использовать.

- В таком случае предложенный мной вариант вам не помешает.

когда только начинал верстать тоже обнулял через * , но были какие то проблемы(теперь уже не помню какие, кажется сафари не совсем правильно отрабатывал)

- вспомните пожалуйста и приведите пример, будет полезно, если это действительно так.

ну для блоков с контентом стоит прописать стили, стандартные все равно кривые....

- какие стандартные стили для блоков вы имеете ввиду? Если это и есть отступы, то мы и говорим об обнулении.

Сброс типа * {} влияет и на такие элементы, как <title>, так что могут быть неприятные сюрпризы

- например? Где, кроме head вы применяете <title>? И как, находясь в служебной области, они могут влиять на отображение браузером страницы?

vandamme - нет комментариев.

Shamrays
На сайте с 02.12.2009
Offline
9
#8

Ещё я слышал мнение, что если указывать для сброса универсальный селектор, тобишь

* {

.....
}

То это должно замедлить рендеринг страницы. Т.к. обрабатываться будут все элементы страницы.

vandamme
На сайте с 30.11.2008
Offline
675
#9

Shamrays, на сколько? на 5 миллисекунд?

кстати это уже писали

LeonCrab
На сайте с 30.01.2007
Offline
189
#10

Поищите в сети информацию по ключам "Reset Reloaded", "CSS Reset" и русским интерпретациям типа "CSS-ризет", "CSS-ресет" и т.д.

Вот интересная статья (eng): http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Помощь в создании сайтов на MODX, Laravel, Slim. В личку. Хостинг, которому я доверяю (https://beget.com/p181956).
12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий