Окт
28
0

Создаем кроссбраузерный CSS

Author K_E_V_in    Category Полезные скрипты     Tags , , , , , , , , , ,

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

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

Итак, перед тэгом <body> в нашем файле помещаем такой код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$sBrowserClass = "";
if (preg_match("/Opera\W*(\d+(:?\.\d+)?)/",@$_SERVER["HTTP_USER_AGENT"], $aMatch)) {
$sBrowserClass = "isOpera";
if (@$aMatch[1] &amp;&amp; $aMatch[1] &lt; 9) {
$sBrowserClass .= " isOpera8";
}
} elseif (preg_match("/MSIE\W*(\d+(:?\.\d+)?)/",@$_SERVER["HTTP_USER_AGENT"], $aMatch)) {
$sBrowserClass = "isIE";
if (@$aMatch[1] &amp;&amp; $aMatch[1] &lt; 7) {
$sBrowserClass .= " isIE6";
}
}
if ($sBrowserClass) {
$sBrowserClass = ' class="' . $sBrowserClass . '"';
}
?&gt;
&gt;
<!--formatted-->

Теперь для 7 тэг body будет выглядеть следующим образом: <body class=”isIE”>
Для IE6 и ниже тэг body будет выглядеть так: <body class=”isIE isIE6″>

Для Opera9 и выше тэг body будет выглядеть так: <body class=”isOpera”>
Для Opera ниже 9-й версии тэг body будет выглядеть так: <body class=”isOpera isOpera8″>

Для остальных браузеров тег будет выглядеть просто: <body>

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

Я думаю, что многие уже догадались, как должен теперь выглядеть css- в котором мы будем задавать стили.

Для тех, кто еще не догадался, я приведу пример:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#top_menu {
margin: 0px 5px;
overflow: hidden;
background: #DAE0D2 url(&quot;/images/m_bg.gif&quot;) repeat-x bottom;
padding-bottom: 1px;
display: block;
}
.isIE #top_menu {
height: 28px;
}
.isIE6 #top_menu {
height: 30px;
overflow: auto;
}
.isOpera #top_menu {
margin-bottom: 6px;
}

Теперь я думаю всем понятна структура этого CSS-файла.

Порядок работы у нас будет такой:
сначала пишем полную версию CSS-файла и делаем его отладку, например на последней версии FF;
пишем дополнения/изменения отдельных определений для последних версий Opera и IE;
пишем дополнения/изменения для более старых версий Opera и IE;

Удобство данной методики заключается в том что вы располагаете все варианты написания CSS-определений под разные браузеры – в одном файле, в непосредственной близости друг от друга. Это позволит вам в последствии легко вносить изменения в этот файл – сразу для для всех браузеров. Вам нет необходимости использовать хаки, поэтому, с большой долей вероятности этот код будет правильно работать и в более поздних версиях браузеров. Незначительное CSS-файла никак не повлияет на общую скорость загрузки сайта, т.к. эти дополнения составляют, как правило, 5-10% от исходного размера CSS-файла. А иногда и того меньше.

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

Если Вам не хочется использовать никакие серверные языки, и достаточно определить стили только для различных версий IE, то можно обойтись условными комментариями. Например, так:

1
2
3
&lt;!--[if gte IE 7]&gt;&lt;body class="isIE"&gt;&lt;![endif]--&gt;
&lt;!--[if lt IE 7]&gt;&lt;body class="isIE isIE6"&gt;&lt;![endif]--&gt;
&lt;!--[if !IE]&gt;--&gt;&lt;body&gt;&lt;!--&lt;![endif]--&gt;<!--formatted-->

Александр Носов

Прокомментировать

Рубрики

Облако меток

На волнах твиттера

В прямом эфире