И снова про оптимизацию сайтов под старые версии Интернет Эксплорер

Точнее даже не оптимизации, а борьбы с ним.

Интернет Эксплорер (сокращённо IE или MSIE) — олдскульный браузер компании Microsoft, выпускаемый с 1995 по 2015 годы, был частью ОС семейства Windows вплоть до Windows 10, где его сменил Microsoft Edge.

Пятый и более ранние IE выходили ещё в прошлом столетии, говорить про них не вижу смысла, а вот более поздние развивались так:

Как видим, IE6 вышел почти двадцать лет назад, на самой заре сказочных времен, когда многие фронтендеры еще были далеки от разработки, а некоторые и вообще только-только появлялись на свет.

Теперь вернёмся в реальность и взглянем на любую глобальную статистику по использованию браузеров.

Статистика использования IE

По Яндекс Метрике за последний год наблюдается стабильный спад количества пользователей IE.

А вот по данным Hotlog в июле 2019 года доля IE даже немного выросла. Однако, им пользуются менее 3,5% пользователей.

Обязательно смотрите статистику конкретно вашего сайта. Например, у моего сайта Danilin.biz за последние 4 года наблюдается отрицательная динамика по IE в целом. А общая доля пользователей даже ниже средней — менее 1%.

Теперь посмотрим на статистику по версиям IE с начала этого года.

• IE11 — 85%
• IE8 — 11%
• IE9 — 3%
• IE10 — 1%

IE5, IE6, IE7 в моей статистике уже на уровне статистической погрешности, что несомненно радует. Хотя на других сайтах картина бывает несколько иная.

Видим, что 85% посетителей — это пользователи 11 версии IE. Вот максимум для них можно произвести оптимизацию сайта. А для пользователей более ранних версий можно пойти на более радикальные меры.

Как бороться с IE

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

Например, чтобы перенаправить всех пользователей IE6 на мобильную версию сайта, можно использовать такой код:

<!--[if IE 6]>
	<script type="text/javascript">
		window.location = "https://m.danilin.biz/";
	</script>
<![endif]-->

С помощью операторов LT и LTE условия можно задавать сразу для нескольких версий.

Например, для чтобы пользователям IE старше 9 версии загрузить дополнительные стили с запретом или упрощением отображения проблемных элементов, можно сделать так:

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

Тут все просто:

• LT — меньше
• LTE — меньше или равно

Сложности начинаются с десятой версии IE, из которой была выпилена поддержка условных комментариев. Однако, достучаться до IE10 и IE11 все таки можно с помощью медиазапросов CSS. А именно вычислить IE по применяемым свойствам с префиксом -ms.

Например, так:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	/* Сюда пишем стили для IE10+ */
}

Вордпресс и IE

Кстати, в Вордпресс уже два года (начиная с версии 4.8) отсутствует поддержка IE по 10-ю версию включительно. Это значит, что даже если оптимизируем сайт снаружи под старые IE, внутри его корректную работу никто не гарантирует. У Гутенберг тоже заявлена поддержка минимум 11 версии Internet Explorer.

Напоследок покажу еще один способ детекта IE с помощью глобальных переменных Вордпресс.

global $is_IE;
if ( $is_IE ) { 
	echo "Используется Internet Explorer"; 
}

Подробно об этом я рассказывал в статье «Определяем пользовательскую среду в Вордпресс».

И всё вроде бы.