Как написать CSS правила только для IE

Комментариев нет

2291

Пишем стили для IE

Всем привет. Если при верстке сайтов с использованием современных инструментов, таких, как Flexbox или Grid, вы получаете огромное удовольствие от того, насколько классно страница выглядит в современных браузерх. Но попробуйте открыть ее в IE 8 и вы поймете, на сколько все печально. Здесь мы разберем как написать CSS стили только для Internet Explorer. Надеюсь, что совсем скоро мы забудем о нем, как о страшном сне, но пока IE еще рано списывать со счетов.

Это годовая статистика посещаемости моего блога через IE. Траблы начинаются с версии 9- . Как видно на скриншоте с IE-8 заходит не так много посетителей. Но Сайт сайту рознь, поэтому у вас эти показатели могут быть значительно выше.

CSS только для IE

Проблему решить действительно можно. Есть даже специальный термин под названием: «Изящная деградация». Это когда вы делаете сначала под современные браузеры со всеми прибамбасами и плюшками, а затем пишете CSS стили специально для тех, которые их не поддерживают. Этим мы с вами сейчас и займемся. Сразу скажу, что Media запросы мало чем нам помогут. Но прежде, чем кодить CSS для IE важно понимать для чего мы это делаем. Представьте ситуацию, когда пользователь зашел на сайт с поехавшей версткой, какое у него останется впечатление? В большинстве случаев негативное. А что ели страница выглядит не поехавшей, а немного не так, как, например в Google Chrome и все элементы стоят на своих местах? В таком случае отношение будет не негативное, просто оно будет другим, вот и все.

Именно поэтому имеет смысл писать CSS стили специально для IE. В моем случае стили для версии меньше, чем IE-8 прописывать не имеет смысла. Как это делается:

<!--[if IE 8]>
  <style>
   body{
    background: red;
   }
  </style>
< ![endif]-->

Или же так:

1
2
3

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

Пишется это в head. Называется: Условные комментарии. Эти правила будут полностью проигнорированы новыми Browsers воспримутся только Internet Explorer-ом. Но это еще не все. Еще одна идея написания стилей только для IE заключается в создании дополнительных классов. Если реализовать вот так:

<!--[if IE]><html class="ie">< ![endif]--></html>

CSS:

1
2
3

.ie body{
  background: red;
}

Честно говоря мне этот способ нравится больше. Тем более, что можно указать if IE и это сработает для всех версий начиная с 9-й и ниже.

Любая сумма на развитие сайта

Категории: Уроки Тэги: CSS браузер Уроки

Как написать CSS правила только для IE

CSS только для IE

Читайте также:

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