AJAX загрузка
home

Условные комментарии помогают избежать проблем с некорректным отображением веб-страниц в старых версиях браузера Internet Exlorer.

Проблемы совместимости

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

Основные браузеры "доставляющие неудобства" это Internet Explorer 8 и Internet Explorer 7, доля использования которых на сегодняшний день достаточно велика (на 11 Февраля 2012 года Internet Explorer 8 используют ~7.4%, а Internet Explorer 7 ~3% пользователей России).

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

Для того, чтобы избежать проблем с некорректным отображением страниц в браузерах веб-разработчики часто прибегают к использованию условных комментариев.

Вы можете применять условные комментарии для выбора определенных версий Internet Explorer:

<!--[if IE 8]>Стили расположенные здесь будут применены только для Internet Explorer 8 <![endif]-->

<!--[if IE 7]>Стили расположенные здесь будут применены только для Internet Explorer 7 <![endif]-->

Или для выбора версий браузера удовлетворяющих определенным условиям:

<!--[if lt IE 8]> Стили расположенные здесь будут применены только для браузеров 
Internet Explorer, версия которых ниже 8 <![endif]-->

<!--[if lte IE 8]> Стили расположенные здесь будут применены для браузера
Internet Explorer 8 и браузеров IE, версия которых ниже 8<![endif]-->

<!--[if gt IE 8]> Стили расположенные здесь будут применены только для браузеров 
Internet Explorer, версия которых выше 8 <![endif]-->

<!--[if gte IE 8]> Стили расположенные здесь будут применены для браузера 
Internet Explorer 8 и браузеров IE, версия которых выше 8<![endif]-->

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

Обычно для избежания проблем с оформлением разработчики создают три внешних CSS файла с различным оформлением для:

  1. Internet Explorer 8 (ie8.css)
  2. Internet Explorer 7 (ie7.css)
  3. Для всех остальных браузеров Firefox, IE8+, Opera, Safari, Chrome (all.css)

Далее эти внешние файлы включаются в HTML следующим образом:

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

Если пользователь использует IE8, то для оформления страницы будет использован файл ie8.css. Если пользователь использует IE7, то для оформления страницы будет использован ie7.css, если пользователь использует другой браузер, то для оформления будет использован all.css.

Обратите внимание: данный код должен располагаться в секции head.

Добавлять ли поддержку IE7?

Так как доля использования этого браузера среди пользователей заметно упала (его используют ~2.8%) и продолжает стремительно падать, возникает справедливый вопрос - А стоит ли вообще добавлять его поддержку на сайт?

Мы считаем, что конечный выбор Вы должны совершать исходя из личных соображений и анализа трафика сайта. Если доля использования IE7 среди посетителей Вашего сайта мала, то можно отказаться от его поддержки.

Проанализировав лог посещений нашего сайта мы решили отказаться от поддержки IE7 т.к. доля посетителей с данным браузером меньше 0.3%. Низкая доля посетителей объясняется в основном тематикой сайта (созданием сайтов в основном интересуются уже достаточно опытные пользователи).


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

C помощью, например, PHP определяется версия браузера, и если это IE7 (или любой другой устаревший браузер) пользователю вместо запрашиваемой страницы выдается страница, на которой его просят обновить браузер и приводят ссылки на соответствующие ресурсы.

<?php
if (stristr($_SERVER['HTTP_USER_AGENT'], 'MSIE 6.0') {   
   header("Location: путь к файлу с просьбой об обновлении");
}
?>