Избавляемся от 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

Ссылки

Источник: https://www.kobzarev.com/makeup/getting-rid-of-css-hacks-in-internet-explorer/

Михаил Кобзарёв

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все. Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса. Ведет блог о разработке, дайджест в телеграмме и в ВК. Любит сиськи, баню и радиоэлектронику. 100% патриот (но это не точно). Тролль 542 уровня. Ездит в отпуск раз в 5 лет.

Добавить комментарий

%d такие блоггеры, как: