Создание стилей только для IE

9 февраля 2010 года | Вёрстка, Мысли

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

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

Если вы верстали хотя бы несколько страниц, то наверное ломали себе голову, при работе с браузером IE (Internet Explorer). Но, если это ваша работа, или просто увлечение, вы должны уметь и знать как решать проблемы связанные с этим браузером.

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

Движек trident, который использует IE, предоставляет возможность использования условных комментариев. С помощью условий, можно указать как одну так и несколько версий IE. Это нужно, чтобы указать какие браузеры среагируют на содержимое такого комментария. То есть, например, можно указать, все версии ниже IE7.

Зачем использовать условные стили?

  • Вы отделяете все проблемы, которые нужно решить.
  • Ваши стили не будут содержать хаков.
  • Основной стиль будет чистым и валидным.
  • Этот метод вполне приемлемый и одобренный Microsoft.

А ещё хотелось бы добавить, что условные комментарии предназначены не только для стилей. Вы также можете подгружать Javascript-файлы, или вообще выводить сообщения, предназначенные только для пользователей IE.

Теория

Обычное применение условных комментариев, это описание в блоке <head> вашей HTML разметки, тега <link> — отдельного файла, подходящего под условие.

Теперь непосредственно, правила оформления или просто синтаксис. Открываются и закрываются теги условных комментариев, по типу как и обычные комментарии описанные в стандарте (<!–– comment ––>).

Затем в квадратных скобках записываем if и IE. Для условия этого уже достаточно. Перед закрывающим тегом также добавляем конец условия: <![endif]––>. Но, помимо точных условий, есть и строгие, и не строгие соответствия. Перечислю все:

  • ! — логическое отрицание (!IE — что означает не IE).
  • gt — (от greater than) больше чем.
  • gte — (от greater than or equal) больше чем или соответствует.
  • lt — (от less than) меньше чем.
  • lte — (от less than or equal) меньше чем или соответствует.

С помощью этих условий и можно сформировать нужное вам условие.

Примеры использования

А теперь рассмотрю всевозможные примеры, так как визуально всегда понятней:

Для всех версий IE:

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

Для всех кроме IE:

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

Только для IE7:

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

Только для IE6:

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

Только для IE5:

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

Только для IE5.5:

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

Только для 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]-->

Только для 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]-->

Только для 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]-->

Только для 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]-->

Только для 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]-->

Только для 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]-->

Универсальный стиль для IE6

Поддержка правильного отображения страниц для браузеров IE6 и ниже, это всегда трудоемкая задача. И в наши дни от поддержки этого «старья» отказываются многие, в том числе сайты крупных компаний (например Google) так и правительственные сайты. Но существует лучшее решение, чем просто плюнуть на поддержку браузера IE6- (IE6 и ниже), а поддерживать только версии начиная с IE7+. Вот для этого и придумали универсальные исправления для IE6-.

<!--[if !IE 6]><!-->
  <link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
<!--<![endif]-->

<!--[if gte IE 7]>
 <link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
< ![endif]-->

<!--[if lte IE 6]>
 <link rel="stylesheet" type="text/css" media="screen, projection" href="http://universal-ie6-css.googlecode.com/files/ie6.0.3.css" />
< ![endif]-->

Хаки

Ну и решил добавить несколько хаков CSS, на любителя.

Только для IE7:

* html #div {
   height: 300px;
}

Все кроме IE7:

#div {
   _height: 300px;
}

Спрятать для IE6 и младших версий:

#div {
   height/**/: 300px;
}
html > body #div {
   height: 300px;
}

Только IE7 и младшие:

#div {
   //height: 300px;
}
#div {
   *color:red;
}

И совсем раритет, только IE5.5 и ниже:

#div {
  \\width:100px;
}

Только IE8:

#div {
  height/*\**/:25px;
}

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

Мы не должны в них нуждаться. Они противоречат веб-стандартам.

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

Мы в них ещё нуждаемся.

Финальные мысли

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

Какие у вас мысли по поводу поддержки старых браузеров? Жду комментариев, обсудим.

  • http://medialworld.com sad

    По поводу поддержки старых браузеров ситуация неоднозначная. С одной стороны, для поддержки старых версий браузеров приходиться часто отказываться от красивых решений или новомодных фитч, но с другой стороны не отказывать же пользователям со старыми браузерами в их праве на информацию.
    В общем, поддерживать устаревшие браузеры не хочу, но привычка заставляет делать сайты с максимальной совместимости (в идеале сайт должен быть читаемым и в текстовом браузере).

  • http://medialworld.com sad

    Кстати… для интереса иногда смотрю как сайты выглядят в ИЕ 3.
    Вот там, без поддержки CSS и других уже привычных фишек сайты выглядят довольно странно.
    Хорошо хоть этим браузером точно уже никто не пользуется. =)

  • divbyzero

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

  • kolibri

    у меня та же проблема, создаю сайты под заказ, использую джумлу. 3-е из 5-ти сайтов очень криво выглядят(( но посмотрев статистику из 1000 уников 4 шт на ИЕ6, на другом сайте из 500 уников 1 на ИЕ6.

    тк что, а шо делать пусть переходят)))

  • http://twitter.com/proglammer proglammer

    я сейчас верстаю первый сайт, но, скорее всего, макет для меня пока сложноват. точнее, с новыми браузерами проблем особо нет, а вот, когда дело доходит до IE6, не говоря уже об IE5.5, тут то я и впадаю в ступор. если бы не они (хотя IE7 также не мало головной боли создает), я бы уже заканчивал верстать сайт, а то пока только мучаюсь с #header :) второй раз уже :))