Пользователь
0,0
рейтинг
23 ноября 2008 в 13:55

Разработка → Сброс стилей с помощью CSS Reset перевод

CSS*
Данная статья — первая из цикла на тему укрощения CSS. Сегодня мы рассмотрим технологию CSS Reset.

Зачем это нужно?


Каждый браузер устанавливает свои значения стилей по умолчанию для различных HTML-элементов. С помощью CSS Reset мы можем нивелировать эту разницу для обеспечения кроссбраузерности стилей.

Например, вы используете элемент a в вашем документе. Большинство браузеров, как Internet Explorer и Firefox, добавляют ссылке синий цвет и подчёркивание. Однако представьте, что через пять лет кто-то решил создать новый браузер (назовём его UltraBrowser). Разработчикам браузера не нравился синий цвет и раздражало подчёркивание, поэтому они решили выделять ссылки красным цветом и полужирным шрифтом. Именно исходя из этого, если вы установите базовое значение стилей для элемента a, то он гарантированно будет таким, каким вы хотите его видеть, а не как предпочитают его отображать разработчики UltraBrowser.

---------

Простой пример


Пример 1: отображение элемента p по умолчанию.

В первом примере я поместил 3 параграфа (p) без установленных стилей внутрь элемента div, которому я выставил синий фон и оранжевую границу.

Разница в отображении браузерами


По умолчанию, вы увидите, что в Firefox между верхней границей контейнера div и верхней границей первого параграфа существует промежуток. Аналогичная ситуация и с нижней границей контейнера. Однако, в Internet Explorer мы уже не видим тех промежутков, которые наблюдали в Firefox.

Так какой браузер всё же прав? На самом деле, это не имеет значения. Что действительно важно, так это совершенно различное отображение отступов в разных браузерах, если мы не используем собственные стили для их задания.

Данный пример, конечно, упрощён. На практике CSS Reset используется для сброса тех правил, которые могут поставить под вопрос кроссбраузерность ваших стилей.

Чуть ниже, мы затронем особенности работы со сбросом стилей на практике, но для начала окунёмся в историю становления этого приёма.

Как всё начиналось?


CSS Reset впервые был применён в далёком 2004 году (ещё динозавры по сети бродили) Эндрю Креспанисом (Andrew Krespanis). В своей статье он советовал использовать универсальный селектор (*) в начале CSS-файла, чтобы задать всем элементам нулевые отступы (margin и padding).

* 
{
  margin: 0;
  padding: 0;
}


Универсальный селектор работает как регулярное выражение, захватывая каждый элемент на своём пути, без разбора и пощады. Так как до него мы не указали никаких других селекторов, со всех элементов в документе (это лишь в теории, в действительности происходит несколько иначе) удаляются какие-либо отступы. Этим мы решаем проблему первого примера и указываем браузеру на то, кто здесь хозяин. Можно взглянуть на результат во втором примере.

Но теперь у нас вообще нет никаких отступов, в том числе между отдельными параграфами! Что делать? Не врать и не бояться: ниже нашего сброса мы опишем нужное нам правило. Сделать это можно разными способами: указать отступ снизу или сверху параграфа, указать его в процентах, пикселях или в em.

Самое главное, браузер теперь играет по нашим правилам, а не мы по его. Я решил сделать подобным образом:

* { margin: 0; padding: 0; }
p { margin: 5px 0 10px 0; }


В итоге у нас получилось то, что можно увидеть в третьем примере.

Вскоре после этого, CSS-гуру Эрик Мейер (Eric Meyer) производит дальнейшие исследования вышеописанного приёма сброса отступов. В них он затрагивает работу Тантека Челика и его набор CSS-правил undohtml.css, в котором не только сбрасывались отступы, но и устанавливались базовые значения других атрибутов: стили шрифтов, стили списков.

После многочисленных переделок и уточнений, мы приходим к замечательному решению под названием CSS Reset. В нём сброс значений сделан аккуратнее: с применением непосредственно имён элементов, а не универсального селектора. Он же устанавливает значения по умолчанию для «проблемных» элементов, например таблиц, в которых border-collapse обрабатывается некорректно некоторыми браузерами.

Разумеется, существуют и другие подобные решения (YUI Reset CSS от Yahoo!). Вы можете создать собственное, которое будет удовлетворять нуждам именно вашей вёрстки.

Применение CSS Reset


Давайте остановимся на некоторых моментах использования приёма в реальном мире.

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


