Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 102
Отличное изложение, спасибо.
Немного ламерский вопрос: по большому счету, приведенные примеры css reset-ов оказывают одно и то же действие и дают одинаковый результат? Мне, как не «css-маньяку» и человеку, который верстает время от времени и совсем не профессионально стоит «загоняться» по вопросу, какой css reset выбирать?
Немного ламерский вопрос: по большому счету, приведенные примеры css reset-ов оказывают одно и то же действие и дают одинаковый результат? Мне, как не «css-маньяку» и человеку, который верстает время от времени и совсем не профессионально стоит «загоняться» по вопросу, какой css reset выбирать?
лучший css reset — свой.
В любом случае сборосив стили, вам нужно будет установить свои.
Так точку отсчёта можете взять framework от banzalik — он неплох, хотя на мой взгляд имеет перегиб в сторону «привести умолчания к общему виду», а не выставить все умолчания по своему. В любом случае — нормальная точка отсчёта.
В любом случае сборосив стили, вам нужно будет установить свои.
Так точку отсчёта можете взять framework от banzalik — он неплох, хотя на мой взгляд имеет перегиб в сторону «привести умолчания к общему виду», а не выставить все умолчания по своему. В любом случае — нормальная точка отсчёта.
Сброс CSS от framework`a без Javascript`a работает некорректно, хотелось бы что-нибудь проще. Но вы правы в том, что лучший CSS reset всё-таки свой. По крайней мере знаешь, что где лежит, и как всё это работает. И мне очень понравилась идея использовать разные файлы для сброса и выставления базовых настроек.
Я тоже стараюсь избегать разных CSS — извращений, просто для каждого браузера пишу собственную CSS. Проблемы в основном возникают с IE 6.
Йенс очень умный мужик, но зачастую слишком радикален.
Что касается reset'ов, что касается подключения нескольких файлов стилей… или насчёт того же HTML 5. Почитать это стоит, но принимать за истину — вряд ли.
Что касается reset'ов, что касается подключения нескольких файлов стилей… или насчёт того же HTML 5. Почитать это стоит, но принимать за истину — вряд ли.
У меня тоже есть довод в пользу того чтобы по возможности полагаться на браузер и не усердствовать с определением всех стилей.
Простая ситуация — человек плохо видит или дальтоник. Для того чтобы комфортно браузить — он ставит свои стили отображения, что позволяют приличные браузеры. А ваш ресет забивает пользовательские стили.
ИМХО верстка должна позволять менять размеры шрифтов и прочее без ущерба дизайна страницы. Но для этого надо помнить что все люди разные — разные вкусы, разные возможности.
Например я ненавижу производителей разной техники и гугл за то, что они определяют страну из которой я пришел и без альтернатив предлагают мне национальный сайт. Я пока ни хрена не понимаю по-голландски, так уж случилось, что я сюда попал, и каждый выродок подсовывает мне сайт на голландском языке без возможности поменять язык.
Простая ситуация — человек плохо видит или дальтоник. Для того чтобы комфортно браузить — он ставит свои стили отображения, что позволяют приличные браузеры. А ваш ресет забивает пользовательские стили.
ИМХО верстка должна позволять менять размеры шрифтов и прочее без ущерба дизайна страницы. Но для этого надо помнить что все люди разные — разные вкусы, разные возможности.
Например я ненавижу производителей разной техники и гугл за то, что они определяют страну из которой я пришел и без альтернатив предлагают мне национальный сайт. Я пока ни хрена не понимаю по-голландски, так уж случилось, что я сюда попал, и каждый выродок подсовывает мне сайт на голландском языке без возможности поменять язык.
у меня в аккаунте гугла забит предпочитаемый интерфейс, выбраны предпочитаемые языки страничек ( голландского там нет), я ползуюсь английским гуглом ( у него есть ссылка на заглавной странице)
но это не всегда помогает, когда я запускаю поиск на каком-нибудь сайте, который пользует гугловский поиск, он все равно плюет на всё и выдает мне голландский интерфейс и голландские страницы в первую очередь.
Я уж молчу про другие сервисы ассоциированные с гуглом, например youtube предлагает мне зарегистрироваться и заполнить анкету только на голландском, без вариантов.
но это не всегда помогает, когда я запускаю поиск на каком-нибудь сайте, который пользует гугловский поиск, он все равно плюет на всё и выдает мне голландский интерфейс и голландские страницы в первую очередь.
Я уж молчу про другие сервисы ассоциированные с гуглом, например youtube предлагает мне зарегистрироваться и заполнить анкету только на голландском, без вариантов.
Хотел бы узнать инфу из первых уст, так сказать. Как оно все-таки там, в Голландии, если еще живете? До сих пор сожалеете, что живете в Европе, или уже привыкли?)
когда я сожалел?
Амм… Ну как-бы фраза «так уж случилось, что я сюда попал» обычно подразумевает, что это не собственной воле. Типа «так получилось, что я могу поделать?».
это ложное впечатление, я попал сюда совершенно добровольно
Да я и знаю, что в страны такого рода попадают исключительно добровольно!) Просто фраза принесла недопонимание…
И все-таки, там лучше, или хорошо там, где нас нет все-таки?)
И все-таки, там лучше, или хорошо там, где нас нет все-таки?)
Персонально мне — лучше, десяткам знакомых русских-украинцев-белоруссов-казахов-литовцев-латышей и прочих бывших наших тоже. Кажется я только одного человека знаю, который вернулся в Россию по собственному желанию. Самое главное — тут можно просто честно жить и работать над реализацией своих жизненных целей.
Пользуюсь сбросом Эрика Мейерса и ничуть не жалею. Однако стоит заметить, что сброить стили и все — глупо. После этого, по-моему, необходимо написать еще типографические стили.
не знаю, я всегда пишу * {margin:0;padding:0} и никаких проблем не возникало.
После того как мне пришлось приводить в порядок проект над которым работал Снук, он перестал быть авторитетом для меня.
Сброс стилей полезен на ранних этапах верстки. Действительно экономит время и нервы.
Вот что касается окончательной версии, я думаю, что надо тщательнее готовить макеты, показывать все возможные элементы, а затем для всех для них задавать нужные свойства. Может, даже софтину специальную написать, которая будет сброс стилей превращать в приведение.
Вот что касается окончательной версии, я думаю, что надо тщательнее готовить макеты, показывать все возможные элементы, а затем для всех для них задавать нужные свойства. Может, даже софтину специальную написать, которая будет сброс стилей превращать в приведение.
Есть отличный фреймворк товарища banzalik. Им и пользуюсь обычно, когда так делаю.
Используйте отдельный CSS-документ для CSS Reset
Учитывая, к примеру, что я сбрасываю свойства как
* { border: none; font-style: normal; font-weight: normal; margin: 0; padding: 0; text-align: left; }
img { vertical-align: top; }
то выделять для этого отдельный файл не выглядит очень рациональным. Куда удобнее объединить его с базовым стилем.
* не работает в ие <= 6
Да ну.
Откуда у всех в головах этот бред про то, что в IE <=6 не работает универсальный селектор?
Он там РАБОТАЕТ! В этих браузерах просто есть ошибка парсера, при которой неправильно обрабатывается * html
Он там РАБОТАЕТ! В этих браузерах просто есть ошибка парсера, при которой неправильно обрабатывается * html
мм… а установить border потом для нужных элементов очень сложно? Вот тут некоторые (не будем показывать пальцем) картинки в ссылках границами выделяет. А я кто-то их об этом просил? А потом левая нога захочет у кого-нибудь ещё что-нибудь выделить как-нибудь… очень удобно…
>афаир, размеры шрифтов у таблиц по умолчанию отличаются от всего документа
И, собственно, что вы хотели этим сказать? Размер шрифта у меня в примере не указывается.
>афаир, размеры шрифтов у таблиц по умолчанию отличаются от всего документа
И, собственно, что вы хотели этим сказать? Размер шрифта у меня в примере не указывается.
Врят ли там есть, конечно, стандартный цвет на такое, это да. Но, вообще говоря, (хотя может мне это просто так не везло) большинство дизайнов мне попадлось как раз таки что бы со своими цветами фона/границ, и что б ещё там чего-нибудь «что бы былО»… Естественно, если нужны стандартные, то так делать не стоит.
А вот насчёт размера шрифта — я его не указываю, потому что задаю начальный размер в блоке html. т.е. если html { font-size: 3em; }, то и таблица внутри 3em будет. В IE6 тоже отображается как нужно. Я что-то упускаю?
А вот насчёт размера шрифта — я его не указываю, потому что задаю начальный размер в блоке html. т.е. если html { font-size: 3em; }, то и таблица внутри 3em будет. В IE6 тоже отображается как нужно. Я что-то упускаю?
еще тут отличный материал
если сбрасывать стили — нужно потом еще и потрудится написать свои. Например решение от Эрика Мейерса убирает и маркеры у списков и так далее. Потому что при наполнении в дальнейшем с помощью wysiwyg-редакторов контент-менеджер увидит текст вообще без форматирования.
Это надо написать нулевым пунктом.
*потому что = поэтому
ага, об этом надо написать в статье большим жирным шрифтом.
а то сейчас все бросятся стили сбрасывать, а после сдачи проекта контент-менеджер будет вбивать текст на страницы и матерится — что-ж такое — ни маркеров, ни отступов.
моё мнение — css reset должен быть одновременно и css-set'ом.
Глупо тратить с десятки килобайт, на то чтобы вначале всё обнулить, а потом уставновить заново. Возьми да сразу напиши нужные значения.
а то сейчас все бросятся стили сбрасывать, а после сдачи проекта контент-менеджер будет вбивать текст на страницы и матерится — что-ж такое — ни маркеров, ни отступов.
моё мнение — css reset должен быть одновременно и css-set'ом.
Глупо тратить с десятки килобайт, на то чтобы вначале всё обнулить, а потом уставновить заново. Возьми да сразу напиши нужные значения.
Я считаю, что толку мало от сбрасывания стилей. Где мне нужны нулевые отступы — я укажу. Если мне нужные особые отсупы у абзацев или у списков — укажу.
После CSS-reset мне приходится восстанавливать все свойства для элементов — указать, что
Сейчас приходится делать проект за горе-верстальщиками, которые обнулить — обнулили, а проставить стили для обнуленных элемнтов ума не хватило.
После CSS-reset мне приходится восстанавливать все свойства для элементов — указать, что
<strong> должен быть жирным, <em> — наклонным, у абзацев отступ и т.д. По-моему, это лишние заботы. Если мне понадобится вдруг сделать <strong> красным, а <em> — мигающим, я это напишу.Сейчас приходится делать проект за горе-верстальщиками, которые обнулить — обнулили, а проставить стили для обнуленных элемнтов ума не хватило.
поэтому пользоваться сбросом стилей нужно очень острожно. Сброс Мейерса я считаю можно использовать только для очень крупных проектов опытными командами, когда процесс разработки позволяет учесть и отладить все возможные проблемы. Для небольших проектов действительно в большинстве случаев достаточно * {margin:0;padding:0;} и еще нескольких правил. При этом опять же надо не забыть прописать их снова, например для списков.
А ведь когда-то strong не был жирным во всех браузерах. Вдруг не будет в каких-то новых? Хотя на это можно с чистой совестью наплевать. Так что, если судить по текущей ситуации — вы правы на 90%.
Гм.
Т.е. ситуация, в которой логичная HTML-разметка употребляется не только для содержимого документа (собственно, списки, параграфы и проч.) — это уже неважно?
Ну задолбался я всем спискам убирать list-style и margin, если мне нужно вывести меню при помощи списка. А в итоге, я и в контентной части сделаю списки с картиночными буллитами, где будет padding + background.
…т.е. у меня на сайте ни разу не будет использоваться margin и list-style, но я всё равно обязан их обнулять при описании каждого списка?
А не проще ли принять за истину тот факт, что у меня в руках _только логика документа и никаких браузерных предпочтений? И только в такой ситуации я буду использовать элементы не потому, что их как-то нарисовал производитель браузера, а потому, что они сюда логически подходят.
Идеальной я бы назвал ситуацию, в которой браузер подключает таблицу стилей по умолчанию только в том случае, если не было подгружено никакой авторской. Вот это по-настоящему! И не нужно никаких попыток «сделать во всех браузерах одинаково»…
Т.е. ситуация, в которой логичная HTML-разметка употребляется не только для содержимого документа (собственно, списки, параграфы и проч.) — это уже неважно?
Ну задолбался я всем спискам убирать list-style и margin, если мне нужно вывести меню при помощи списка. А в итоге, я и в контентной части сделаю списки с картиночными буллитами, где будет padding + background.
…т.е. у меня на сайте ни разу не будет использоваться margin и list-style, но я всё равно обязан их обнулять при описании каждого списка?
А не проще ли принять за истину тот факт, что у меня в руках _только логика документа и никаких браузерных предпочтений? И только в такой ситуации я буду использовать элементы не потому, что их как-то нарисовал производитель браузера, а потому, что они сюда логически подходят.
Идеальной я бы назвал ситуацию, в которой браузер подключает таблицу стилей по умолчанию только в том случае, если не было подгружено никакой авторской. Вот это по-настоящему! И не нужно никаких попыток «сделать во всех браузерах одинаково»…
Я против того, что обнулять всё, чтобы потом восстанавливать.
Я не призываю в каждом случае отдельно обнулять. Если вижу, что все списки — «нестандартные», то обнулю их всех.
***
Особенно сомнительным мне кажется
Я не призываю в каждом случае отдельно обнулять. Если вижу, что все списки — «нестандартные», то обнулю их всех.
***
Особенно сомнительным мне кажется
vertical-align:baseline для td и th, как это делается у Эрика Мейера.Дело в том, что чисто статистически, обнуление всего выгоднее, с точки зрения лишнего кода. Этот reset.css представляет из себя тот самый инструмент для приведения браузера к идеальному поведению, о котором я писал выше.
vertical-aign:baseline мне лично нравится — если все элементы расположены одинаково, проще сделать именно то, что нужно.
Ну, не кажется мне, что использование vertical-aign для надстрочны/подстрочных индексов — это удачный приём, ведь он разрывает строку. Мне по нраву position:relative, top:-.2em. А производителям браузеров всё равно, ведь дефолтные таблицы стилей — это махровая традиция.
Ну вот зачем формам отступ? А зачем группам полей (fieldset) кретинская рамка, куда совершенно некроссбраузерно встраивается legend?
И я снова обнуляю, обнуляю и копаюсь — кто что использует для отступов — кто margin, кто padding… И когда таких мелочей набирается вагон и тележка, большинство людей приходят к каким-то универсальным решениям. Которые, в частности, не дают ошибиться: нужно вывести крупный текст? Пожалуйста, оцени, какое место он занимает в структуре документа, да так и разметь. И не будет больше соблазна влепить туда подходящий по размеру шрифта H1 — ведь всё выглядит одинаково просто. И дальше, и больше — хочется привести десятки примеров.
В общем — дело царское, и если есть привычка/навыки верстать на основе дефолтных стилей, неприкосновенность которых никто не гарантирует, то пожалуйста. А если есть желание сделать шаг вперёд, задуматься об оптимизации — то стоит написать свой собственный универсальный сброс, ровно в тех границах, которые необходимы лично вам.
Я сам пользуюсь именно своей версией reset'а, но всё же на основе мейеровского.
vertical-aign:baseline мне лично нравится — если все элементы расположены одинаково, проще сделать именно то, что нужно.
Ну, не кажется мне, что использование vertical-aign для надстрочны/подстрочных индексов — это удачный приём, ведь он разрывает строку. Мне по нраву position:relative, top:-.2em. А производителям браузеров всё равно, ведь дефолтные таблицы стилей — это махровая традиция.
Ну вот зачем формам отступ? А зачем группам полей (fieldset) кретинская рамка, куда совершенно некроссбраузерно встраивается legend?
И я снова обнуляю, обнуляю и копаюсь — кто что использует для отступов — кто margin, кто padding… И когда таких мелочей набирается вагон и тележка, большинство людей приходят к каким-то универсальным решениям. Которые, в частности, не дают ошибиться: нужно вывести крупный текст? Пожалуйста, оцени, какое место он занимает в структуре документа, да так и разметь. И не будет больше соблазна влепить туда подходящий по размеру шрифта H1 — ведь всё выглядит одинаково просто. И дальше, и больше — хочется привести десятки примеров.
В общем — дело царское, и если есть привычка/навыки верстать на основе дефолтных стилей, неприкосновенность которых никто не гарантирует, то пожалуйста. А если есть желание сделать шаг вперёд, задуматься об оптимизации — то стоит написать свой собственный универсальный сброс, ровно в тех границах, которые необходимы лично вам.
Я сам пользуюсь именно своей версией reset'а, но всё же на основе мейеровского.
> Универсальный селектор работает как регулярное выражение,
> захватывая каждый элемент на своём пути, без разбора и пощады.
Вы наверное знаете, что такое «регулярное выражение», раз решили написать о сходствах с ним.
> захватывая каждый элемент на своём пути, без разбора и пощады.
Вы наверное знаете, что такое «регулярное выражение», раз решили написать о сходствах с ним.
Различные CSS-ресеты должны унифицировать поведение стандартных тегов, а не убирать все. Валибным быдловерстальщикам, для которых валидность является самоцелью, это конечно удобно. Но как потом обяснить контент-менеджеру что у него не работают спики ul ol, между параграфамы нет отсутпов, а растояние между ячейками таблицы он больше е может задать с помотшью свойств, что теперь ему придется осваивать CSS.
Валидность верстки и использование CSS reset друг с другом совершенно не соотносятся.
И тот же верстальщик после обнуления стилей должен сам определить стили для отображения страниц.
И тот же верстальщик после обнуления стилей должен сам определить стили для отображения страниц.
CSS reset служит не для валидности, а для кроссплатформенности все же.
я тоже использовал css-reset и радовался. но недавно столкнулся с тем, что встраивал java-script-календарик на некоторые страницы. из-за того, что календарик написан без css-reset (а видимо с учётом особенностей основных браузеров), вёрстка этого календарика поплыла (ну то есть она не совсем испортилась и всё видно, но вся лаконичность улетучилась).
решения, лучше чем отказаться от css-reset в проекте пока не придумал (мне правда перевёрстывать немного — два десятка страниц, наверное только). может кто-нибудь подскажет?
исправлять календарик?.. совершенно не хочется лезть в этот, кем-то написанный код представляющий из себя клубок html'я, css'а и java-script'а, чтобы попытаться распутать.
календарик: www.dynarch.com/demos/jscalendar/
решения, лучше чем отказаться от css-reset в проекте пока не придумал (мне правда перевёрстывать немного — два десятка страниц, наверное только). может кто-нибудь подскажет?
исправлять календарик?.. совершенно не хочется лезть в этот, кем-то написанный код представляющий из себя клубок html'я, css'а и java-script'а, чтобы попытаться распутать.
календарик: www.dynarch.com/demos/jscalendar/
таинственный незнакомец, минус-то — это конечно клёво, но ты бы лучше посоветовал бы чего? :)
Я бы если бы мне надо было бы неперменно использовать этот календарик… Я воспользовался бы FireBug и внимательно посмотрел какое свойство убивает внешний вид календарика и поправил css. Более простого способа кроме того что бы отказать от ресета я не вижу.
для меня ничего нового, но для тех кто с технологией не знаком изложено очень доступно. автору +1
Лично я, советовал бы обходиться без так называемого «сброса стилей».
Может быть прием с * {} кажется таким простым и понятным, но этот прием — не есть верное решение!
Почему?
По вашему отступы прописанные у тегов есть просто так?
А как же все теги вроде blockquote, dd, dt и т.п. — для них всех потом нужно дополнительно прописывать отступы, иначе они сольются с содержимым документа и будут нечитабельны.
Правильное решение — это прописывать нужным тегам нужные свойства CSS, а не бездумно обнулять свойства всем тегам.
Может быть прием с * {} кажется таким простым и понятным, но этот прием — не есть верное решение!
Почему?
По вашему отступы прописанные у тегов есть просто так?
А как же все теги вроде blockquote, dd, dt и т.п. — для них всех потом нужно дополнительно прописывать отступы, иначе они сольются с содержимым документа и будут нечитабельны.
Правильное решение — это прописывать нужным тегам нужные свойства CSS, а не бездумно обнулять свойства всем тегам.
Судя по ответу, вы не верстали ничего крупнее, чем две странички для «народа.ру»
Сожалею, но вы глубоко ошибаетесь :)
Просто я знаю у каких тегов какие свойства стоят по дефолту и в каждом проекте тегам привожу нужные значения.
Мне гораздо проще сразу тегам писать нужное, чем тотально всем без исключения тегам обнулять значения.
Это ж совсем просто:
html, body {
width:100%;
height:100%;
padding:0;
margin:0;
}
body {
font:90.5%/1.2 Tahoma, Geneva, Arial, Helvetica, sans-serif;
color:#020202;
}
a {
}
label {
}
img {
border:0px;
vertical-align:top;
font-size:0.7em;
}
p {
padding:0;
margin:3px 0px 0px 0px;
}
form {
margin:0px;
padding:0px;
}
input, select, textarea {
}
h1 {
font:180.5%/1.5 Arial, Helvetica, sans-serif;
font-weight:normal;
margin:10px 0px 10px 0px;
padding:0px;
line-height:normal;
}
h2 {
font:150.5%/1.5 Arial, Helvetica, sans-serif;
font-weight:normal;
margin:10px 0px 10px 0px;
padding:0px;
line-height:normal;
}
h3, h4, h5 {
color:#636A78;
font:120.5%/1.5 Arial, Helvetica, sans-serif;
font-weight:normal;
margin:0px 0px 0px 4px;
padding:0px;
line-height:normal;
}
table {
border-spacing:0;
border-collapse:collapse;
}
table td {
vertical-align: top;
}
td {
font:90.5%/1.2 Tahoma, Geneva, Arial, Helvetica, sans-serif;
}
и так далее
Просто я знаю у каких тегов какие свойства стоят по дефолту и в каждом проекте тегам привожу нужные значения.
Мне гораздо проще сразу тегам писать нужное, чем тотально всем без исключения тегам обнулять значения.
Это ж совсем просто:
html, body {
width:100%;
height:100%;
padding:0;
margin:0;
}
body {
font:90.5%/1.2 Tahoma, Geneva, Arial, Helvetica, sans-serif;
color:#020202;
}
a {
}
label {
}
img {
border:0px;
vertical-align:top;
font-size:0.7em;
}
p {
padding:0;
margin:3px 0px 0px 0px;
}
form {
margin:0px;
padding:0px;
}
input, select, textarea {
}
h1 {
font:180.5%/1.5 Arial, Helvetica, sans-serif;
font-weight:normal;
margin:10px 0px 10px 0px;
padding:0px;
line-height:normal;
}
h2 {
font:150.5%/1.5 Arial, Helvetica, sans-serif;
font-weight:normal;
margin:10px 0px 10px 0px;
padding:0px;
line-height:normal;
}
h3, h4, h5 {
color:#636A78;
font:120.5%/1.5 Arial, Helvetica, sans-serif;
font-weight:normal;
margin:0px 0px 0px 4px;
padding:0px;
line-height:normal;
}
table {
border-spacing:0;
border-collapse:collapse;
}
table td {
vertical-align: top;
}
td {
font:90.5%/1.2 Tahoma, Geneva, Arial, Helvetica, sans-serif;
}
и так далее
>body {font:90.5%
Не делайте так (-_-) Тут люди настраивают обычно размер шрифта по умолчанию. Зачем делать 90% от того, что они считают нормальным? Это очень неудобно, особенно если у вас не суперзрение…
Не делайте так (-_-) Тут люди настраивают обычно размер шрифта по умолчанию. Зачем делать 90% от того, что они считают нормальным? Это очень неудобно, особенно если у вас не суперзрение…
Если коммерческий продукт требует меньшего шрифта (90% от дефолта) — значит будет 90%. Это вполне адекватный размер — 100% (в xhtml 1.0 strict) не всегда удобен для восприятия.
А если всеже для пользователя нужно крупнее — нет проблем, «Ctrl +».
А если всеже для пользователя нужно крупнее — нет проблем, «Ctrl +».
Вы либо издеваетесь, либо совсем не в курсе.
Размер шрифта в браузерах по умолчанию — 16 пикселов для шрифта с засечками (в этих кретинских стилях по умолчанию). Такой же размер для рубленого — это просто гигантский шрифт. Вот все приличные люди и уменьшают его в пределах от .7 до .9, в зависимости от дизайна, таким образом настраивая базовую единицу, относительно которой уже измеряются все остальные размеры.
Размер шрифта в браузерах по умолчанию — 16 пикселов для шрифта с засечками (в этих кретинских стилях по умолчанию). Такой же размер для рубленого — это просто гигантский шрифт. Вот все приличные люди и уменьшают его в пределах от .7 до .9, в зависимости от дизайна, таким образом настраивая базовую единицу, относительно которой уже измеряются все остальные размеры.
Вы же в курсе, что «размер шрифта по умолчанию в 16 пикселов» истинно только до тех пор, пока пользователь его не изменит, правда же? (и при чём браузеры могут и свой размер по умолчанию иметь) А если у кого-то dpi побольше?
Если вам надо эти 12 (или сколько угодно) пикселей — пишите их (хотя px тоже не фонтан, вообще говоря). Если в относительных размерах указывать, то делать меньше оптимального для пользователя (как он сам выбрал), это не имеет особого смысла да и, мягко говоря, некрасиво.
Пользователь сам выбрал, что ему нормально, а что «гигантско», не стоит решать за него.
Если вам надо эти 12 (или сколько угодно) пикселей — пишите их (хотя px тоже не фонтан, вообще говоря). Если в относительных размерах указывать, то делать меньше оптимального для пользователя (как он сам выбрал), это не имеет особого смысла да и, мягко говоря, некрасиво.
Пользователь сам выбрал, что ему нормально, а что «гигантско», не стоит решать за него.
Выбор пользователя — это второй шаг.
Выбор дизайнера — первый.
Если дизайнер нарисовал основной шрифт сайта размером в 12 пикселов, то у меня нет оснований ему не доверять. Это его работа — делать красиво и удобно. Я же делаю свою — пишу такое значение базового размера шрифта, которое максимально совпадает с задумкой дизайнера.
В 90% этот размер оказывается .8em, и большая часть пользователей в состоянии это прочесть. Но если им оказывается мало, они увеличивают базовый размер шрифта, который указан в браузере и на который опираюсь я, и шрифт на сайте увеличивается.
В чём ваша проблема — почему вы не можете допустить, что размер шрифта может быть не только 100%? Совсем не понимаю.
Выбор дизайнера — первый.
Если дизайнер нарисовал основной шрифт сайта размером в 12 пикселов, то у меня нет оснований ему не доверять. Это его работа — делать красиво и удобно. Я же делаю свою — пишу такое значение базового размера шрифта, которое максимально совпадает с задумкой дизайнера.
В 90% этот размер оказывается .8em, и большая часть пользователей в состоянии это прочесть. Но если им оказывается мало, они увеличивают базовый размер шрифта, который указан в браузере и на который опираюсь я, и шрифт на сайте увеличивается.
В чём ваша проблема — почему вы не можете допустить, что размер шрифта может быть не только 100%? Совсем не понимаю.
Не «не только 100%», а не меньше 100%. т.е. если вам по дизайну надо 12 пикселей, то ради бога, делайте, но так и пишите 12px. Не надо надеяться, что у кого-то по умолчанию 16px.
Однако, основной текст страницы, обычно, не имеет таких проблем с размером, что бы пиксель-в-пиксель попасть в макет. Это в дизайне некоторых частей оформления можно и меньше и что угодно, а основная часть никак не влияет на соседние элементы.
т.о. я подразумеваю, что если основной текст (статья и т.п.) делать не меньше 100% то и дизайн не пострадает, и пользователь останется доволен (юзабилити). Это плохо?
Однако, основной текст страницы, обычно, не имеет таких проблем с размером, что бы пиксель-в-пиксель попасть в макет. Это в дизайне некоторых частей оформления можно и меньше и что угодно, а основная часть никак не влияет на соседние элементы.
т.о. я подразумеваю, что если основной текст (статья и т.п.) делать не меньше 100% то и дизайн не пострадает, и пользователь останется доволен (юзабилити). Это плохо?
Не надо надеяться, что у кого-то по умолчанию 16px
Это почему? У всех целевых браузеров такой размер шрифта, не вижу причин для того, чтобы на это не полагаться.
А если вы написали себе кастомный user.css — это ваши проблемы )
Кастомный CSS для _этого_ никто не писал. В GUI браузера есть настройки размера шрифта по умолчанию. Сюрприз? ;) Его как раз для юзабилити и придумали.
Вряд ли это сюприз для Вадима. Те кто хотят больший шрифт получат больший шрифт. Они всё равно его бы увеличили, а так страница как бы читает их мысли: «Вы любите большие буквы? Их есть у меня!
Те кто меняет базовый шрифт в браузере, обычно знают на что идут.
Те кто меняет базовый шрифт в браузере, обычно знают на что идут.
Что значит «знают на что идут»? Вот пользователь выставил больший шрифт по умолчанию и… ничего не изменилось, потому что автор страницы это проигнорировал. Вот что получается.
Вы, похоже, противоречите сами себе. Если я установлю относительный размер шрифта, то как раз таки пользователи, которые изменили шрифт увидят больший шрифт, а вот если я, как вы советуете, напишу «16px», то пользователи IE и увидят 16 px.
Пользователь нормальным размером ставит минимальный, которые его устраивает. Если вы используете относительный размер меньше 100%, то это уже меньше его собственного «минимума».
А про пиксели я говорю, что обычно в пикселях указываются для того, что бы вписать в элементы дизайна что либо, т.е. незначащие (вобщем-то) детали сайта.
А про пиксели я говорю, что обычно в пикселях указываются для того, что бы вписать в элементы дизайна что либо, т.е. незначащие (вобщем-то) детали сайта.
Ну и писать 12px — это свинство, по отношению к пользователям IE, ведь их хвалёный Page Zoom нельзя назвать иначе как издевательством над пользователем и верстальщиками. Жутко бажная штука.
Ну это то понятно. Я о том, что если пишут в пикселях, то значит наверняка фича дизайна — т.е. а) с любым другим размером шрифта не совпадёт; б) даже если и не прочитаешь, то не страшно.
А если можно указывать в em'ах и дизайн этому не мешает никак, то смысл указывать меньше умолчательного и удобного пользователю я не вижу.
Ессесно, всё ИМХО, у каждого верстальщика свои взгляды :) Просто когда зрение становится не единица, то об некоторые моменты, вроде маленьких шрифтов, очень сильно спотыкаешься. Постоянно использовать зум тоже надоедает, а установки минимального размера шрифта помогает, но весь дизайн разваливается на куски (особенно весело, если указана line-height, когда строки начинают друг на друга наползать).
А если можно указывать в em'ах и дизайн этому не мешает никак, то смысл указывать меньше умолчательного и удобного пользователю я не вижу.
Ессесно, всё ИМХО, у каждого верстальщика свои взгляды :) Просто когда зрение становится не единица, то об некоторые моменты, вроде маленьких шрифтов, очень сильно спотыкаешься. Постоянно использовать зум тоже надоедает, а установки минимального размера шрифта помогает, но весь дизайн разваливается на куски (особенно весело, если указана line-height, когда строки начинают друг на друга наползать).
То у вас 0px, то просто 0.
Ну и font-size для img выглядит как-то странно…
Ну и font-size для img выглядит как-то странно…
Господи, да назовите его global.css и меняйте от проекта к проекту. Ваше дело, просто тут вступают нюансы.
А мне действительно нравится пользоваться универсальными решениями, чтобы стартовать максимально быстро и не думать каким образом IE8 будет обозначать нижний отступ для форм — так же, как Opera 7.25 или иначе?
Сбросил — и работай.
Ну и вот, тоже почитайте комменарии выше, повторяться лениво.
А мне действительно нравится пользоваться универсальными решениями, чтобы стартовать максимально быстро и не думать каким образом IE8 будет обозначать нижний отступ для форм — так же, как Opera 7.25 или иначе?
Сбросил — и работай.
Ну и вот, тоже почитайте комменарии выше, повторяться лениво.
Полезная статья. Ничего нового я, правда, для себя не открыл, но изложения хорошее. Рекомендую всем кто интересуется версткой.
CSS Reset — штука необходимая, без нее не могу обойтись ни в одном проекте, и что под каждый проект это нужно настраивать — это тоже факт. Жду с нетерпением продолжения продолжения публикаций на данную тему.
CSS Reset — штука необходимая, без нее не могу обойтись ни в одном проекте, и что под каждый проект это нужно настраивать — это тоже факт. Жду с нетерпением продолжения продолжения публикаций на данную тему.
«Тантека Зелика» — Тантека Челика. Челик его фамилия.
Сброс стилей после установки ваших собственных стилей для элементов — это неверный подход— ничего себе!)
Штука впринципе интересная))) Но как скульптор, нужно не забыть и взять обрезать все лишнее))
А когда обрежешь, окажется, что нужного-то и не так много)
Причем потом, станет сложнее «додумывать», что делать с «чужим» кодом, когда привыкнешь, что у тебя например какой-нить там пэддинг сверху на форме всегда был обнулен, а в каком-нить шестом «ослике» он 10 ПыХы. ;)
А когда обрежешь, окажется, что нужного-то и не так много)
Причем потом, станет сложнее «додумывать», что делать с «чужим» кодом, когда привыкнешь, что у тебя например какой-нить там пэддинг сверху на форме всегда был обнулен, а в каком-нить шестом «ослике» он 10 ПыХы. ;)
а у меня вот такой
Правильно люди сверху заметили
Не сбрасывать, а четко переопределять надо.
Имхо лучший сброс для p:
p{margin: 1em 0;}
и т.п.
а не p{margin: 0;padding: 0;}
кому нужен такой сброс если потом надо прописывать еще раз те же свойства?
Не сбрасывать, а четко переопределять надо.
Имхо лучший сброс для p:
p{margin: 1em 0;}
и т.п.
а не p{margin: 0;padding: 0;}
кому нужен такой сброс если потом надо прописывать еще раз те же свойства?
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Сброс стилей с помощью CSS Reset