CSS - FAQteam

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

  1. Cascading Style Sheets: за и против.
  2. Размышления о потребности фиксирования размеров шрифтов на странице.
  3. Особенности работы со шрифтами в CSS.
  4. Как лучше применить стили к элементу <body>.
  5. Делать ли один CSS для всех броузеров.

Вопрос:  А вообще, надо ли использовать CSS или лучше обходиться стандартными и давно испытанными средствами HTML?

Ответ: В последнее время все чаще раздаются вопросы вроде "следует ли использовать CSS или лучше обходиться стандартными средствами HTML?", "стоит ли полностью переводить все настройки в CSS?", "какие настройки следует переводить в CSS, а какие нет?".

Конечно, при ответе на этот вопрос вряд ли можно дать универсальный и всеобъемлющий рецепт. Так что здесь будут приведены несколько наиболее общих (хочется надеяться, что и полезных) замечаний и советов по этому поводу.

В первую очередь, по спецификации HTML4.0 многие "стандартные средства" являются устаревшими и не рекомендуемыми к использованию (хотя бы тот же тег <FONT>), а многие никогда стандартными и не были -- отступы для <BODY>, background таблиц и пр. Эти атрибуты рекомендуется заменять стилями.

Конечно, CSS имеет массу преимуществ (очень верна уже сама идея -- посильное отделение контента от дизайна). Чаще всего это проявляется при разработке модных нынче (особенно у буржуев) "кастомизируемых" сайтов, но не только. Вот наиболее полезные стороны использования CSS:

  • Можно назначить для любых групп объектов на странице (текст, ссылки, картинки...) одинаковые атрибуты, не заботясь о прописывании этих атрибутов каждому объекту. При этом можно создавать свои группы объектов (классы), не зависящие от "теговой принадлежности". Таким образом, информация об оформлении всех таких объектов будет храниться централизованно, что дает огромные преимущества как при разработке, так и при модификации страницы.
  • Некоторым группам элементов можно добавить атрибуты, которые нельзя задать в HTML (к примеру hover и отсутствие подчеркивания для ссылок). Это больше относится к разряду "фичей", отсутствие которых не особо огорчит посетителя, а вот их присутствие может порадовать.
  • В целом, CSS имеет значительно большие возможности настроек атрибутов элементов по сравнению с HTML. (Справедливости ради, надо сказать, что большинство из этих атрибутов используются очень редко.)

    В некоторых браузерах посетитель имеет возможность запретить использование CSS. Кроме того, если в настройках Netscape 4 у посетителя отключен JavaScript, то CSS отключается автоматически, вне зависимости, запрещено ли его использование непосредственно, или нет.

Теперь стоит немного поговорить о практике.

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

Что стоит и что не стоит переносить в CSS? Если шрифтовые настройки в CSS уже стали привычными, то background'ы/bgcolor'ы как-то не очень хочется (но можно, при желании) возлагать на CSS, хотя бы потому, что невосприятие браузером CSS в шрифтах вряд ли сильно напортит сам дизайн, а вот отсутствие background'ов/bgcolor'ов может его вообще убить наповал. Особенно когда в дизайне сайта на них (background'ы, в частности) много возложено.

Тем не менее, перенос (копирование) настроек bgcolor'ов в CSS является целесообразным - с точки зрения удобства управления настройками. Если вы все же боитесь таким образом "потерять вид" сайта в старых браузерах, обратите внимание на информацию, представленную в примечании.

Совсем по-другому обстоят дела с background'ами. Веская причина против переноса их (полного, во всяком случае) в CSS - это то, что в отличие от настроек шрифтов и фоновых цветов, перенос background'ов в стили вовсе не упростит написание кода, его чтение и понимание, а скорее наоборот.

Никому же не приходит в голову идея сделать возможным прописывать соурсы для рисунков на странице где-то в отдельном месте (в стилевом файле, например), вне тега <IMG>. Это было бы очень неудобно. То же самое касается и background'ов, которые, по сути, являются теми же рисунками, только вставленными другим способом. К тому же, преимущества CSS, связанные с централизованным хранением и быстрой сменой настроек здесь не нужны, так как немного изменяя дизайн (цвета, заливки), вы скорее всего будете менять только сами рисунки, и вряд ли - их имена. Таким образом, background'ы рекомендуется в любом случае прописывать в HTML.

Единственным аргументом в пользу вноса информации о background'ах в стили является то, что этот метод соответствует официальным стандартам HTML, в отличие от прописывания этой информации в коде (за исключением тега <BODY>), и это приведет к корректному отображению страницы некоторыми малораспространенными браузерами (в частности, Оперой), которые в этом вопросе работают в строгом соответствии со стандартом, и не понимают "нестандартных" указаний.

 Примечания: Есть еще один важный и полезный нюанс.

Для всех тегов, параметры, заданные в CSS имеют больший приоритет, чем параметры, заданные "по старинке" - атрибутами тегов. Это дает хорошую возможность работать с CSS, предусматривая также и приемлемый вариант для браузеров, его не поддерживающих. В этом случае, впоследствии изменяя какие-то настройки (особенно это применимо к шрифтам), можно менять только стили, "забыв" о тегах в теле HTML и ограничившись только первоначальной заботой о старых браузерах. Если же вы все же твердо намерены позаботиться и о них, вам никто не мешает это сделать, "традиционно" подправив также HTML (в этом случае, вероятно, вам не покажется слишком тяжелой и лишней работой поменять настройки и в CSS, потратив на это сотую часть от необходимого на все изменения времени ;).

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


Вопрос:  Мой друг носит очки +6 и жалуется, что не может ничего прочитать на моих сайтах. Что лучше - дать ему денег на операцию по лазерной коррекции зрения или все же не фиксировать шрифты?

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

Вообще на эту тему мнения очень различаются и постоянно идут споры. Есть, например, крайние мнения, что фиксировать размер надо везде, и что нельзя нигде. Сторонники первого выдвигают аргументы, что фиксирование шрифтов приводит к лучшей кроссбраузерности (в смысле правильности и однозначности отображения), возможности для дизайнера однозначно строить страницу, не заботясь о том, что у пользователя могут быть другие настройки браузера, и у него все "поедет" или просто будет не так красиво. Часто это еще и упрощает код. Контраргумент - что невозможность изменения размера шрифта - это нарушение всех принципов юзабилити, и что возможность и удобство чтения пофиксенного текста может сильно отличаться для людей с разными мониторами, видеокартами, установленными разрешениями, не говоря уже о зрении...

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

Несколько по-другому обстоят дела с элементами, имеющими отношение к оформлению сайта, дизайну. Здесь наоборот, часто имеет смысл (и даже необходимо) зафиксировать размеры некоторых элементов: пунктов меню, шапок и т.д. Это нужно для того, чтобы при изменении пользователем размера шрифта дизайн не "поплыл" из-за того, что какие-то элементы не влезли в отведенное для них дизайном пространство (кстати, такое довольно часто можно наблюдать в Сети). Кроме того, фиксирование шрифта здесь вряд ли доставит много неудобств посетителю, во-первых, потому, что этого текста не много, а во-вторых, потому, что чаще эти элементы выполняются шрифтом достаточного размера, так что пользователь наверняка и так сможет его нормально прочесть.

Надо сказать, что полностью быть уверенным в том, что юзер не сможет изменить размер шрифта все равно нельзя. В Internet Explorer, которым пользуется абсолютное большинство, есть возможность проигнорировать все заданные вами размеры шрифтов. Настройка эта, однако, спрятана довольно далеко и не все знают, как это сделать.

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

 Примечания: Есть альтернативное решение - отлить текстовые элементы дизайна в GIF'ы, то есть сделать весь дизайн графическим. Это, однако, не всегда приемлемо и имеет много недостатков: полная невозможность изменения размера шрифта посетителем, увеличение "веса" сайта и скорости загрузки, большие трудности с изменением дизайна или расширением меню, худшее отображение при отключении рисунков пользователем. А единственное преимущество - корректное отображение старыми браузерами, не поддерживающими CSS. Поскольку реально таких осталось очень мало, лучше все же остановиться на варианте с CSS.


Вопрос:  Какие все-таки размеры задавать шрифтам в CSS, чтобы они были такими же, как при использовании старого доброго <FONT>?

Ответ: У CSS по сравнению с тегом <font> есть много преимуществ при указании размеров шрифтов. Хотя бы та же возможность зафиксировать размер шрифта.

Для указания размеров шрифтов в CSS, помимо прочего, есть возможность задавать размер в единицах, соответствующих единицам в теге <font>. Это xx-small, x-small, small, medium, large, x-large и xx-large. К несчастью, в отличие от варианта с <font size=...>, который одинаково отображается всеми броузерами, трактовка приведенных единиц в разных броузерах отличается (как именно - описано ниже).

Ниже приведены некоторые замечания и советы по заданию шрифтов в CSS, испытанные в ИЕ4+, НН4+ и частично в Опере4 и НН6.

  1. Глюк НН4+. Шрифты, указанные в пунктах (pt), все равно масштабируются (по Ctrl+], Ctrl+[), но становятся на место при перезагрузке страницы (неисповедимы пути программистов!).
  2. Шрифты, указанные в пикселах, не масштабируются нигде. Плюс к тому, пиксел - более мелкая единица, чем пункт, и дает большую точность. Вывод - если нужно фиксить, фиксь только в пикселах!
  3. Глюк НН4+. Если размер шрифта в блоке указан в CSS (что в абсолютных, что в относительных единицах), внутри этого блока изменить его размер тегами <small>, <big>, <font size=...> не удастся. Придется для этой цели создавать еще стили.
  4. В ИЕ некоторые стили шрифтов блока (а именно, только гарнитура, но не размер, не цвет, не жирность...) наследуются во вложенных в них таблицах, в НН4+ - ни один не наследуется. В Опере 4 наследуется все стили, кроме размера шрифта. Кстати, то же самое справедливо к наследованию параметров из тега <font>. Поскольку в ИЕ (нашем рулевом ;) избавиться от наследования гарнитуры нельзя, представляется целесообразным сделать это наследование полным (т.е. наследовать все остальные стили) и для лучшей совместимости попутно сделать это же для НН. Это достигается очень просто - прописыванием стиля следующим простым методом, используя "контекстные селекторы" (сontextual selectors):

    myclass, .myclass TD { ... /* any font settings */ }
    
    Вообще-то не рекомендуется накладывать/наследовать стили на всю таблицу целиком в случае, если в стилях присутствует гарнитура шрифта. В НН4+ это может негативно повлиять на вид элементов ввода в этих таблицах, которые (в отличие от этого дела в ИЕ) тоже унаследуют эти стили.
  5. Размеры шрифтов, указанные в единицах xx-small, x-small и т.д., как уже говорилось, воспринимаются броузерами по-разному, а именно: для ИЕ и Оперы размеру <font size=1> соответствует xx-small, <font size=2> - x-small, <font size=3> - small и т.д., а в НН4+/НН6 x-small, small, medium соответственно... Таким образом, если вы хотите использовать эти единицы (а это может оказаться нужным) и сохранить примерно одинаковый внешний вид страницы в разных броузерах, вы не можете просто использовать один CSS. В этом случае можно предложить прописывание в стилях варианта размеров для ИЕ (как основного броузера) с дальнейшим подключением при помощи, например, JavaScript стилей, корректирующих размеры шрифтов для НН.
  6. Про относительный размер шрифта: принято считать, что его лучше задавать в процентах. Но на самом деле (по результатам экспериментов) лучше все же использовать единицу "ex". Так удается достигнуть большую точность задания размера, чем в процентах, и лучшее соответствие размеров в разных броузерах.

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

Файл main.css:

.f1, .f1 TD {
    font-family: Arial,Helvetica,sans-serif;
    font-size: xx-small;
    }
.f2, .f2 TD {
    font-family: Arial,Helvetica,sans-serif;
    font-size: x-small;
    }
.f3, .f3 TD {
    font-family: Arial,Helvetica,sans-serif;
    font-size: small;
    }

.fix1, .fix1 TD {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 10.8px;
    }
.fix15, .fix15 TD {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    }
.fix2, .fix2 TD {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 13.5px;
    }
.fix25, .fix25 TD {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 14.8px;
    }
.fix3, .fix3 TD {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 16px;
    }

.flt1, .flt1 TD {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 1.3ex;
    }
.flt15, .flt15 TD {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 1.45ex;
    }
.flt2, .flt2 TD {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 1.6ex;
    }
.flt25, .flt25 TD {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 1.75ex;
    }
.flt3, .flt3 TD {
    font-family: Arial,Helvetica,sans-serif;
    }

Файл main_nn.css:

.f1, .f1 TD {
    font-size: x-small;
    }
.f2, .f2 TD {
    font-size: small;
    }
.f3, .f3 TD {
    font-size: medium;
    }

Подключение стилей к документу:

<link rel=stylesheet type="text/css" href="main.css">
<script type="text/javascript"><!--
if (navigator.appName=='Netscape')
  document.write('<link rel=stylesheet type="text/css" href="main_nn.css">')
//-->
</script>

Все значения были подобраны так, чтобы в итоге размер был идентичен в ИЕ4+ и НН4+ (отсюда же дробные значения в пикселах ;)).

