Reset CSS
Написал свой Reset, который буду использовать в web-проектах. Конечно по мере исследований он будет дополняться. Раньше использовал известный ресет Эрика Мейера.
Итак:
html,body,address,blockquote,div,p,pre,h1,h2,h3,h4,h5,h6,hr, /* блочные элементы */
dd,dl,dt,ul,ol,li, /* списки */
a,abbr,acronym,b,big,br,cite,code,del,dfn,em,i, /* строчные элементы */
ins,kbd,q,samp,small,span,strong,sub,sup,tt,var, /* строчные элементы */
img,object, /* картинки и объекты */
caption,table,tbody,td,tfoot,th,thead,tr, /* табличные элементы */
input,textarea,select,button,form,fieldset,legend,label, /* элементы формы */
u,font,s,center,dir,menu,strike,xmp /* устаревшие элементы */
{
margin: 0;
padding: 0;
vertical-align: baseline;
text-align: left;
text-indent: 0;
font: normal 13px/20px "Lucida Grande","Lucida Sans Unicode",Lucida,arial,sans-serif;
color: black;
text-decoration: none;
list-style-type: none;
}
Ну это стандартно, частично взято у Эрика. Перечисляются все возможные тэги. Первые пять строчек, я думаю понятны.
Шрифт я указываю явный, причём в пикселях. Я никогда не использовал em или проценты и долго терзал себя мыслью, что бедные, несчастные пользователи IE6 не смогут увеличить размер шрифта, а я такой нехороший не даю им такой возможности.
С некоторых пор я перестал комплексовать и больше не волнуюсь за пользователей IE6. Пусть сами за себя волнуются. Начнём с того, что если пользователи Недобраузера не могут поставить себе другой, более удобный и современный браузер, то я сомневаюсь в том, что они умеют в нём менять размер шрифта. Они будут щуриться, придвигаться поближе к монитору. Тем более, что в IE6 для этого нет горячих клавиш.
Совсем мои волнения угасли после прочтения статьи Setting Type on the Web to a Baseline Grid, а точнее её перевода Базовая сетка в веб дизайне.
At some point as designers we have to strike a balance between creating pixel-perfect layouts and infinitely flexible ones. When you get down to it, resizable text is primarily an accessibility feature, not a design feature. Ideally it’s something that should be provided by the browser, no matter how the page is built, and in modern browsers it is. As long as all your content is readable and accessible at all sizes, it’s not necessarily true that the design must maintain integrity as you scale.
И, собственно, перевод:
С другой точки зрения как дизайнеры мы должны стремиться к балансу между четкой вплоть до пикселя разметкой, и бесконечной гибкостью. Изменяемый размер шрифтов это элемент аксессибилити, а не дизайна, в идеале он должен поддерживаться браузером, не зависимо от того, как сделана страница, и многие современные браузеры так и поступают.
Использование шрифта Lucida Grande обусловленно переходом на MacOS и прочтением серии статей о веб-типографике. Не волнуйтесь в IE6 он тоже замечательно отображается, правда только если размер больше 11px, ведь IE6 не умеет сглаживать шрифты, если это не включено для всей системы.
Lucida Sans Unicode — стандартный шрифт в Windows, который особо не используется, но по характеристикам схож с Lucida Grande. Затем идёт nix-овая версия Lucida. Ну а в случае если все три шрифта в системе не найдены, их заменит Arial или любой другой шрифт без засечек.
На самом деле, этот пункт самый настраиваемый в зависимости от проекта.
Идём дальше.
applet,iframe,embed {
display: none;
}
Убираю с глаз долой устаревшие и нестандартные элементы.
hr,img,object {
border: 0;
}
Границу убираю только у приведённых элементов. Элементы формы я, как видите, не трогаю, поскольку лучше все контролы оставить родными для браузера, чем устраивать на сайте винегрет. Например, поля ввода и кнопки можно стилизовать под сайт, а radio, checkbox, select, textarea, не получится. Если нужно стилизовать, например, поле для поиска, то лучше с ним работать отдельно.
input,button{
overflow: visible;
}
Убрали лишние внутренние отступы у кнопок в IE.
input,select,button {
vertical-align: middle;
}
Это сделано для того, чтобы все элементы формы, располагались по центру строки, а не скакали в разных браузерах на разных уровнях.
textarea {
vertical-align: top;
}
А, поскольку высота textarea обычно больше одной строки, то пусть лучше он позиционируется по верху строки, тогда лейбл для этого поля всегда будет сверху.
select[size]{
vertical-align: top;
}
select[size="1"] {
vertical-align: middle;
}
А вот здесь применена небольшая хитрость. Поскольку select может быть как высотой в одну строку, так и больше, то нужно всем селектам имеющим атрибут size установить вертикальное позиционирование по верху. Ну а если какой-то селект имеет атрибут size, но его значение равно 1, т. е. его высота будет равна строке, то я возвращаю ему позиционирование посередине. К сожалению, в IE6 это не работает.
fieldset legend {
*margin-left: -7px;
}
Нет я не использую хаки, просто для наглядности и чтоб покороче. Вставляйте в свой IE6-7.css (наверняка что-то подобное у вас есть) и инклудируйте с помощью Conditional Comments. У IE8 какое-то странное отображение legend, так что для него я ничего не делал.
Вообще у IE8 какое-то своё представление о vertical-align: middle для элементов формы. Такое ощущение, что по центру строки позиционируется базовая линия элемента формы, а не весь элемент.
caption,td,th,tr {
vertical-align: top;
}
table {
border-collapse: collapse;
}
Здесь думаю понятно.
optgroup {
color: black;
background: white;
font-style: normal;
}
optgroup option {
padding-left: 22px;
}
При использовании optgroup в Опере, почему-то у него чёрный фон и белые буквы. Исправляем этот бред.
Убрать курсивное начертание удаётся только у Firefox. Это единственный браузер с настраиваемыми шрифтами и отступами в optgroup. Соответственно только для Firefox будет работать отступ в 22px (больше всего похожий на отступ в других браузерах).
hr {
color: black;
background-color: black;
height: 1px;
margin: 7px 0;
*margin: 0;
}
Об этом я писал в предыдущей статье.
ol li, ul li{
vertical-align: bottom;
}
Заранее исправляем баг в IE если внутри элементов списка будут содержаться элементы с «display: block».
ol li{
list-style-type: decimal;
}
ul li{
list-style-type: disc;
}
Тоже понятно.
q { quotes: '\00AB' '\00BB' '\201E' '\201C'; }
q:before { content: '\00AB'; }
q:after { content: '\00BB'; }
q q:before { content: '\201E'; }
q q:after { content: '\201C'; }
Русские кавычки внешние и внутренние. Причём в дублированном виде, поскольку Safari перезаписывает quotes, с помощью q:before и q:after.
sub, sup{
position: relative;
font-size: 11px;
}
sub{
top: 5px;
}
sup{
top: -5px;
}
Этот метод позиционирования верхнего и нижнего индексов, на мой взгляд наиболее удобен, поскольку не будет происходить сдвига верхней и нижней строки.
Всё больше и больше убеждаюсь, что для каждого верстальщика и для каждого проекта reset будет свой. Что-то можно взять за основу, но по ходу дела и с накоплением опыта всё будет изменяться.
]]>quard]]>Интересно, надо будет попробовать использовать на досуге
А можешь пояснить насчет кавычек русских? Что нам дает код ?
»]]>pepelsbey]]>> ибо селектор «*» IE6 не понимает
Вот это новость о_0, вообще-то отлично понимает.
»]]>Dimox]]>Я с тобой!
»]]>Никита]]>quard, при использовании тэгов <q> для обозначения коротких цитат в тексте, эти цитаты атоматически заключаются в кавычки «ёлочки», а внутренние — в „лапки“.
pepelsbey, ох да, чего это я. Поправил. Видимо где-то глюк с лишней запятой вылез и я удивился.
»]]>pepelsbey]]>— Про фиксированный размер шрифта для 60% рынка я умолчу.
> Тем более, что в IE6 для этого нет горячих клавиш
Ctlr+Scroll, это даже очевиднее, чем Ctrl++, ибо мышка всегда под рукой.
— Рамку будет полезно отключать ещё и для FIELDSET.
А ещё мне кажется, что это никакой не reset.css, а скорее base.css, потому как он не просто сбрасывает умолчания, а записывает предпочтения.
»]]>koko]]>A tjipa eto ne uhut6ajet skorost parsirovanija? Kakto kazetsa, 4to kazdomu projektu nada lut6e normalno ot nula CSS delatj. Tjipo – ne vse projekti soderzit vse elementi htmla.
»]]>Никита]]>pepelsbey,
Не забывай уточнять для какого рынка.
кто о скролле знает? Опять же только те, кто уже перешёл на другие браузеры. Разве в меню рядом с Larger, Largest это написано? А Help тем более никто не читает.
Рамку для fieldset-a как раз таки отключать не стоит. В windows привыкли к её закруглённым углам, и с родными контролами она смотрится куда гармоничней, чем еслибы была угловатой.
Называть можно как угодно, файл содержит много исправлений и приведения к более-менее похожему виду всех элементов во всех браузерах.
koko, каким образом это может ухудшить скорость парсирования? Этот ресет как-раз и служит для того, чтобы во всех браузерах свести CSS к нулю.
»]]>Reset.css | IнTересности]]>[...] статью Никиты Селецкого – Reset CSS – решил сделать небольшую подборочку различных [...]
»]]>koko]]>Nu v tom to i dolo, 4to u browseroh jest svoj default. Kazdij raz, kagda nada delatj “reset”, brovzeru nado proiti po vsem atributam!
»]]>Никита]]>koko, предлагаю вам протестировать рендеринг и выложить результаты и тогда посмотрим. Но css — это не javascript тут экономия времени загрузки на столько мизерная, что не стоит нашего с вами внимания.
»]]>Колян]]>ff и opera не понимают object. для флеша надо использовать именно embed.
»]]>Никита]]>Колян, и Опера и FF понимают Object, только использовать его нужно по рекомендации W3C. Это IE его вставляет как ActiveX объект, потому он в FF и Opera не работает.
»]]>Выпуск #349 — Тут Хумора.NET]]>[...] #349 Reset CSS. Полезнейшая штука — сброс всех (или почти всех) CSS [...]
»]]>Oleg]]>Часто читаю Ваш журнал.
Очень интересные и полезные статьи у Вас.
Спасибо!
Но по поводу этой фразы
Вы пишете:
“С некоторых пор я перестал комплексовать и больше не волнуюсь за пользователей IE6. Пусть сами за себя волнуются…”
Меня одолевают сомнения.
Не всегда пользователь может свободно перейти на IE7.
На многих предприятиях или учреждениях где есть интернет не всегда это можно сделать.
Администратор не даёт возможность установить IE7.
Для примера, сайт http://www.times.lv
Предполагаю, посетители этого ресурса немного отличаются от других пользователей.
http://extremetracking.com/open;sys?login=wwwoland – более 53% используют IE6.
Опять же Якоб Нильсен писал:
“…не отпугивайте своих клиентов только потому, что они предпочитают работать на другой платформе.”
Вспомнил сайт http://www.bikbok.com/
Года 3 назад, он словно говорил своим видом: “Если у Вас нет монитора в 20 дюймов, низкая скорость подключения, то и в нашем магазине Вам не фиг делать.”
Возможно уже через год или два, никто и не вспомнит, что был IE6?
»]]>Никита]]>Oleg, конечно вы правы. Но почему, например, все новые игры создаются с замахом на современные мощные машины и даже на те, которые ещё не находятся в свободной продаже? Почему Microsoft и Apple отказываются от поддержки старых операционных систем? Почему программы разрабатываются для новых операционных систем, а, например для Windows 2000 программы уже почти не пишут? Так почему же веб-разработчики должны до сих пор поддерживать устаревший браузер?
Якоб Нильсен писал о другой платформе имея в виду новые Firefox, Opera и Safari, а не устаревший IE6. И это не предпочтение, я сомневаюсь что большая часть из пользователей IE6 им пользуются потому что он им нравится. Просто они не знают о существовании других браузеров или имеют проблемы с установкой других браузеров. Амины тоже хороши, как правило большинство из них параноики безопасности и любые нововведения воспринимают в штыки. Работает — и слава Богу, не надо трогать! ))
Ну а bikbok это вообще мусорник.
»]]>Артём Курапов]]>В самом первом сбрасывании..
color: black;
Помоему это не очень полезно, потому что цвета в таком случае не наследуются и их надо явно задавать.
Допустим есть конструкция
li div
li div a
li div span
Тогда вместо того что-бы на самый первый элемент поставить цвет шрифта, надо его проставлять для всех вложенных элементов. Или я чего-то в css незнаю и есть какие-то хитрые способы селекторов типа li div * * (это я сейчас придумал)?
»]]>Никита]]>Во-первых, если писать о наследовании в CSS, то у IE6 c этим большие проблемы (я имею в виду значение inherit). А во-вторых, как ты уже упомянул, решается это просто:
li * { color: white; }
Повторять звёздочки не нужно, так как пробел символизирует бесконечную вложенность элементов.
»]]>PaLyCH]]>Мдя, к сожалению нельзя отказывать пока от ИЕ6 и их пользователей.
»Reset код конечно хорошо, но не всегда удобен, по причине как всегда кроссбраузерности
]]>Никита]]>Никто не отказывается от пользователей IE6. Reset кроссбраузерный и поддерживает IE6. Здесь только ограничение в изменении пользователем размера шрифта. Если хотите — замените значения в пикселях на em или % и всё.
»]]>Octane]]>Ваш способ удаления лишних отступов при использовании <sub> и <sup> не работает во всех браузерах одинаково (например Opera 9.5b2).
»Немного поэкспериментировав, получил следующий вариант:
CSS:
body {font : 14px/18px "Trebuchet MS", Verdana, Helvetica, sans-serif;
}
sub, sup {
position : relative;
display : inline-block;
font-size : 11px;
line-height : 11px;
}
sub {
top : 5px;
vertical-align : middle;
}
sup {
top : -2px;
margin-top : -11px;
}
100% одинакового отображения не удалось получить, но в таком варианте смотрится наиболее приемлимо.
]]>Octane]]>Блин не заметил сразу :-/ при использовании <sub> появляется отступ размером 1px, не подскажите как исправить?
»]]>Никита]]>Octane, свой ресет я проверял в Opera 9.27. Всё было в порядке. На бету я не ориентируюсь.
»]]>andrey.p]]>Вот это — жесть:
input, button {
overflow: visible;
}
Вы использовали хоть раз свой ресет? или может быть вы не пробовали ввести что-нибудь в поле ввода?
»]]>Никита]]>andrey.p, всё было опробованно. Что не так? Это сделано для того чтобы в IE у кнопок внутри не было лишних расстояний до текста слева и справа. На поля ввода как это влияет?
»]]>andrey.p]]>Так и не попробовали, значит
Просто, если ввести в поле ввода что-либо большее по длине его самого, то поле начинает “расти”, подстраиваясь под текст. Логично даже с одной стороны, но внешне — точно очень неприятно.
А с кнопкой, да — лишние отступы нам не нужны. Но выбирая из этих двух зол, я бы наверное оставил отступы… либо надо класс кнопкам задавать.
»]]>Никита]]>andrey.p, обычно я задаю ширину поля ввода, поэтому с такими проблемами не сталкиваюсь. В любом случае, чтобы для IE6 настроить внешний вид полей ввода отличных от внешнего вида кнопок и других элементов нужно задавать каждому типу поля свой класс. Из двух зол выбирать ничего не нужно, нужно сделать так, чтобы всё работала так как задумано.
»]]>andrey.p]]>угу.. действительно, все равно классы придется назначать
»]]>Vladimir]]>Никита, а в IE6 border: 0 для object помогает? У меня всё равно отображается дурацкая рамка
И скроллинг 
<object type=”text/html” data=”include.html”></object>
»]]>Формы и размеры – Искариот – Блог о веб-разработке]]>[...] Дополнения Никиты Селецкого [...]
»]]>40a]]>Добавь:
»img {vertical-align:top;} убирает отступ в IE6
table {border-spacing: 0;}
abbr, acronym {cursor: help;border-bottom: 1px dotted #999;}
Не логичнее ли оформлять цитаты blockquote q вместо q q ?
]]>Никита]]>Vladimir, как не глупо это звучит, но отображение рамки и скроллинга в IE зависит от Doctype и xml деклараций. http://xhtml.ru/2007/09/06/no-iframe-use-object/
»]]>Никита]]>40a, за
»img {vertical-align:top;} убирает отступ в IE6
table {border-spacing: 0;}
спасибо.
А вот насчет аббревиатур и акронимов это как кому.
Насчет цитат — не логичнее. У этих двух элементов разное назначение. blockquote не будет иметь никаких кавычек, а по вашему внутренний q будет иметь кавычки «лапки», это не правильно.
]]>zhinzher]]>Я вообще перестал комплексовать и по поводу IE6 и по поводу использования таблиц для позиционирования элементов. Что то не могу разобраться с правильным заданием кавычек; ведь, если в самом коде будут стоять “” — в результате они и будут так выглядеть.
Что то от меня ускользает.
»]]>Никита]]>zhinzher, для элемента q, автоматическая расстановка кавычек используется только лишь для удобства. Ничего не мешает эти же кавычки вписать вручную.
»]]>zhinzher]]>Я почему то подумал, что можно средствами CSS заменять в тексте кавычки по умолчанию на правильные. В принцие не понимаю почему в русской раскладке на клавиатуре априори заложены неправильные кавычки, которыми пользоваться нельзя; если, конечно, вас интересуют правила русского языка.
»]]>Никита]]>zhinzher, под маком есть. А вообще клавиатура не предназначена для типографской работы. Больше для программирования. В общем рекомендую либо установить типографскую раскладку Ильи Бирмана, либо сделать себе раскладку с помощью этой штуки http://www.microsoft.com/downl.....laylang=en
»]]>zhinzher]]>А причем тут типографии или программирование? Клавиатура русская, кавычки должны соответствовать языку.
Раскладку Бримана поставил; пока смущает, что русские кавычки находятся в английской раскладке. Надо было русские кавычки делать в русской, а английские (точнее, американские) в англоязычной раскладке.
В итоге если мне нужно ставить кавычки в русском языке мне необходимо каждый раз переключаться в английский.
Более того, сама раскладка живет своей жизнью, порой, отказываясь срабатывать. Подозреваю что с Punto Switcher она не дружит.
p.s. С названием «типографская» можно поспорить.
»]]>DTP Craft » Blog Archive » Контроль раскладок клавиатуры для Windows]]>[...] По совету умных товарищей обратил внимание на следующее программное обеспечение. Начнем с «родного» корректора раскладок клавиатуры от Microsoft. [...]
»]]>Никита]]>zhinzher, а при том, что стандартная клавиатура никогда не была предназначена для оформления текста. Поэтому стандартно ты их на клавиатуре и не видишь. Ты кавычки в русской раскладке ставишь одной комбинацией — Shift + 2. А открывающая и закрывающая кавычка в русском языке отличаются. В общем в Майкрософт решили не заморачиваться, а только для Ворда сделать автозамену кавычек в разных раскладках.
Поставь русскую раскладку Ильи Бирмана ))
»Раскладка не живёт своей жизнью, просто вставка таких символов работает только в программах поддерживающих Юникод.
]]>zhinzher]]>Да поставил и уже написал о ней. В целом, хорошая программа.
»Благодарю за просвещение.
]]>ms1185]]>Пойдет, спасибо)))
»