Выше я указал два способа сброса стилей: простой, основанный на применении универсального селектора (который я не рекомендую использовать) и комплексный, с применением стилей от Эрика.

Помимо этого, вы можете использовать разработку от Yahoo! (YUI CSS Reset), которую вы можете забирать прямо с их сервера.

Вы можете создать собственные стили для сброса, если вы решаете какую-то конкретную задачу в своём проекте. Несмотря на это, не существует пошагового руководства по созданию собственного CSS Reset. Опирайтесь на собственные принципы и собственный стиль.

Чтобы помочь вам правильно сделать выбор, приведу ещё пару ссылок:
  1. A Killer Collection of Global CSS Reset Styles;
  2. Less is more — my choice of Reset CSS (Эд Эллиот).


2. Ваш CSS Reset — это первое, что должен увидеть браузер


Сброс стилей после установки ваших собственных стилей для элементов — это неверный подход. В этом случае ничего хорошего от отображения браузером ждать не следует. Запомните, что сначала всегда следует подключать CSS Reset, а потом все остальные стили.

Да, я понимаю, это прозвучало смешно, но это одна из основных ошибок разработчиков от мала до велика. Многие просто об этом забывают.

Некоторые могут задать логичный вопрос: почему так происходит? Ответ прост: правила, записанные ниже по тексту CSS-файла (и даже ниже по их порядку подключения в документе), перезаписывают правила, объявленные ранее.

Давайте не будем сильно отходить от темы и продолжим. Применим стили Эрика Мейера к нашему примеру, но после описания наших свойств, как показано в 4 примере. Математики бы сказали следующее: «Что и требовалось доказать».

3. Используйте отдельный CSS-документ для CSS Reset


Я должен (нет, меня отнюдь не вынудили) упомянуть этот совет. Использование отдельного файла для CSS Reset — это обычная практика, которую поддерживает большое число разработчиков.

На самом деле я придерживаюсь позиции создания одного большого CSS-файла из-за большей производительности подобного подхода. Но в данном вопросе я склонен согласиться с большинством: CSS Reset следует вынести в отдельный файл (обычно его называют reset.css). В таком случае вы можете использовать его в различных проектах, не прилагая при этом никаких усилий по его отделению от других правил CSS.

4. Старайтесь избегать использование универсального селектора


Несмотря на то, что эта концепция работает, её применение чаще всего не является желательным из-за несовместимости с некоторыми браузерами (например, данный селектор некорретно обрабатывается в Internet Explorer). Вам следует использовать этот приём только для простых, небольших, статичных и предсказуемых страниц (если уж вам пришлось делать это).

Данный совет особенно важен тогда, когда вы разрабатываете такие решения, как темы для CMS. Вы не можете заранее предсказать, как она будет использована и как её будут модифицировать. Лучше описать фундаментальные CSS-правила для всех элементов, чем использовать для этого непредсказуемый (пусть и меньший по объёму) механизм универсальных селекторов.

5. Избегайте избыточных описаний свойств при использовании CSS Reset


Ещё одна причина, по которой мне не нравится отдельный файл для CSS Reset — это потенциальная избыточность последующих деклараций CSS-свойств. Повторение отдельных ваших стилей среди всего набора CSS-файлов — это моветон и его следует избегать. Разумеется, иногда мы слишком ленивы, чтобы кропотливо пройтись по набору стилей и совместить некоторые из них, но следует хотя бы попытаться!

Вернёмся к CSS Reset от Эрика. Он устанавливает значения по умолчанию для line-height, color и background элемента body следующим образом:

body 
{
  line-height: 1;
  color: black;
  background: white;
}

Допустим вы уже знаете, как будет выглядеть элемент body:
  1. background-color: #cccccc;
  2. color: #996633;
  3. Вы хотите по горизонтали повторять определённую фоновую картинку.


В этом случае нет необходимости создавать новый селектор для описания ваших свойств — вы можете их просто включить в CSS Reset. Сделаем это:

body 
{
  line-height: 1;

  color: #996633;
  background:#ccc url(tiled-image.gif) repeat-x top left;
}

Не бойтесь модифицировать сам CSS Reset. Подстройте его под себя, заставьте его работать на себя. Изменяйте, перестраиваейте, убирайте и добавляйте так, как это нужно в вашем конкретном случае.

Эрик Мейер по этому поводу сказал следующее: «это не тот случай, когда всем следует использовать CSS Reset без изменений».

Дополнительные материалы



[WSG] Zeroing default padding/margin


