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

1.

<!–[if lt IE 8]><link rel=stylesheet href=»css/project-ie.css«><![endif]–>

————–

<!–[if gt IE 7]><!–><link rel=»stylesheet» href=»css/project.css«/><!–<![endif]–>

При этом в project-ie.css подключается первой строчкой project.css через @import, а при выкладке в production вместо этого @import подставляется содержимое файла project.css. В этом случае и нормальные браузеры и MSIE7- загружают один файл, а не два, как в первом примере.

2. Правила, специфичные для IE5/6 , но не нужные для IE7, нередко имеет смысл прятать при помощи условных комментариев в отдельный css-файл, чтобы страница загружалась быстрее не только в нормальных браузерах, но даже в IE7, которому, как ни крути, скоро будет принадлежать основная доля среди браузеров. Более того, такой подход потенциально позволяет избавиться от хаков вовсе (в подавляющем большинстве случаев специфичные для IE5 и IE6 правила можно без проблем объединить) — это может быть полезным, в частности, при динамической генерации таблиц стилей на серверной стороне.

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

<link rel=»stylesheet» type=»text/css» href=»style.css«  media=»all» />

————–
<!–[if IE]><link rel=»stylesheet» type=»text/css» href=»ie.css» media=»all»/><![endif]–>

Обычное подключение CSS-файлов, однако увидят вторую строку, а следовательно и подгрузят css-файл только браузеры семейства Internet Explorer. Происходит это благодаря условию, заложенному в условном комментарии — if IE. Данное условие означает «если Internet Explorer» и Explorer’ы версии пять и выше (включая свежий седьмой) прочитают код, находящийся внутри комментария и интерпретируют его.

Таким образом все наши хаки можно вынести в отдельный файл style.css:

#element {
position:relative; /* Основное правило для всеx браузеров */
}

ie.css:

#element {
position:static; /* Переопределение правила для IE всех версий */
}

3. Магические свойства для IE.

position:relative -  Иногда родительские блоки с position:relative; просто перекрывают свои “внутренности” – в таких случаях спасает это свойство – для исчезнувшего блока. Вдобавок оно является одним из признаков по которому ИЕ наделяет блок hasLayout.

Второе использование связано с отрицательными отступами. Если вы когда нибудь их использовали, и этот элемент выходил за пределы родительского блока – то часть вышедшая за пределы была попросту невидима в ИЕ. Выход тот же – position:relative; и все видно.

И что самое главноe, абсолютно безвреден для других броузеров. (если вы внутри этого блока не используете position:absolute;)

height:0 – Если юзать как _height:0 – безвредно для всех. Воистину чудотворное свойство. Во первых блок растянется чтобы охватить все внутренние FLOAT блоки. То бишь никаких div class=”clear” и тп для ИЕ уже не нужно выходит. Более того это свойство зарещает этому блоку обтекать что-либо. Вдобавок этот же хак с height: 1%(что по сути то же самое) – позволяет побороть 3х пиксельную проблему у ИЕ. Секрет в том, что если ИЕ видит высоту 0, он все-таки растягивает блок настолько сколько внутри контента – но при этом считает высоту заданной. Что и добавляет блоку тот самый hasLayout. Короче height:0 для ИЕ – самое то.

- свойства которые могут помочь (имеют отношение к hasLayout):

• display:inline display:inline-block
• zoom:1
• position: absolute
• writing-mode: tb-rl

Все это лучше прятать по:

<!‒‒[if lt IE 7]><style>/* стили для IE 6 + IE5.5 + IE5.0 */.gainlayout { height: 0; }</style><![endif]‒‒>

4.  Conditional Comments.

1. <!–[if IE]>@import(ie_only.css)<[endif]–>

<!–[if !IE]–>@import(non_ie.css)<!–[endif]–>

2. основной код пишется для FF, а исправления в отдельном файле для IE импортятся этим кодом.

<!–[if IE]> <style type=”text/css” media=”all”>@import url(’ie.css’);</style> <![endif]–>

Соответственно для Internet Explorer 7 условный комментарий выглядит так:

<!–[if IE 7]> <style type=”text/css” media=”all”>@import url(’ie7.css’);</style> <![endif]–>

На практике обычно лучше использовать немножко другой код. Вместо if IE писать if lte IE, что понимается эксплорером как правила для указанной версии и всех более ранних. Так что можно просто написать if lte IE 7 для изменений, которые нужны для всех существующих эксплореров. Либо если 7-й вашу верстку понимает правильно, тогда if lte IE 6.

3 кому по каким-либо причинам надо писать весь CSS в одном файле, а не разносить по файлам , напоминаю как прописывать аттрибуты только для 7-ого эксплорера:

.class{

attribute:property; – читается всеми браузерами

*attribute:property; – читается всеми версиями Интернет Эксплорера

_attribute:property; – читается только 6-ой версией Интернет Эксплорера.

}

