Большинство вебмастеров — разработчиков сегодня делятся на два лагеря: первые предпочитают условные комментарии для отделения версий 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/