Здесь:

  • fN - стили для шрифта, всегда равного по размеру соответствующему <font size=N>;
  • fixN - (взято сокращение от "fixed") стили для фиксированного шрифта;
  • fltN - (взято сокращение от "float") для масштабируемого;
  • N - означает соответствующий параметр в FONT (при стандартных размерах шрифта в настройках броузера).

Так, fix1 и flt1 точно соответствуют по размеру <font size=1> и т.д. 15 и 25 - некоторые промежуточные значения (более мелкого дробления при идентичном восприятии броузерами получить не удалось). Единственно, только fix1 и flt1 (15 и выше - нормально) имеют отличия от <font size=1> в том, что в них тег <b> перестает нормально работать (не хотят броузеры почему-то болдить такой мелкий шрифт, указанный стилями).

 Примечания: Задание размера шрифта в относительных единицах имеет один недостаток по сравнению с тегом <font>: заданный через <font>, размер задается относительно некоторой глобальной для страницы единицы, заданный же в стилях - относительно элемента, в который текущий элемент вложен.

Таким образом попробуйте нормально получить через относительные единицы аналог конструкции:

<font size=2>TEXT<font size=1>TEXT2</font></font>

Так, очевидно, не выйдет:

<span class=flt2>TEXT<span class=flt1>TEXT2</span></span>

