Обложка к записи Избавляемся от CSS хаков в Internet Explorer
Время для прочтения: 1 мин. 10 сек.

Избавляемся от CSS хаков в Internet Explorer

Большинство вебмастеров — разработчиков сегодня делятся на два лагеря: первые предпочитают условные комментарии для отделения версий Internet Explorer друг от друга, вторые — CSS хаки.

Я не отношусь ни к одной из перечисленных групп. И вот почему.

Любители условных комментариев делают примерно так:



<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 запросы
  • Пока браузер не получит содержимое файлов в условных комментариях, загрузка документа не продолжится
  • CSS правила получаются разбросанными по нескольким файлам, что затрудняет их поддержку и дальнейшую доработку

Любители же CSS хаков поступают проще:


div.foo {
    float: left;
    margin-left: 10px;
    _margin-left: 5px;
}

В данном подходе также имеются свои недостатки:

  • Код получается невалидным
  • Хаки основаны на неверной интерпретации браузером правил CSS (т. е. они заведомо «ошибочны»)
  • Никто не знает чем обернется их использование в дальнейшем

Что делаю я?

Я использую симбиоз этих двух вариантов в таком виде:

HTML:


<!doctype 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]-->
<head>
...

CSS:


div.bar {
    width: 300px;
}
.ie6 div.bar {
    width: 310px;
}
.ie7 div.bar {
    width: 290px;
}


Преимущества данного подхода очевидны:

  • Нет лишних запросов к серверу
  • Все стили структурированы и находятся в одном файле
  • Валидный и понятный код
  • Четкое разделение версий Internet Explorer
  • Метод совместим с WordPress, Dojo, Modernizr

Ссылки

Пошерить
Запинить
Отправить
Вотсап

Смотрите также

Предыдущая запись

Комментарии