Веб-разработка Оптимальный способ создания кроссбраузерных CSS

При верстке веб-сайтов очень часто возникает ситуация, когда невозможно написать набор css-свойств, который будут одинаково хорошо понимать все основные браузеры. И если с браузерами Firefox, Google Chrome, Opera и Safari такая проблема чаще всего не возникает, то в случае с различными версиями Internet Explorer добиться кроссбраузерной верстки очень сложно. Поэтому для решения этой проблемы нужно написать часть css-свойств специально для некоторых версий IE (чаще всего это IE6 и IE7). Сделать это можно двумя способами: первый — использование условных комментариев Internet Explorer (Conditional comments), второй — применение css-хаков (например, *margin-left:10px или _margin-left:10px). Оба способа имеют ряд недостатков, но, к счастью, есть еще одно решение, которое я считаю самым оптимальным для создания кроссбраузерных css-файлов.

Сначала более подробно о недостатках первых двух способах. В случае с использованием условных комментариев мы подгружаем отдельный css-файл с дополнительными стилями для различных версий Internet Explorer. Например, так:

<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="ie7.css" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.css" /><![endif]-->

Недостатки такого способа заключаются в следующем:

  • мы получаем дополнительные http-запросы для подгрузки файлов со стилями для различных версий Internet Explorer, что негативно скажется на времени загрузки страницы;
  • стили разбиваются на разные файлы, что очень сильно затрудняет их поиск во время работы над версткой сайта (я сам очень часто работал с такими проектами, где отдельные css-файлы для ie7 являются нормой, и потратил кучу времени на понимание, откуда же, черт возьми, грузится тот или иной стиль для IE).

Причем второй недостаток я считаю очень существенным. И в этом плане даже использование css-хаков для IE кажется более удачным способом добиться кроссбраузерной верстки. Но у css-хаков тоже есть недостаток — сайт, на котором они используются не пройдет валидацию. Если валидация веб-страницы не важна, то можно использовать хаки, но существует более изящное решение, чем первые два, которое лишено описанных выше недостатков. С его помощью можно писать все стили в одном файле, который успешно пройдет валидацию. Этот способ описан на сайте Пола Айриша. Его суть заключается в том, что с помощью условных комментариев мы не подгружаем дополнительный css-файл, а просто выставляем особый класс для тега <html>, подобно тому, как выставляет классы js-библиотека Modernizr.

Код для открывающего тега <html>, таким образом, будет выглядеть так:

<!--[if lt IE 7]><html class="ie ie6 lte9 lte8 lte7"><![endif]-->
<!--[if IE 7]><html class="ie ie7 lte9 lte8 lte7"><![endif]-->
<!--[if IE 8]><html class="ie ie8 lte9 lte8"><![endif]-->
<!--[if IE 9]><html class="ie ie9 lte9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html class=""><!--<![endif]-->

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

.lte7 .b-post-date {
    display:inline;   /* стиль для IE7 и ниже */
}
.ie6 .b-post-date-year {
    padding-bottom:0; /* стиль только для IE6 */
}

В моем блоге, кстати, используется именно этот способ кроссбраузерной верстки, чтобы в браузерах IE6 и IE7 страницы сайта отображались также, как и в других браузерах.

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

  1. Алексей

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

    Вы пишите:

    мы получаем дополнительные http-запросы для подгрузки файлов со стилями для различных версий Internet Explorer, что негативно скажется на времени загрузки страницы;

    Загружается файл под конкретную версию браузера, а остальные игнорируются. Откуда взялись дополнительные запросы?

    А вообще решение интересное и вполне юзабильное. На небольших по объёму css-кода проектах вполне применимо.

  2. Андрей Аносов

    Всегда нужно стараться писать чистый код без использования хаков. Например, вполне можно написать css-стили, которые одинаково будут работать в Firefox 3+/Chrome/Opera 10+/Safari/IE8+. Обычно необходимость в css-хаках возникает при поддержке IE6-7. Но если грамотно и внимательно писать css-стили, то таких хаков будет немного и размер общего файла увеличится не существенно.
    Разбиение же стилей на файлы для разных версий браузера плохо из-за того, что усложняется поддержка таких сайтов. Например, в IE7 нет удобных инструментов для веб-разработки и времени на поиск нужного css-свойства, если оно написано в отдельном для IE файле, может занять гораздо больше времени, чем если оно было бы написано в том же файле под общими css-свойствами. Кроме того, исправляя даже какую-нибудь мелочь, нужно всегда помнить, что где-то в отдельном файле может быть правило для IE, а так все свойства сразу на виду, и ничего нельзя забыть исправить.