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

17
Фев
2011

Условные комментарии для Internet Explorer (IE)

Всеми обожаемый Internet Explorer не понимает Ваш ультрасовременный CSS3 со всеми передовыми фишками? Вам нужен какой-то метод лечения? Используйте условные комментарии на Ваших проектах, с помощью которых, Вы сможете указать всей линейке браузера IE или каждой его версии по отдельности, свои стили CSS.

Для любителей поорать, что это боян и старое, как мир, попрошу воздержаться. Не все такие умные, как Вы.

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

Данные комментарии включаются в HTML-страницу и выглядят следующим образом:

Пример 1.

Можно сразу в комментариях прописать определенные CSS-правила для Internet Explorer, если этих правил немного:

<!--[if IE]>

<style type="text/css">
#container {
width:100%;
margin:0 auto;
padding:0;
}
</style>

<![endif]-->

Пример 2.

Если же у вас получился большой листинг, Вам будет проще создать отдельный CSS-файл и в условных комментариях сослаться на него:

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

Таким образом, когда пользователь зашел на Ваш сайт с Internet Explorer-а (любой версии), все стили будут подгружаться с указанного в условных комментариях CSS-файла (Пример 2) или будет руководствоваться теми правилами, которые прописаны в комментариях (Пример 1).

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

Наверное, Вас интересует вопрос: "а можно ли для определенной версии IE прописать свои стили?". Естественно!

Пример 3.

Указываем правила только для Internet Explorer 8:

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

Пример 4.

Указываем правила только для Internet Explorer 7:

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

Пример 5.

Указываем правила только для Internet Explorer 6:

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

Ниже, я думаю, опускаться не имеет смысла. Предполагаю, что тактика понятна.

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

Иногда бывают такие ситуации, когда один и тот же блок нужно по разному загружать в IE и в нормальных браузерах и при этом правила CSS не спасают. Вот такие комментарии Вам в этом и помогут. Мне, по крайней мере, помогли в одной из моих работ.

Пример 6.

<!--[if !IE]><!-->
<link rel="stylesheet" href="ie.css" type="text/css" />
или HTML-разметка
<!--<![endif]-->

Операторы условных комментариев

Также можно использовать специальные операторы в комментариях:

  • lt - ниже;
  • gt - выше;
  • lte - ниже или равно;
  • gte - выше или равно;
  • ! - отрицательный оператор.

Примеры операторов

Пример 7.

Правила сработают для всех версий IE, которые ниже 6-й версии:

<!--[if lt IE 6]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->

Пример 8.

Правила сработают для всех версий IE, которые выше 6-й версии:

<!--[if gt IE 6]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->

Пример 9.

Правила сработают для 6-й версии IE и всех, что ниже:

<!--[if lte IE 6]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->

Пример 10.

Правила сработают для 6-й версии IE и всех, что выше:

<!--[if gte IE 6]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->

Пример 11.

Правила сработают для всех, кроме 6-й версии IE:

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

Другие возможности

С помощью данных комментариев можно не только указывать собственные стили для IE, но и выводить блоки или сообщения для пользователей Internet Explorer. Наглядный пример, мой проект - Art-Stream. Решение нашел тут + немного изменил и поменял иконки с ссылками.

В итоге: с помощью условных комментариев, я указал, чтобы всем пользователям IE, которые зашли на сайт, выводилось сообщение, что их браузер устаревший и возможно некорректное отображение элементов на сайте, также предложил скачать любой из современных браузеров.

Всплывающее сообщение для пользователей Internet Explorer (IE)

Скриншот кликабельный

Естественно, есть разные решения, как выводить подобные "алерты", но я выбрал такой способ. Весьма удобный и простой.

Надеюсь, сегодняшняя информация Вам когда-нибудь пригодиться ;) А те, кто знают, те молодцы)

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

Подписаться на RSSВы можете подписаться на RSS или на E-mail рассылку:

Оставить комментарий с помощью формы ВКонтакте

Комментариев (9) к “Условные комментарии для Internet Explorer”

  1. [...] This post was mentioned on Twitter by Anna Volkova, Diamaxx. Diamaxx said: Условные комментарии для Internet Explorer: Всеми обожаемый Internet Explorer не понимает Ваш ультрасовременный… http://bit.ly/g8vhl1 [...]

  2. Kaena пишет:

    Ай-вэй, какой ужас весь этот CSS! %)

  3. Ека пишет:

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

    Олег, молодец что написал этот пост, добавил в закладки. Не ровен час — придут и ко мне, любители всяких разных с латексом и шариками :)

    • Oleg Mykhailenko пишет:

      Заказчики то не пользуются, но вот их клиенты, которые заходят на их же сайты – могут)))
      Спасибо! Поменьше тебе таких любителей! ;)

  4. vadiem пишет:

    Надо наверное из всех правил ввести одно: запретить вообще отображать сайты при пользовании этим недобраузером. )) Не могу сказать, что я совсем игнорирую его при верстке, но так хочется навсегда забыть о его существовании! Даже если закрыть глаза на его своеобразную интерпретацию отображения страниц, то его любимое окно: “Программа выполнила недопустимую операцию и будет закрыта” реально ведь достает и самих пользователей! Так нет же! Как медом намазано. Не заставишь поменять туроператора даже этим! )))

  5. Андрей пишет:

    Блин, и не говорите. Нафиг этот IE.
    Приходится ручками подчищать.

  6. Blacky пишет:

    Chrome рулит