Соответственно в первом случае идет описание для Firefox, во втором для 7 Интернет Эксплорера, а в третьем исправление для 6-ой версии, если нужно.

5. Шпаргалка по Conditional Comments:

<!–[if IE 8]> Вызов файла стилей/код/стили < ![endif]–> – если Интернет Эксплорер 8

<!–[if !(IE 8)]> Вызов файла стилей/код/стили < ![endif]–> – если не Интернет Эксплорер 8

<!–[if lt IE 8]> Вызов файла стилей/код/стили < ![endif]–> – если меньше чем Интернет Эксплорер 8 (lt = lower than)

<!–[if gt IE 7]> Вызов файла стилей/код/стили < ![endif]–> – если больше чем Интернет Эксплорер 7 (gt = grater than)

<!–[if lte IE 7]> Вызов файла стилей/код/стили < ![endif]–> – если Интернет Эксплорер 7 и ниже (lte = lower than or equal)

<!–[if (IE 7)|(IE 8)]> Вызов файла стилей/код/стили < ![endif]–> – если Интернет Эксплорер 7 или 8

<!–[if (gte IE 6)&(lte IE 8)]> Вызов файла стилей/код/стили < ![endif]–> – если Интернет Эксплорер между 6 и 8 включительно

<!–[if !IE]> –> Вызов файла стилей/код/стили <!– <![endif]–> – если любой браузер, исключая Интернет Эксплорер

6. Поддержка условных комментариев начинается с пятой версии IE. Допускается их использование как в HEAD, так и в BODY, со следующим синтаксисом:

<!–[if IE]>
<style type=»text/css»>.ieonly {}</style>

<![endif]–>

От простого многострочного, условный комментарий по написанию отличается двумя блоками:

* [if условие] — задает условие. Если оно принимает значание true, то код внутри комментария интерпритируется браузером. Если false — игнорируется.
* ![endif] — закрывает условный комментарий.

Операторы в условных выражениях

* IE [if IE] — проверка, является ли браузером клиента Internet Explorer.
* версия [if IE 6] — проверка типа и версии браузера.
* ! [if !IE] — оператор НЕ. Читается так: «если браузер НЕ IE».
* lt [if lt IE 6] — оператор «меньше». Читается так: «если версия браузера меньше шестой».
* lte [if lte IE 6] — оператор «меньше либо равно».
* gt [if gt IE 6] — оператор «больше».
* gte [if gte IE 6] — оператор «больше либо равно».
* () [if !(IE 6)] — условия можно группировать, заключая в скобки.
* & [if (gt IE 5)&(lt IE 7)] — логический оператор «И». Пример читается так: «если IE выше версии 5 И ниже версии 7″.
* | [if (IE 5)|(IE 7)] — логический оператор «ИЛИ». Пример читается так: «если IE пятой версии ИЛИ седьмой».

<!–[if IE]>
<p>Вы используете Internet Explorer.</p><![endif]–>
<!–[if IE 7]>
<p>Добро пожаловать в Internet Explorer 7!</p><![endif]–>
<!–[if !(IE 7)]>
<p>Вы не используете седьмую версию ИЕ.</p><![endif]–>

<!–[if gte IE 7]>
<p>Вы используете IE 7 или выше.</p><![endif]–>
<!–[if (IE 5)]>
<p>Вы используете IE 5.</p><![endif]–>
<!–[if (gte IE 5.5)&(lt IE 7)]>
<p>Вы используете IE 5.5 или IE 6.</p><![endif]–>
<!–[if lt IE 5.5]>
<p>Пожалуйста, обновите вашу версию Internet Explorer.</p><![endif]–>

подробнее http://www.tigir.com/comments.htm

7. само условие выглядит так.

<!–[if !IE 6.0]> это не ИЕ 6.0 <![endif]–>
<!–[if lte IE 6]> это IE 5.01 или 5.5 или 6 <![endif]–>

Использовать можно следующие условия:
gt – больше, чем
lt – меньше, чем
gte – больше или равно
lte – меньше или равно
! – все, исключая указанное (символ «!» должен быть написан непосредственно перед условием).

8.

<p><!–[if IE]>
According to the conditional comment this is Internet Explorer<br />
<![endif]–>
<!–[if IE 5]>
According to the conditional comment this is Internet Explorer 5<br />
<![endif]–>
<!–[if IE 5.0]>
According to the conditional comment this is Internet Explorer 5.0<br />
<![endif]–>
<!–[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5<br />
<![endif]–>
<!–[if IE 6]>
According to the conditional comment this is Internet Explorer 6<br />
<![endif]–>
<!–[if IE 7]>
According to the conditional comment this is Internet Explorer 7<br />
<![endif]–>
<!–[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up<br />
<![endif]–>
<!–[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6<br />
<![endif]–>
<!–[if lte IE 5.5]>
According to the conditional comment this is Internet Explorer lower or equal to 5.5<br />
<![endif]–>
<!–[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6<br />
<![endif]–>
</p>