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

Тестваш ли сайта си в Internet Explorer? Може би оставаш разочарован/-а всеки път, когато откриеш, че (за съжаление) голяма част от новите CSS 3 свойства не се поддържат в някои стари версии на IE. А още по-лошата новина е, че все още доста хора ги използват.

А мислил/-а ли си си, колко хубаво би било, ако имаше начин да заредиш допълнителен CSS и/или JS файл единствено в IE, чрез който да “фиксираш” част от проблемите. Е, има такъв начин. Използването на условни коментари е идеалното решение на проблема. Разгледай урока, за да разбереш как да ги приложиш в своя сайт.

Какво представляват условните коментари?

Условните коментари (Conditional comments), както името ти подсказва, са специални коментари, които се базират на определено условие. Те работят единствено в Internet Explorer и ти позволяват да таргетираш една или повече версии на IE, където в последствие ще можеш да изпълниш някакъв допълнителен код или да добавиш определено съдържание.

Условните коментари се поддръжат от IE 5 до IE 9 (включително). Поддръжката е спряна в IE 10 (стандартен режим). Мисля, че това е напълно нормално, тъй като този браузър се счита за съвременен и до голяма степен следва установените стандарти.

Защо са ти нужни?

Нека предположим, че в сайта си използваш CSS 3 свойството border-radius, за да заоблиш ъглите на няколко елемента. Проблема е, че не се поддържа в IE < 9 и бива игнорирано. Условните коментари ще ти помогнат да таргетираш точно тези браузъри, за да заредиш алтернативен CSS стил, чрез който да “фиксираш” проблема. Звучи интересно, нали?

Т.е. най-честата употреба (може би в 95% от случаите) на условни коментари е за зареждане на външни CSS и/или JavaScript файлове. Естествено, има и други случаи, в които могат да ти бъдат полезни. Принципа на работа обаче е винаги един и същ.

Един практически случай, който в момента ми идва наум е, че можеш да използваш условен коментар, за да покажеш определено съобщение на всички посетители с IE < 9 и да ги подканиш да си обновят браузъра.

Условните коментари най-често се поставят в <head> на HTML документа. Ако искаш да добавиш CSS файл в определена версия на IE, (според мен) е най-добре да го направиш след основния CSS файл. Главната причина е унаследяване. Това разбира се е лично предпочитание.

Синтаксис

Условните коментари имат следната структура:

ИзчистенПрозорец
  1. <!--[if IE 6]>
  2.   Код, който ще бъде изпълнен, само ако условието е удовлетворено.
  3. <![endif]-->

Значение на някои части от кода:

  • <!--[if IE 6]> - Маркира началото на условния коментар.
  • [if IE 6] – Всичко между [if и ] се третира като условие. В случая правим проверка дали браузъра е IE 6. При съвпадение ще се изпълни кода след условието.
  • <![endif]--> - Маркира края на условния коментар.

Няколко извода:

  • Условните коментари са базирани на HTML тага за коментар (<!-- -->). Точно затова всички останали браузъри ги третират като обикновен коментар и ги игнорират изцяло.
  • Условните коментари могат да се използват единствено в HTML документа. Не е възможно (и разрешено) да бъдат използвани в CSS или JS файлове. Ако искаш да използваш специален CSS стил в определена версия на IE, най-добре е да го приложиш чрез външен файл (по-долу ще разбереш как става това).
  • Ако условието не бъде удовлетворено, браузъра ще “прескочи” (игнорира) съдържанието в условния коментар.

Примери

От следващите няколко примера ще научиш как можеш да заредиш алтернативен (външен) CSS файл в зависимост от версията на Internet Explorer.

Проверка дали браузъра е Internet Explorer. Без значение от версията.

ИзчистенПрозорец
  1. <!--[if IE]>
  2.     <link rel="stylesheet" href="ie-style.css" type="text/css" />
  3. <![endif]-->

Проверка за IE 6.

ИзчистенПрозорец
  1. <!--[if IE 6]>
  2.     <link rel="stylesheet" href="ie-6-style.css" type="text/css" />
  3. <![endif]-->

Проверка за IE 7.

ИзчистенПрозорец
  1. <!--[if IE 7]>
  2.     <link rel="stylesheet" href="ie-7-style.css" type="text/css" />
  3. <![endif]-->

Проверка за IE 8.

ИзчистенПрозорец
  1. <!--[if IE 8]>
  2.     <link rel="stylesheet" href="ie-8-style.css" type="text/css" />
  3. <![endif]-->

Проверка за IE 9.

ИзчистенПрозорец
  1. <!--[if IE 9]>
  2.     <link rel="stylesheet" href="ie-9-style.css" type="text/css" />
  3. <![endif]-->

Проверка дали версията на браузъра е по-висока или равна на IE 8.

ИзчистенПрозорец
  1. <!--[if gte IE 8]>
  2.     <link rel="stylesheet" href="ie-8-and-up-style.css" type="text/css" />
  3. <![endif]-->

Проверка дали версията на браузъра е по-ниска от IE 9.

ИзчистенПрозорец
  1. <!--[if lt IE 9]>
  2.     <link rel="stylesheet" href="ie-8-and-down-style.css" type="text/css" />
  3. <![endif]-->

Проверка дали версията на браузъра е по-висока от IE 7.

ИзчистенПрозорец
  1. <!--[if gte IE 7]>
  2.     <link rel="stylesheet" href="ie-7-and-up-style.css" type="text/css" />
  3. <![endif]-->

Проверка дали браузъра е различен от IE.

ИзчистенПрозорец
  1. <!--[if !IE]>
  2.     <link rel="stylesheet" href="not-ie-style.css" type="text/css" />
  3. <![endif]-->

Значение на някои съкращения:

  • gte = greater than or equal to – по-висока или равна на
  • gt = greater than – по-висока от
  • lte = less than or equal to – по-ниска или равна на
  • lt = less than – по-ниска от
  • ! – НЕ оператор. Например: !IE = not IE – не IE.

Заключение

Надявам се, че в този кратък урок успя да научиш някои полезни неща свързани с условните коментари. Използването им не е задължително и варира от сайт до сайт. Понякога ще ти свършат доста добра работа за таргетиране на определена IE версия. Дали ще бъде с цел да покажеш определено съобщение или за зареждане на специфичен файл, условните коментари са още един инструмент в твоя арсенал.

Естествено, много хора ежедневно заменят остарелите си браузъри с по-нови и нуждата от използване на условни коментари скоро ще намалее (надявам се). Все пак, за сега е добре да ги имаш в предвид и да ги използваш винаги, когато сметнеш за добре.