Условные комментарии Internet Explorer

Как мы все знаем, Internet Explorer это тот браузер, который доставляет веб разработчикам массу неудобств. Возможно это происходит потому, что Microsoft на данный момент имеет 3 совершенно разные версии браузера. Возможно потому, что ранние версии не стандартизованы. Возможно потому, что IE6 не обновлялся несколько лет. Какова бы не была причина, IE с нами и нам нужно что-то с этим делать. 

В каждой версии IE мы сталкиваемся с проблемами с CSS и JavaScript. Проблемы с margin, float, с абсолютным позиционированием, отсутствие поддержки PNG формата на протяжении долгого времени — вот лишь маленькая часть из тех проблем, с которыми сталкивается рядовой веб разработчик. К счастью, Internet Explorer поддерживает условные комментарии, которые позволяют нам адресовать выполнение блока кода HTML только в определенной версии этого браузера. 

Я придерживаюсь того мнения, что для решения проблем с IE нежелательно использовать хаки. Они неприемлемы, поскольку они основаны на нестандартных решениях, а, следовательно, вы не можете предсказать, как они поведут себя в новых версиях браузеров. Полнофункциональным решением при борьбе с некорректным отображением в IE6 является использование условных стилей. Тем более, что условные стили поддерживает вся линейка интернет-эксплореров, вплоть до IE 8, и с их помощью можно написать стиль для любой версии этого браузера или для нескольких версий одновременно.

Примеры условных комментариев для IE 

Код приведенный ниже, устанавливает красный цвет для всех ссылок, если браузер — любой из IE. 

Code
<!--[if IE]>
<style type="text/css">
a { color:#fff; }
</style>
< ![endif]-->

Этот код подключает файл скрипта IE8.js если версия Internet Explorer ниже версии 8. 

Code
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
< ![endif]-->

Приведенный ниже код исправляет проблему с PNG форматом если браузер IE6. 

Code
<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
  DD_belatedPNG.fix('.png');
</script>
< ![endif]-->

Синтаксис условных комментариев IE

Оператор  Пример Комментарий
!  [if !IE] Оператор «НЕ». Ставиться перед функцией, оператором. Имеет обратное булево значение.
lt  [if lt IE 5.5] Оператор «меньше чем». Возвращает истину, если первый аргумент
меньше второго аргумента.В данном случае «если версия IE ниже, чем 5.5″
lte  [if lte IE 6] Оператор «меньше или равно». Возвращает истину, если первый аргумент меньше или равен второму аргументу.
gt  [if gt IE 5] Оператор «больше чем». Возвращает истину, если первый аргумент больше второго аргумента.
gte  [if gte IE 7] Оператор «больше или равно». Возвращает истину, если первый аргумент больше или равен второму аргументу.
( )  [if !(IE 7)] Используется для создания более сложных операторов и подвыражений.
&  [if (gt IE 5)&(lt IE 7)] Оператор «И». Возвращает истину, если все условия выполняются.
|  [if (IE 6)|(IE 7)] Оператор «или». Возвращает истину, если хотя бы одно из условий выполняется.

Так как многие из нас не любят баги IE, то условные комментарии выглядят самым простым способ от них избавиться.

Для большей подробности взгляните на это и все станет понятней

1. Подгружаем стили для всех версий IE

Код
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

2. Прячем стили от всех версий IE

Код
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->

3. Подгружаем стили только для IE7

Код
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

4. Подгружаем стили только для IE6

Код
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

5. Подгружаем стили только для IE5

Код
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->

6. Подгружаем стили только для IE5.5

Код
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->

7. Подгружаем стили для IE6 и ниже

Код
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

Код
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

8. Подгружаем стили для IE7 и ниже

Код
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

Код
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

9. Подгружаем стили для IE8 и ниже

Код
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

Код
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

10. Подгружаем стили для IE6 и выше

Код
<!--[if gt IE 5.5]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />/
<![endif]-->

Код
<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

11. Подгружаем стили для IE7 и выше

Код
<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

Код
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

12. Подгружаем стили для IE8 и выше

Код
<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

Код
<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

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

Стиль только для IE7

Код
* html #div {
height: 300px;
}

Скрыть стиль от IE7

Код
#div {
_height: 300px;
}

Скрыть стиль от IE6 и ниже

Код
#div {
height/**/: 300px;
}

Код
html > body #div {
height: 300px;
}

Если для вас все что описано выше, темный лес, то тут все должно быть довольно просто!
Код
<!--[if IE 7]><link href="/ie7.css" rel="stylesheet" type="text/css" /><![endif]--> //подключение файла со стилями только для ИЕ 7
<!--[if IE 8]><link href="/ie8.css" rel="stylesheet" type="text/css" /><![endif]--> //подключение файла со стилями только для ИЕ 8
<!--[if IE 9]><link href="/ie9.css" rel="stylesheet" type="text/css" /><![endif]--> //подключение файла со стилями только для ИЕ 8
<!--[if lte IE 7]><link href="/ie.css" rel="stylesheet" type="text/css" /><![endif]--> //подключение файла со стилями для ИЕ версии 7 и ниже
<!--[if lte IE 8]><link href="/ie.css" rel="stylesheet" type="text/css" /><![endif]--> //подключение файла со стилями для ИЕ версии 8 и ниже
<!--[if lte IE 9]><link href="/ie.css" rel="stylesheet" type="text/css" /><![endif]--> //подключение файла со стилями для ИЕ версии 9 и ниже
<!--[if IE]><link href="/ie_all.css" rel="stylesheet" type="text/css" /><![endif]--> //подключение файла со стилями для всех версий ИЕ


Ценные ресурсы

* Довольно интересный материал на PPK
* Почитайте о возможности IE8 эмулировать IE7
* Ну и конечно, прочтите официальную MSDN документацию от Microsoft

А вы используете при верстке условные комментарии IE?

Пока вы думаете, посмотрите интересное видео об апгрейде IE с версии 1.0 до 9.0

http://youtu.be/k5QqYVurImY


  • FalleN

  • 2047

  • 1

  • 0

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

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

Для добавления вы должны авторизироваться!