Так:

<span class=flt2>TEXT<font size=+0><span class=flt1>TEXT2</span></font></span>

- выйдет под ИЕ, под НН4+ в силу пункта 3 - не пройдет.

Именно поэтому рекомендуется для масштабируемых шрифтов использовать не fltN, а fN:

<span class=f2>TEXT<span class=f1>TEXT2</span></span>

Исключение - промежуточные величины flt15 и flt25, для которых соответствующей замены нет.


Вопрос:  А вот как бы мне лучше указать отступы и цвет шрифта на страничке - в <BODY>, или уже можно все в CSS делать?

Ответ: Для <body>, как и для любого другого тега, параметры можно задать в CSS. И так же, как для других тегов, параметры, заданные в CSS имеют больший приоритет, чем параметры, заданные "по старинке" атрибутами тегов. Это дает удобную возможность работать с CSS, предусматривая также приемлемый вариант для броузеров, CSS не поддерживающих. Это и следует делать.

Таким образом, можно рекомендовать указывать все необходимые атрибуты и в <body> (отступы, цвета), и в CSS. Потом, в принципе, можно менять один CSS, ограничившись только первоначальной заботой о старых броузерах.

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

  1. Рекомендуется прописать цвета ссылок и в <body>, и в CSS.
  2. Параметр text="..." у <body> имеет свойство распространиться на все содержимое страницы, залезая и в таблицы. Для фонтов параметр цвета в ИЕ (а в НН тем более) таблицами не наследуется. В случае же с <body> -- исключение. Задание для него стиля вида:

    body {color: #000080}
    

    распространит этот цвет и на все таблицы. Однако, опять же, в НН этого не произойдет, поэтому метод тот же (см. предыдущую статью) - добавляем в стили запись:

    body TD {color: #000080}
    

    Писать body, body TD {...} не стоит, так как для body, вероятно, еще и отступы в стилях будут заданы.

    В целом же, этот параметр также рекомендуется прописать и в <body>, и в CSS.

  3. Опера (начиная с 4-й) также понимает нетскейповые атрибуты marginwidth, marginheight.
  4. Для ИЕ отступы в стилях просто заменяют отступы в атрибутах.
  5. Для НН4+ и Оперы4 вопрос об отступах сложнее (утешает, что они ведут себя одинаково странно).

    Если не указывать marginwidth, marginheight в <body>, а указать margin:0 в стилях, то мы в НН4+ и Опере увидим стандартные отступы (равные 8 пикселам). Можно, конечно, указать с стилях отступы равными -8 (если реально требуются нулевые), но вообще это не есть самое правильное решение проблемы. Проблема же в том, что в НН4+ и Опере отступы, указанные в стилях, не заменяют отступы, указанные в атрибутах, а складываются с ними! Таким образом, неуказание этих атрибутов у <body> ведет к приему их значений по умолчанию, т.е. обычно равными 8 пикселам. Отсюда и появляется стандартный отступ. Из этого вытекает, что все-таки все атрибуты в теге <body> придется указать!

  6. Что же в итоге делать с отступами?

    В принципе, как мы выяснили, атрибуты для <body> все равно нужны. Поэтому прописываем их всех. Можно также для порядка (а также для Оперы 3.62 ;) прописать отступы в стилях. В случае, когда отступы планируются нулевыми -- все довольны, все смеются. Если же хочется сделать их ненулевыми, есть 2 варианта:

    • Указать нужные отступы в атрибутах <body>, а в стилях не указывать вообще. Все всё правильно поймут.
    • Если все же хочется управлять отступами в одном месте из CSS. Тогда пишем их в атрибутах <body> равными нулю, а в стилях - необходимого размера. Опять все будут довольны, кроме старых броузеров, не поддерживающих CSS (для них отступы нуль навечно и останутся). В настоящее время это представляется вполне приемлемым, так что рекомендуется использовать именно этот вариант.
  7. Остались только атрибуты bgcolor и background. Как поступить с ними?

    Рекомендуется прописать bgcolor и в HTML, и в стилях. Атрибут background же следует прописать только "старым" методом в HTML. За аргументами к этим рекомендациям предлагаем вам обратиться к одной из предыдущих статей: "CSS: за и против".

 Проверено на : ИЕ4+, НН4+, Опера4


Вопрос:  Я знаю, что при использовании CSS, можно написать один CSS-файл для всех браузеров, а можно и отдельный для каждого браузера. Какой из этих вариантов лучше выбрать?

Ответ: Точного ответа здесь дать нельзя. Все зависит от конкретной задачи. Но можно перечислить несколько преимуществ и недостатков первого и второго метода, а вы уже сами решайте -- какой из них лучше использовать для вашей задачи.

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

Недостатки:

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

У второго метода все, естественно, наоборот ;)

Преимущества:

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

Недостаток один, но в некоторых задачах он перекрывает все преимущества:

  • трудно добиться совместимости файла стилей для разных броузеров (в особенности для НН4). Поэтому на отладку стилей порой уходит уйма времени.

Таким образом если вам трудно добиться совместимости файла стилей для разных броузеров -- используйте первый метод, если нет -- второй.


Valid HTML 4.0! Made with CSS
Все вопросы и пожелания сюда или сюда