Возможно, первое упоминание сброса отступов с помощью универсального селектора в рассылке WSG.

Universal Selector


Эрик Мейерс изучает механизм работы универсального селектора.

No CSS Reset


Джонатан Снук (Johnathan Snook) приводит альтернативную точку зрения на CSS Reset и объясняет, почему избегает их. Мнение одного из уважаемых Web-разработчиков.

Tripoli — a CSS standard for HTML rendering


Tripoli — это другой популярный CSS Reset, который подразделён на несколько версий. Вы можете выбрать подходящую вам.
Перевод: Jacob Gube
Даня Вершинин @dinamyte
карма
343,9
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (102)

  • +2
    Отличное изложение, спасибо.
    Немного ламерский вопрос: по большому счету, приведенные примеры css reset-ов оказывают одно и то же действие и дают одинаковый результат? Мне, как не «css-маньяку» и человеку, который верстает время от времени и совсем не профессионально стоит «загоняться» по вопросу, какой css reset выбирать?
    • +3
      лучший css reset — свой.
      В любом случае сборосив стили, вам нужно будет установить свои.
      Так точку отсчёта можете взять framework от banzalik — он неплох, хотя на мой взгляд имеет перегиб в сторону «привести умолчания к общему виду», а не выставить все умолчания по своему. В любом случае — нормальная точка отсчёта.
      • 0
        Сброс CSS от framework`a без Javascript`a работает некорректно, хотелось бы что-нибудь проще. Но вы правы в том, что лучший CSS reset всё-таки свой. По крайней мере знаешь, что где лежит, и как всё это работает. И мне очень понравилась идея использовать разные файлы для сброса и выставления базовых настроек.
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Я тоже стараюсь избегать разных CSS — извращений, просто для каждого браузера пишу собственную CSS. Проблемы в основном возникают с IE 6.
    • +1
      Йенс очень умный мужик, но зачастую слишком радикален.
      Что касается reset'ов, что касается подключения нескольких файлов стилей… или насчёт того же HTML 5. Почитать это стоит, но принимать за истину — вряд ли.
    • 0
      У меня тоже есть довод в пользу того чтобы по возможности полагаться на браузер и не усердствовать с определением всех стилей.
      Простая ситуация — человек плохо видит или дальтоник. Для того чтобы комфортно браузить — он ставит свои стили отображения, что позволяют приличные браузеры. А ваш ресет забивает пользовательские стили.
      ИМХО верстка должна позволять менять размеры шрифтов и прочее без ущерба дизайна страницы. Но для этого надо помнить что все люди разные — разные вкусы, разные возможности.
      Например я ненавижу производителей разной техники и гугл за то, что они определяют страну из которой я пришел и без альтернатив предлагают мне национальный сайт. Я пока ни хрена не понимаю по-голландски, так уж случилось, что я сюда попал, и каждый выродок подсовывает мне сайт на голландском языке без возможности поменять язык.
      • +1
        К последнему абзацу.

        www.google.com/ncr — эта ссылка переключит Google на родной английский.
        • 0
          у меня в аккаунте гугла забит предпочитаемый интерфейс, выбраны предпочитаемые языки страничек ( голландского там нет), я ползуюсь английским гуглом ( у него есть ссылка на заглавной странице)
          но это не всегда помогает, когда я запускаю поиск на каком-нибудь сайте, который пользует гугловский поиск, он все равно плюет на всё и выдает мне голландский интерфейс и голландские страницы в первую очередь.
          Я уж молчу про другие сервисы ассоциированные с гуглом, например youtube предлагает мне зарегистрироваться и заполнить анкету только на голландском, без вариантов.
          • 0
            Хотел бы узнать инфу из первых уст, так сказать. Как оно все-таки там, в Голландии, если еще живете? До сих пор сожалеете, что живете в Европе, или уже привыкли?)
            • 0
              когда я сожалел?
              • 0
                Амм… Ну как-бы фраза «так уж случилось, что я сюда попал» обычно подразумевает, что это не собственной воле. Типа «так получилось, что я могу поделать?».
                • +1
                  это ложное впечатление, я попал сюда совершенно добровольно
                  • 0
                    Да я и знаю, что в страны такого рода попадают исключительно добровольно!) Просто фраза принесла недопонимание…
                    И все-таки, там лучше, или хорошо там, где нас нет все-таки?)
                    • 0
                      Персонально мне — лучше, десяткам знакомых русских-украинцев-белоруссов-казахов-литовцев-латышей и прочих бывших наших тоже. Кажется я только одного человека знаю, который вернулся в Россию по собственному желанию. Самое главное — тут можно просто честно жить и работать над реализацией своих жизненных целей.
  • +1
    Пользуюсь сбросом Эрика Мейерса и ничуть не жалею. Однако стоит заметить, что сброить стили и все — глупо. После этого, по-моему, необходимо написать еще типографические стили.
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Ну это же совершенно другой подход.
        Я не говорю что сбрасывать стили это глупо, я говорю о том, что только сбрасывать стили — это глупо.
        Сам по началу сбрасывал, потом верстал и сдавал проект. Затем меня по две недели мучали, потому что при наполнении контентом вылезали всякие косяки.
  • –5
    не знаю, я всегда пишу * {margin:0;padding:0} и никаких проблем не возникало.
    • +3
      Ключевое слово — формы. Там всё нормально?
      • 0
        хм, в статье не видел этого слова, хотя все может быть, не очень внимательно читал.
        В общем и целом да, если они есть в проекте-я прописываю специальные классы для всех элементов формы.
  • 0
    После того как мне пришлось приводить в порядок проект над которым работал Снук, он перестал быть авторитетом для меня.
    • +1
      Он на очень многие вещи тупо забивает.
    • 0
      Он сделал что-то страшное?
  • +3
    Сброс стилей полезен на ранних этапах верстки. Действительно экономит время и нервы.

    Вот что касается окончательной версии, я думаю, что надо тщательнее готовить макеты, показывать все возможные элементы, а затем для всех для них задавать нужные свойства. Может, даже софтину специальную написать, которая будет сброс стилей превращать в приведение.
  • –3
    Используйте отдельный CSS-документ для CSS Reset

    Учитывая, к примеру, что я сбрасываю свойства как

    * { border: none; font-style: normal; font-weight: normal; margin: 0; padding: 0; text-align: left; }
    img { vertical-align: top; }

    то выделять для этого отдельный файл не выглядит очень рациональным. Куда удобнее объединить его с базовым стилем.
    • НЛО прилетело и опубликовало эту надпись здесь
      • +2
        * не работает в ие <= 6


        Да ну.

        • НЛО прилетело и опубликовало эту надпись здесь
      • +3
        Откуда у всех в головах этот бред про то, что в IE <=6 не работает универсальный селектор?

        Он там РАБОТАЕТ! В этих браузерах просто есть ошибка парсера, при которой неправильно обрабатывается * html
        • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        мм… а установить border потом для нужных элементов очень сложно? Вот тут некоторые (не будем показывать пальцем) картинки в ссылках границами выделяет. А я кто-то их об этом просил? А потом левая нога захочет у кого-нибудь ещё что-нибудь выделить как-нибудь… очень удобно…

        >афаир, размеры шрифтов у таблиц по умолчанию отличаются от всего документа
        И, собственно, что вы хотели этим сказать? Размер шрифта у меня в примере не указывается.
        • НЛО прилетело и опубликовало эту надпись здесь
          • 0
            Врят ли там есть, конечно, стандартный цвет на такое, это да. Но, вообще говоря, (хотя может мне это просто так не везло) большинство дизайнов мне попадлось как раз таки что бы со своими цветами фона/границ, и что б ещё там чего-нибудь «что бы былО»… Естественно, если нужны стандартные, то так делать не стоит.

            А вот насчёт размера шрифта — я его не указываю, потому что задаю начальный размер в блоке html. т.е. если html { font-size: 3em; }, то и таблица внутри 3em будет. В IE6 тоже отображается как нужно. Я что-то упускаю?
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Так и было задумано. А в H1 вы жырность тоже не прописываете и/или не убираете? И так и так лишняя работа будет. Пусть уж будет везде одинаково.
        • НЛО прилетело и опубликовало эту надпись здесь
          • 0
            «Обычное» и «привычное» обычно как раз не имеет особого значения, потому как дизайнеры очень своеобразно себе представляют. Ну по крайней мере у меня такой опыт получился.
  • +3
    еще тут отличный материал
  • +2
    если сбрасывать стили — нужно потом еще и потрудится написать свои. Например решение от Эрика Мейерса убирает и маркеры у списков и так далее. Потому что при наполнении в дальнейшем с помощью wysiwyg-редакторов контент-менеджер увидит текст вообще без форматирования.
    • 0
      Это надо написать нулевым пунктом.
    • 0
      *потому что = поэтому
    • +3
      ага, об этом надо написать в статье большим жирным шрифтом.
      а то сейчас все бросятся стили сбрасывать, а после сдачи проекта контент-менеджер будет вбивать текст на страницы и матерится — что-ж такое — ни маркеров, ни отступов.

      моё мнение — css reset должен быть одновременно и css-set'ом.
      Глупо тратить с десятки килобайт, на то чтобы вначале всё обнулить, а потом уставновить заново. Возьми да сразу напиши нужные значения.
  • +3
    Я считаю, что толку мало от сбрасывания стилей. Где мне нужны нулевые отступы — я укажу. Если мне нужные особые отсупы у абзацев или у списков — укажу.

    После CSS-reset мне приходится восстанавливать все свойства для элементов — указать, что <strong> должен быть жирным, <em> — наклонным, у абзацев отступ и т.д. По-моему, это лишние заботы. Если мне понадобится вдруг сделать <strong> красным, а <em> — мигающим, я это напишу.

    Сейчас приходится делать проект за горе-верстальщиками, которые обнулить — обнулили, а проставить стили для обнуленных элемнтов ума не хватило.
    • 0
      поэтому пользоваться сбросом стилей нужно очень острожно. Сброс Мейерса я считаю можно использовать только для очень крупных проектов опытными командами, когда процесс разработки позволяет учесть и отладить все возможные проблемы. Для небольших проектов действительно в большинстве случаев достаточно * {margin:0;padding:0;} и еще нескольких правил. При этом опять же надо не забыть прописать их снова, например для списков.
      • +1
        Он Мейер Эрик. А Мейерс Йенс — это другой, тоже умный человек, который как раз против reset'а :)
    • 0
      А ведь когда-то strong не был жирным во всех браузерах. Вдруг не будет в каких-то новых? Хотя на это можно с чистой совестью наплевать. Так что, если судить по текущей ситуации — вы правы на 90%.
    • 0
      Гм.

      Т.е. ситуация, в которой логичная HTML-разметка употребляется не только для содержимого документа (собственно, списки, параграфы и проч.) — это уже неважно?

      Ну задолбался я всем спискам убирать list-style и margin, если мне нужно вывести меню при помощи списка. А в итоге, я и в контентной части сделаю списки с картиночными буллитами, где будет padding + background.

      …т.е. у меня на сайте ни разу не будет использоваться margin и list-style, но я всё равно обязан их обнулять при описании каждого списка?

      А не проще ли принять за истину тот факт, что у меня в руках _только логика документа и никаких браузерных предпочтений? И только в такой ситуации я буду использовать элементы не потому, что их как-то нарисовал производитель браузера, а потому, что они сюда логически подходят.

      Идеальной я бы назвал ситуацию, в которой браузер подключает таблицу стилей по умолчанию только в том случае, если не было подгружено никакой авторской. Вот это по-настоящему! И не нужно никаких попыток «сделать во всех браузерах одинаково»…
      • 0
        Я против того, что обнулять всё, чтобы потом восстанавливать.

        Я не призываю в каждом случае отдельно обнулять. Если вижу, что все списки — «нестандартные», то обнулю их всех.

        ***
        Особенно сомнительным мне кажется vertical-align:baseline для td и th, как это делается у Эрика Мейера.
        • +1
          Дело в том, что чисто статистически, обнуление всего выгоднее, с точки зрения лишнего кода. Этот reset.css представляет из себя тот самый инструмент для приведения браузера к идеальному поведению, о котором я писал выше.

          vertical-aign:baseline мне лично нравится — если все элементы расположены одинаково, проще сделать именно то, что нужно.

          Ну, не кажется мне, что использование vertical-aign для надстрочны/подстрочных индексов — это удачный приём, ведь он разрывает строку. Мне по нраву position:relative, top:-.2em. А производителям браузеров всё равно, ведь дефолтные таблицы стилей — это махровая традиция.

          Ну вот зачем формам отступ? А зачем группам полей (fieldset) кретинская рамка, куда совершенно некроссбраузерно встраивается legend?

          И я снова обнуляю, обнуляю и копаюсь — кто что использует для отступов — кто margin, кто padding… И когда таких мелочей набирается вагон и тележка, большинство людей приходят к каким-то универсальным решениям. Которые, в частности, не дают ошибиться: нужно вывести крупный текст? Пожалуйста, оцени, какое место он занимает в структуре документа, да так и разметь. И не будет больше соблазна влепить туда подходящий по размеру шрифта H1 — ведь всё выглядит одинаково просто. И дальше, и больше — хочется привести десятки примеров.

          В общем — дело царское, и если есть привычка/навыки верстать на основе дефолтных стилей, неприкосновенность которых никто не гарантирует, то пожалуйста. А если есть желание сделать шаг вперёд, задуматься об оптимизации — то стоит написать свой собственный универсальный сброс, ровно в тех границах, которые необходимы лично вам.

          Я сам пользуюсь именно своей версией reset'а, но всё же на основе мейеровского.
  • +2
    > Универсальный селектор работает как регулярное выражение,
    > захватывая каждый элемент на своём пути, без разбора и пощады.
    Вы наверное знаете, что такое «регулярное выражение», раз решили написать о сходствах с ним.
    • +2
      Я — знаю, а знает ли автор — не знаю. Возможно проводилась параллель с /.*/, который также заглатывает всё, что увидит.
      • 0
        Если вы знаете, тем более не должно быть сложностей исправить этот ляп.
  • +1
    Различные CSS-ресеты должны унифицировать поведение стандартных тегов, а не убирать все. Валибным быдловерстальщикам, для которых валидность является самоцелью, это конечно удобно. Но как потом обяснить контент-менеджеру что у него не работают спики ul ol, между параграфамы нет отсутпов, а растояние между ячейками таблицы он больше е может задать с помотшью свойств, что теперь ему придется осваивать CSS.
    • +5
      Валидность верстки и использование CSS reset друг с другом совершенно не соотносятся.
      И тот же верстальщик после обнуления стилей должен сам определить стили для отображения страниц.
      • 0
        Разница в том, что если верстальщик забудет это сделать без CSS-ресет, с сайтом можно будет нормально работать.
        Мне, к сожалению, еще не попадалась верстка с ресетами, в которой бы «не забыли». Может другим больше повезло.
        • +1
          Если верстальщик применяет CSS reset, то он должен знать, зачем его применяет, иначе это, как вы выразились, «быдловерстальщик», не понимающий, что творит.
    • 0
      CSS reset служит не для валидности, а для кроссплатформенности все же.
      • 0
        Кроссбраузерности ;)
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Данная статья — первая из цикла аналогичных.

      По второму предложению: как автор сказал, так и написано. Хотя, для Web 4 года — это немалый срок.
      • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    я тоже использовал css-reset и радовался. но недавно столкнулся с тем, что встраивал java-script-календарик на некоторые страницы. из-за того, что календарик написан без css-reset (а видимо с учётом особенностей основных браузеров), вёрстка этого календарика поплыла (ну то есть она не совсем испортилась и всё видно, но вся лаконичность улетучилась).

    решения, лучше чем отказаться от css-reset в проекте пока не придумал (мне правда перевёрстывать немного — два десятка страниц, наверное только). может кто-нибудь подскажет?
    исправлять календарик?.. совершенно не хочется лезть в этот, кем-то написанный код представляющий из себя клубок html'я, css'а и java-script'а, чтобы попытаться распутать.

    календарик: www.dynarch.com/demos/jscalendar/
    • 0
      таинственный незнакомец, минус-то — это конечно клёво, но ты бы лучше посоветовал бы чего? :)
      • НЛО прилетело и опубликовало эту надпись здесь
    • +1
      Я бы если бы мне надо было бы неперменно использовать этот календарик… Я воспользовался бы FireBug и внимательно посмотрел какое свойство убивает внешний вид календарика и поправил css. Более простого способа кроме того что бы отказать от ресета я не вижу.
      • +1
        Забыл добавить, что нашел бы я нашел, но потом бы описал дополнительные стили для календарика которые привели бы его в божеский вид.
  • –1
    для меня ничего нового, но для тех кто с технологией не знаком изложено очень доступно. автору +1
  • –4
    Лично я, советовал бы обходиться без так называемого «сброса стилей».
    Может быть прием с * {} кажется таким простым и понятным, но этот прием — не есть верное решение!

    Почему?
    По вашему отступы прописанные у тегов есть просто так?
    А как же все теги вроде blockquote, dd, dt и т.п. — для них всех потом нужно дополнительно прописывать отступы, иначе они сольются с содержимым документа и будут нечитабельны.

    Правильное решение — это прописывать нужным тегам нужные свойства CSS, а не бездумно обнулять свойства всем тегам.
    • +5
      Судя по ответу, вы не верстали ничего крупнее, чем две странички для «народа.ру»
      • –2
        Сожалею, но вы глубоко ошибаетесь :)

        Просто я знаю у каких тегов какие свойства стоят по дефолту и в каждом проекте тегам привожу нужные значения.
        Мне гораздо проще сразу тегам писать нужное, чем тотально всем без исключения тегам обнулять значения.

        Это ж совсем просто:

        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;
        }

        и так далее
        • –1
          >body {font:90.5%

          Не делайте так (-_-) Тут люди настраивают обычно размер шрифта по умолчанию. Зачем делать 90% от того, что они считают нормальным? Это очень неудобно, особенно если у вас не суперзрение…
          • 0
            Если коммерческий продукт требует меньшего шрифта (90% от дефолта) — значит будет 90%. Это вполне адекватный размер — 100% (в xhtml 1.0 strict) не всегда удобен для восприятия.

            А если всеже для пользователя нужно крупнее — нет проблем, «Ctrl +».
            • 0
              Адекватный размер? Вот у меня на 100% читается хорошо (настроено вручную). На 90% — я уже не могу читать. Т.е. вы предлагаете вашим посетителям зумить? Так и теряют посетителей.
              • 0
                Вот с хабра

                body {
                font-family:Verdana,sans-serif;
                font-size:0.75em;
                }

                и ничего, читаешь.
                • 0
                  Ещё бы, у меня UserCSS прикручен, с font-size: medium на всё.
          • 0
            Вы либо издеваетесь, либо совсем не в курсе.

            Размер шрифта в браузерах по умолчанию — 16 пикселов для шрифта с засечками (в этих кретинских стилях по умолчанию). Такой же размер для рубленого — это просто гигантский шрифт. Вот все приличные люди и уменьшают его в пределах от .7 до .9, в зависимости от дизайна, таким образом настраивая базовую единицу, относительно которой уже измеряются все остальные размеры.
            • –1
              Вы же в курсе, что «размер шрифта по умолчанию в 16 пикселов» истинно только до тех пор, пока пользователь его не изменит, правда же? (и при чём браузеры могут и свой размер по умолчанию иметь) А если у кого-то dpi побольше?

              Если вам надо эти 12 (или сколько угодно) пикселей — пишите их (хотя px тоже не фонтан, вообще говоря). Если в относительных размерах указывать, то делать меньше оптимального для пользователя (как он сам выбрал), это не имеет особого смысла да и, мягко говоря, некрасиво.

              Пользователь сам выбрал, что ему нормально, а что «гигантско», не стоит решать за него.
              • +1
                Выбор пользователя — это второй шаг.
                Выбор дизайнера — первый.

                Если дизайнер нарисовал основной шрифт сайта размером в 12 пикселов, то у меня нет оснований ему не доверять. Это его работа — делать красиво и удобно. Я же делаю свою — пишу такое значение базового размера шрифта, которое максимально совпадает с задумкой дизайнера.

                В 90% этот размер оказывается .8em, и большая часть пользователей в состоянии это прочесть. Но если им оказывается мало, они увеличивают базовый размер шрифта, который указан в браузере и на который опираюсь я, и шрифт на сайте увеличивается.

                В чём ваша проблема — почему вы не можете допустить, что размер шрифта может быть не только 100%? Совсем не понимаю.
                • 0
                  Не «не только 100%», а не меньше 100%. т.е. если вам по дизайну надо 12 пикселей, то ради бога, делайте, но так и пишите 12px. Не надо надеяться, что у кого-то по умолчанию 16px.

                  Однако, основной текст страницы, обычно, не имеет таких проблем с размером, что бы пиксель-в-пиксель попасть в макет. Это в дизайне некоторых частей оформления можно и меньше и что угодно, а основная часть никак не влияет на соседние элементы.

                  т.о. я подразумеваю, что если основной текст (статья и т.п.) делать не меньше 100% то и дизайн не пострадает, и пользователь останется доволен (юзабилити). Это плохо?
                  • 0
                    Не надо надеяться, что у кого-то по умолчанию 16px


                    Это почему? У всех целевых браузеров такой размер шрифта, не вижу причин для того, чтобы на это не полагаться.

                    А если вы написали себе кастомный user.css — это ваши проблемы )
                    • 0
                      Кастомный CSS для _этого_ никто не писал. В GUI браузера есть настройки размера шрифта по умолчанию. Сюрприз? ;) Его как раз для юзабилити и придумали.
                      • 0
                        Вряд ли это сюприз для Вадима. Те кто хотят больший шрифт получат больший шрифт. Они всё равно его бы увеличили, а так страница как бы читает их мысли: «Вы любите большие буквы? Их есть у меня!
                        Те кто меняет базовый шрифт в браузере, обычно знают на что идут.
                        • 0
                          Что значит «знают на что идут»? Вот пользователь выставил больший шрифт по умолчанию и… ничего не изменилось, потому что автор страницы это проигнорировал. Вот что получается.
                          • 0
                            Вы, похоже, противоречите сами себе. Если я установлю относительный размер шрифта, то как раз таки пользователи, которые изменили шрифт увидят больший шрифт, а вот если я, как вы советуете, напишу «16px», то пользователи IE и увидят 16 px.
                            • 0
                              Пользователь нормальным размером ставит минимальный, которые его устраивает. Если вы используете относительный размер меньше 100%, то это уже меньше его собственного «минимума».

                              А про пиксели я говорю, что обычно в пикселях указываются для того, что бы вписать в элементы дизайна что либо, т.е. незначащие (вобщем-то) детали сайта.
                  • 0
                    Ну и писать 12px — это свинство, по отношению к пользователям IE, ведь их хвалёный Page Zoom нельзя назвать иначе как издевательством над пользователем и верстальщиками. Жутко бажная штука.
                    • 0
                      Ну это то понятно. Я о том, что если пишут в пикселях, то значит наверняка фича дизайна — т.е. а) с любым другим размером шрифта не совпадёт; б) даже если и не прочитаешь, то не страшно.

                      А если можно указывать в em'ах и дизайн этому не мешает никак, то смысл указывать меньше умолчательного и удобного пользователю я не вижу.

                      Ессесно, всё ИМХО, у каждого верстальщика свои взгляды :) Просто когда зрение становится не единица, то об некоторые моменты, вроде маленьких шрифтов, очень сильно спотыкаешься. Постоянно использовать зум тоже надоедает, а установки минимального размера шрифта помогает, но весь дизайн разваливается на куски (особенно весело, если указана line-height, когда строки начинают друг на друга наползать).
        • +1
          То у вас 0px, то просто 0.
          Ну и font-size для img выглядит как-то странно…
          • +1
            В случае с «нулем», можно писать и просто «0» и «0px».

            >>font-size для img выглядит как-то странно…
            Ничего странного, это для тех случаев, когда графика отключена, чтоб alt`ы у IMG писались адекватного размера
            • 0
              Да, я знаю, что в случае нуля можно не указывать размерность, просто вы уж определитесь, либо вы так пишете, либо так. Впустую потраченные байты
            • +2
              В случае с «нулем», можно писать и просто «0» и «0px»


              Тогда лучше сразу border: 0попугаев )
        • 0
          Господи, да назовите его global.css и меняйте от проекта к проекту. Ваше дело, просто тут вступают нюансы.

          А мне действительно нравится пользоваться универсальными решениями, чтобы стартовать максимально быстро и не думать каким образом IE8 будет обозначать нижний отступ для форм — так же, как Opera 7.25 или иначе?

          Сбросил — и работай.

          Ну и вот, тоже почитайте комменарии выше, повторяться лениво.
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Полезная статья. Ничего нового я, правда, для себя не открыл, но изложения хорошее. Рекомендую всем кто интересуется версткой.
    CSS Reset — штука необходимая, без нее не могу обойтись ни в одном проекте, и что под каждый проект это нужно настраивать — это тоже факт. Жду с нетерпением продолжения продолжения публикаций на данную тему.
  • +4
    «Тантека Зелика» —  Тантека Челика. Челик его фамилия.
    • 0
      Челика, Целика… но Зелика я ещё не встречал :D
  • 0
    Сброс стилей после установки ваших собственных стилей для элементов — это неверный подход
    — ничего себе!)
  • +1
    Штука впринципе интересная))) Но как скульптор, нужно не забыть и взять обрезать все лишнее))

    А когда обрежешь, окажется, что нужного-то и не так много)

    Причем потом, станет сложнее «додумывать», что делать с «чужим» кодом, когда привыкнешь, что у тебя например какой-нить там пэддинг сверху на форме всегда был обнулен, а в каком-нить шестом «ослике» он 10 ПыХы. ;)
  • 0
    а у меня вот такой
  • 0
    Правильно люди сверху заметили
    Не сбрасывать, а четко переопределять надо.
    Имхо лучший сброс для p:
    p{margin: 1em 0;}
    и т.п.
    а не p{margin: 0;padding: 0;}
    кому нужен такой сброс если потом надо прописывать еще раз те же свойства?

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.