Кросс-браузерный CSS Часть I. Введение в проблему
Кросс-браузерный CSS
Часть I. Введение в проблему
Цикл статей посвящен проблеме адаптации таблиц стилей под различные браузеры. Создан он на основе книги "Веб-мастеринг средствами CSS", которая на сегодняшний день является единственной книгой по каскадным таблицам стилей на русском языке. Автор будет крайне признателен читателям за отзывы и комментарии.
Для начала разберемся, что обозначает понятие кросс-браузерный в целом. Вы, наверное, слышали о термине кросс-платформенный. Это одна из характеристик некоторых языков программирования и обозначает она то, что программа на данном языке будет работать одинаково на любой платформе, будь то Windows, Macintosh, Unix или Sun Solaris. Подобным свойством обладает язык Java.
По аналогии термин кросс-браузерный обозначает, что данный код будет работать корректно во всех браузерах. Причем заметьте, что здесь отсутствует слово одинаково. Дело в том, что многие браузеры отображают код неодинаково, но корректно, т.е. согласно спецификации. Именно по этой причине слово одинаково для браузеров неприменимо, зато очень подходит слово корректно. Если же рассматривать каскадные таблицы стилей, то термин кросс-браузерный CSS обозначает, что стили будут корректно отображаться разными браузерами.
Итак, для чего же нам кросс-браузерный CSS? Ответ достаточно тривиален. Если бы все браузеры полностью и одинаково поддерживали спецификации CSS-1 и CSS-2, то он бы нам не понадобился, однако это совершенно идеалистическая картина. Таким образом, можно выделить две причины, которые оправдывают применение кросс-браузерного CSS:
• Неодинаковая поддержка браузерами селекторов, свойств, значений и прочих понятий из спецификаций CSS-1 и CSS-2.
• Неодинаковый набор багов браузеров в реализации поддержки одинаковых селекторов, свойств и прочих элементов из спецификаций CSS-1 и CSS-2.
Главная цель HTML-верстальщика — сделать так, чтобы сайт одинаково смотрелся в максимальном количестве браузеров. Задача сложная и нетривиальная. Раньше проблемы возникали из-за неодинаковой поддержки HTML, однако на данный момент ситуация улучшилась. Во-первых, нашли очень много способов устранения различий, во-вторых, поддержка HTML стала практически одинаковой начиная с шестых версий браузеров. Сейчас проблемы возникают из-за CSS, потому что стандарт достаточно молод (по меркам производителей браузеров), так что реализация его поддержки весьма неодинакова и сильно варьируется от браузера к браузеру.
Если отталкиваться от главной цели HTML-верстальщика, то возможно несколько вариантов действий:
• Отказаться от использования каскадных таблиц стилей вообще. Вы, конечно, понимаете, что в этом случае работы у HTML-кодировщика прибавится, и немало, потому что, по меньшей мере, придется повсеместно вставлять теги <FONT> . Кроме того, невозможно будет делать некоторые эффекты, наподобие hover, которые осуществляются только с помощью каскадных таблиц стилей.
• Использовать CSS минимально, т.е. задавать цвета и параметры шрифта на странице, потому что эти свойства реализованы корректно во всех браузерах. К сожалению, именно так поступает большинство HTML-кодировщиков, потому что для этого не надо детально знать каскадные таблицы стилей и не надо беспокоиться о совместимости. Такой подход может объясняться либо тотальным недостатком времени на изучение новой технологии, либо строгим указанием равняться на браузеры третьих и четвертых версий, либо природной ленью.
• Отбросить браузеры всех версий ниже пятой. Тогда можно не опасаться использовать практически весь набор из CSS-1, потому что в пятых версиях реализация данного стандарта достаточно хорошая. Но в таком подходе все же есть слабые места. Например, вы никогда не сможете таким образом сверстать сайт на основе блоков, потому что блоковая модель реализована по-разному в разных браузерах. Так что одно из главных преимуществ CSS остается за бортом. К слову сказать, чтобы сверстать сайт на основе блоков все равно придется отказаться от поддержки старых браузеров.
• Можно детально изучить нюансы поддержки каскадных таблиц стилей браузерами и писать кросс-браузерный код на основе различных хитростей и уловок. Этот способ будет работать во многих случаях, однако в последних версиях браузеров из-за корректности реализации поддержки CSS таких уловок осталось очень мало, и пользоваться ими сложно. Кроме того, писать такой код при верстке больших сайтов блоками неимоверно сложно и времени отнимает гораздо больше, чем кодирование с помощью таблиц.
• Можно создать несколько таблиц стилей, каждая из которых будет адаптирована строго под определенный браузер. Затем с помощью JavaScript надо детектировать браузер и его версию и, в зависимости от типа браузера, подключать к странице нужный файл с расширением .css. Этот способ однозначно лучший для сложных таблиц стилей, потому что не надо думать о методах сокрытия тех или иных частей кода от того или иного браузера. Надо просто создавать для каждого браузера свою таблицу стилей, которая учитывает все его особенности.
Мы по определению себя ограничивать не хотим, поэтому без кросс-браузерного кода нам не обойтись. Два последних способа в принципе хорошие и подходящие, но когда использовать тот или иной способ, надо решать в каждом конкретном случае отдельно.
В первую очередь мы займемся рассмотрением методов сокрытия кусков кода от различных браузеров. Принципиально можно разделить все эти методы на несколько групп:
• Баги браузера, которые приводят к тому, что он не видит определенный кусок кода.
• Пробелы в реализации поддержки CSS. Браузер может не поддерживать некоторые типы селекторов или способы подключения таблиц стилей к страницам.
Можно рассматривать методы сокрытия стилей от браузеров, а можно брать отдельный браузер и рассматривать все способы, которые могут скрыть код именно от него. Оба подхода имеют как положительные, так и отрицательные стороны. Для понимания сути процесса лучше годится первый подход, потому что он логичнее, а для наглядности лучше второй подход, потому что он разбит по браузерам. Я вначале рассмотрю именно методы, т.е. воспользуюсь первым подходом, а затем сделаю общую таблицу, в которой будет показана вся картина целиком. Начнем со способов подключения CSS к странице.
Подключение таблицы стилей
Может осуществляться тремя способами:
• С помощью элемента <LINK> .
• C помощью инструкции @import.
• С помощью элемента <STYLE> (естественно, таким образом можно подключать только внутренние таблицы стилей).
Начнем по порядку.
Атрибут MEDIA
Элемент <LINK> имеет один-единственный атрибут, который нам может помочь, это атрибут MEDIA. Дело в том, что данный атрибут плохо поддерживается браузером Netscape 4 (он понимает только значение MEDIA="screen"), так что скрывать таблицу стилей от этого браузера можно с помощью такой строки:
<LINK HREF="none_nn4.css" TYPE="text/ css" REL="stylesheet" MEDIA="all">
Если вы хотите сделать таблицы стилей для разных устройств, например, для экрана монитора и для принтера, то такой способ сокрытия таблиц стилей от Netscape 4 уже не пройдет. Для разграничения стилей на экран монитора и принтер надо подключать их так:
<LINK HREF="screen.css" TYPE="text/css" REL="stylesheet" MEDIA="screen">
<LINK HREF="print.css" TYPE="text/css" REL="stylesheet" MEDIA="print">
Однако Netscape 4 прекрасно понимает только MEDIA="screen", так что надо немного подумать и найти выход. Браузер Netscape 4 не понимает, если значения в атрибуте перечисляются через запятую. Например, если подключить таблицу стилей таким образом:
<LINK HREF="screen_none_nn4.css" TYPE="text/ css" REL="stylesheet" MEDIA="screen, projection">
то она по-прежнему будет специфичной для экрана монитора, но Netscape 4 ее уже не поймет. Так что разделение стилей для браузера Netscape 4 и остальных браузеров будет реализовываться следующим образом:
<LINK HREF="nn4.css" TYPE="text/css" REL="stylesheet">
<LINK HREF="screen.css" TYPE="text/css" REL="stylesheet" MEDIA="screen, projection">
<LINK HREF="print.css" TYPE="text/css" REL="stylesheet" MEDIA="print">
Здесь надо рассказать об одном из главных правил использования подобного кросс-браузерного кода. Например, вы хотите, чтобы для всех браузеров, кроме Netscape 4, ширина полей всего документа была 0, а для Netscape 4 — 15% от ширины окна браузера. Для чего это может вообще понадобиться? Допустим, вы не хотите поддерживать браузер Netscape 4, но надо, чтобы контент был доступен всем, так что для этого браузера можно просто сделать большие поля, пусть текст будет выводиться шрифтом по умолчанию, так что читать можно будет, хотя и красоту дизайна посетитель сайта не увидит. Тогда вы пишете для Netscape 4 таблицу стилей
BODY {
margin-left: 15%;
margin-right: 15%}
которую сохраните в отдельный файл nn4.css. Но все остальные браузеры тоже поймут эти объявления, так что есть два правила, которые надо неукоснительно выполнять:
• все объявления, указанные в таблице стилей для старых браузеров, должны переписываться в таблице стилей для новых браузеров;
• таблица стилей для новых браузеров должна подключаться последней, чтобы объявления переписались.
Если вернуться к примеру, то для новых браузеров вы напишете стиль
BODY {
margin: 0px}
и поместите его в файл all.css. А подключаться эти файлы будут только в таком порядке:
<LINK HREF="nn4.css" TYPE="text/css" REL="stylesheet">
<LINK HREF="all.css" TYPE="text/css" REL="stylesheet" MEDIA="all">
Есть еще одна очень интересная возможность скрывать стили от браузера Opera всех версий. Ее обнаружил Хуан Позо. Для этого надо вместо MEDIA="screen" написать MEDIA="scReen", т.е. заменить букву "r" на ее код R. Что интересно, все остальные браузеры применяют стили, а вот Opera нет. Так что для сокрытия стилей от браузеров Opera 4+ надо написать такой код:
<LINK HREF="none_op.css" TYPE="text/css" REL="stylesheet" MEDIA="scReen">
Инструкция @import
Эта инструкция нам интересна тем, что ее не понимает не только браузер Netscape 4, но и браузер Internet Explo-rer 4 и ниже. Так что можно скрывать таблицу стилей от браузеров четвертого поколения. Делается это так. Вы пишете две таблицы: одну для четвертых версий, а вторую для пятых. Например, первую назовем ver4.css, а вторую — ver5.css. Тогда подключение стилей будет выглядеть так:
<LINK HREF="ver4.css" TYPE="text/css" REL="stylesheet">
<STYLE TYPE="text/css">
@import url("ver5.css")
</STYLE>
Если вам надо скрыть от браузера Netscape 4 внутреннюю таблицу стилей, то можно опять же воспользоваться атрибутом MEDIA или же инструкцией @media. В следующем примере все объявления будут скрыты от Netscape 4:
<STYLE TYPE="text/css" MEDIA="all">
P {
color: #000}
</STYLE>
<STYLE TYPE="text/css">
@media all {
P {
color: #000}}
</STYLE>
Больше нет способов скрыть таблицу стилей при ее подключении. В следующий раз поговорим о том, как можно скрывать объявления для различных браузеров с помощью селекторов. Кстати говоря, это достаточно перспективный способ.
Михаил Дубаков
http://wa.artel.by
Часть I. Введение в проблему
Цикл статей посвящен проблеме адаптации таблиц стилей под различные браузеры. Создан он на основе книги "Веб-мастеринг средствами CSS", которая на сегодняшний день является единственной книгой по каскадным таблицам стилей на русском языке. Автор будет крайне признателен читателям за отзывы и комментарии.
Для начала разберемся, что обозначает понятие кросс-браузерный в целом. Вы, наверное, слышали о термине кросс-платформенный. Это одна из характеристик некоторых языков программирования и обозначает она то, что программа на данном языке будет работать одинаково на любой платформе, будь то Windows, Macintosh, Unix или Sun Solaris. Подобным свойством обладает язык Java.
По аналогии термин кросс-браузерный обозначает, что данный код будет работать корректно во всех браузерах. Причем заметьте, что здесь отсутствует слово одинаково. Дело в том, что многие браузеры отображают код неодинаково, но корректно, т.е. согласно спецификации. Именно по этой причине слово одинаково для браузеров неприменимо, зато очень подходит слово корректно. Если же рассматривать каскадные таблицы стилей, то термин кросс-браузерный CSS обозначает, что стили будут корректно отображаться разными браузерами.
Итак, для чего же нам кросс-браузерный CSS? Ответ достаточно тривиален. Если бы все браузеры полностью и одинаково поддерживали спецификации CSS-1 и CSS-2, то он бы нам не понадобился, однако это совершенно идеалистическая картина. Таким образом, можно выделить две причины, которые оправдывают применение кросс-браузерного CSS:
• Неодинаковая поддержка браузерами селекторов, свойств, значений и прочих понятий из спецификаций CSS-1 и CSS-2.
• Неодинаковый набор багов браузеров в реализации поддержки одинаковых селекторов, свойств и прочих элементов из спецификаций CSS-1 и CSS-2.
Главная цель HTML-верстальщика — сделать так, чтобы сайт одинаково смотрелся в максимальном количестве браузеров. Задача сложная и нетривиальная. Раньше проблемы возникали из-за неодинаковой поддержки HTML, однако на данный момент ситуация улучшилась. Во-первых, нашли очень много способов устранения различий, во-вторых, поддержка HTML стала практически одинаковой начиная с шестых версий браузеров. Сейчас проблемы возникают из-за CSS, потому что стандарт достаточно молод (по меркам производителей браузеров), так что реализация его поддержки весьма неодинакова и сильно варьируется от браузера к браузеру.
Если отталкиваться от главной цели HTML-верстальщика, то возможно несколько вариантов действий:
• Отказаться от использования каскадных таблиц стилей вообще. Вы, конечно, понимаете, что в этом случае работы у HTML-кодировщика прибавится, и немало, потому что, по меньшей мере, придется повсеместно вставлять теги <FONT> . Кроме того, невозможно будет делать некоторые эффекты, наподобие hover, которые осуществляются только с помощью каскадных таблиц стилей.
• Использовать CSS минимально, т.е. задавать цвета и параметры шрифта на странице, потому что эти свойства реализованы корректно во всех браузерах. К сожалению, именно так поступает большинство HTML-кодировщиков, потому что для этого не надо детально знать каскадные таблицы стилей и не надо беспокоиться о совместимости. Такой подход может объясняться либо тотальным недостатком времени на изучение новой технологии, либо строгим указанием равняться на браузеры третьих и четвертых версий, либо природной ленью.
• Отбросить браузеры всех версий ниже пятой. Тогда можно не опасаться использовать практически весь набор из CSS-1, потому что в пятых версиях реализация данного стандарта достаточно хорошая. Но в таком подходе все же есть слабые места. Например, вы никогда не сможете таким образом сверстать сайт на основе блоков, потому что блоковая модель реализована по-разному в разных браузерах. Так что одно из главных преимуществ CSS остается за бортом. К слову сказать, чтобы сверстать сайт на основе блоков все равно придется отказаться от поддержки старых браузеров.
• Можно детально изучить нюансы поддержки каскадных таблиц стилей браузерами и писать кросс-браузерный код на основе различных хитростей и уловок. Этот способ будет работать во многих случаях, однако в последних версиях браузеров из-за корректности реализации поддержки CSS таких уловок осталось очень мало, и пользоваться ими сложно. Кроме того, писать такой код при верстке больших сайтов блоками неимоверно сложно и времени отнимает гораздо больше, чем кодирование с помощью таблиц.
• Можно создать несколько таблиц стилей, каждая из которых будет адаптирована строго под определенный браузер. Затем с помощью JavaScript надо детектировать браузер и его версию и, в зависимости от типа браузера, подключать к странице нужный файл с расширением .css. Этот способ однозначно лучший для сложных таблиц стилей, потому что не надо думать о методах сокрытия тех или иных частей кода от того или иного браузера. Надо просто создавать для каждого браузера свою таблицу стилей, которая учитывает все его особенности.
Мы по определению себя ограничивать не хотим, поэтому без кросс-браузерного кода нам не обойтись. Два последних способа в принципе хорошие и подходящие, но когда использовать тот или иной способ, надо решать в каждом конкретном случае отдельно.
В первую очередь мы займемся рассмотрением методов сокрытия кусков кода от различных браузеров. Принципиально можно разделить все эти методы на несколько групп:
• Баги браузера, которые приводят к тому, что он не видит определенный кусок кода.
• Пробелы в реализации поддержки CSS. Браузер может не поддерживать некоторые типы селекторов или способы подключения таблиц стилей к страницам.
Можно рассматривать методы сокрытия стилей от браузеров, а можно брать отдельный браузер и рассматривать все способы, которые могут скрыть код именно от него. Оба подхода имеют как положительные, так и отрицательные стороны. Для понимания сути процесса лучше годится первый подход, потому что он логичнее, а для наглядности лучше второй подход, потому что он разбит по браузерам. Я вначале рассмотрю именно методы, т.е. воспользуюсь первым подходом, а затем сделаю общую таблицу, в которой будет показана вся картина целиком. Начнем со способов подключения CSS к странице.
Подключение таблицы стилей
Может осуществляться тремя способами:
• С помощью элемента <LINK> .
• C помощью инструкции @import.
• С помощью элемента <STYLE> (естественно, таким образом можно подключать только внутренние таблицы стилей).
Начнем по порядку.
Атрибут MEDIA
Элемент <LINK> имеет один-единственный атрибут, который нам может помочь, это атрибут MEDIA. Дело в том, что данный атрибут плохо поддерживается браузером Netscape 4 (он понимает только значение MEDIA="screen"), так что скрывать таблицу стилей от этого браузера можно с помощью такой строки:
<LINK HREF="none_nn4.css" TYPE="text/ css" REL="stylesheet" MEDIA="all">
Если вы хотите сделать таблицы стилей для разных устройств, например, для экрана монитора и для принтера, то такой способ сокрытия таблиц стилей от Netscape 4 уже не пройдет. Для разграничения стилей на экран монитора и принтер надо подключать их так:
<LINK HREF="screen.css" TYPE="text/css" REL="stylesheet" MEDIA="screen">
<LINK HREF="print.css" TYPE="text/css" REL="stylesheet" MEDIA="print">
Однако Netscape 4 прекрасно понимает только MEDIA="screen", так что надо немного подумать и найти выход. Браузер Netscape 4 не понимает, если значения в атрибуте перечисляются через запятую. Например, если подключить таблицу стилей таким образом:
<LINK HREF="screen_none_nn4.css" TYPE="text/ css" REL="stylesheet" MEDIA="screen, projection">
то она по-прежнему будет специфичной для экрана монитора, но Netscape 4 ее уже не поймет. Так что разделение стилей для браузера Netscape 4 и остальных браузеров будет реализовываться следующим образом:
<LINK HREF="nn4.css" TYPE="text/css" REL="stylesheet">
<LINK HREF="screen.css" TYPE="text/css" REL="stylesheet" MEDIA="screen, projection">
<LINK HREF="print.css" TYPE="text/css" REL="stylesheet" MEDIA="print">
Здесь надо рассказать об одном из главных правил использования подобного кросс-браузерного кода. Например, вы хотите, чтобы для всех браузеров, кроме Netscape 4, ширина полей всего документа была 0, а для Netscape 4 — 15% от ширины окна браузера. Для чего это может вообще понадобиться? Допустим, вы не хотите поддерживать браузер Netscape 4, но надо, чтобы контент был доступен всем, так что для этого браузера можно просто сделать большие поля, пусть текст будет выводиться шрифтом по умолчанию, так что читать можно будет, хотя и красоту дизайна посетитель сайта не увидит. Тогда вы пишете для Netscape 4 таблицу стилей
BODY {
margin-left: 15%;
margin-right: 15%}
которую сохраните в отдельный файл nn4.css. Но все остальные браузеры тоже поймут эти объявления, так что есть два правила, которые надо неукоснительно выполнять:
• все объявления, указанные в таблице стилей для старых браузеров, должны переписываться в таблице стилей для новых браузеров;
• таблица стилей для новых браузеров должна подключаться последней, чтобы объявления переписались.
Если вернуться к примеру, то для новых браузеров вы напишете стиль
BODY {
margin: 0px}
и поместите его в файл all.css. А подключаться эти файлы будут только в таком порядке:
<LINK HREF="nn4.css" TYPE="text/css" REL="stylesheet">
<LINK HREF="all.css" TYPE="text/css" REL="stylesheet" MEDIA="all">
Есть еще одна очень интересная возможность скрывать стили от браузера Opera всех версий. Ее обнаружил Хуан Позо. Для этого надо вместо MEDIA="screen" написать MEDIA="scReen", т.е. заменить букву "r" на ее код R. Что интересно, все остальные браузеры применяют стили, а вот Opera нет. Так что для сокрытия стилей от браузеров Opera 4+ надо написать такой код:
<LINK HREF="none_op.css" TYPE="text/css" REL="stylesheet" MEDIA="scReen">
Инструкция @import
Эта инструкция нам интересна тем, что ее не понимает не только браузер Netscape 4, но и браузер Internet Explo-rer 4 и ниже. Так что можно скрывать таблицу стилей от браузеров четвертого поколения. Делается это так. Вы пишете две таблицы: одну для четвертых версий, а вторую для пятых. Например, первую назовем ver4.css, а вторую — ver5.css. Тогда подключение стилей будет выглядеть так:
<LINK HREF="ver4.css" TYPE="text/css" REL="stylesheet">
<STYLE TYPE="text/css">
@import url("ver5.css")
</STYLE>
Если вам надо скрыть от браузера Netscape 4 внутреннюю таблицу стилей, то можно опять же воспользоваться атрибутом MEDIA или же инструкцией @media. В следующем примере все объявления будут скрыты от Netscape 4:
<STYLE TYPE="text/css" MEDIA="all">
P {
color: #000}
</STYLE>
<STYLE TYPE="text/css">
@media all {
P {
color: #000}}
</STYLE>
Больше нет способов скрыть таблицу стилей при ее подключении. В следующий раз поговорим о том, как можно скрывать объявления для различных браузеров с помощью селекторов. Кстати говоря, это достаточно перспективный способ.
Михаил Дубаков
http://wa.artel.by
Компьютерная газета. Статья была опубликована в номере 50 за 2002 год в рубрике программирование :: разное
