И снова про оптимизацию сайтов под старые версии Interner Explorer

13 августа 2019

Нет-нет, да, и попадаются чудаки, которым подавай совместимость с каким-нибудь шестым или седьмым IE. Причем самую полную: со всем имеющимся дизайном и функционалом. Я забросил эту некрофилию лет сто пятьдесят тому назад, возвращаться категорически не собираюсь, а сегодня покажу свои способы «оптимизации» под Internet Explorer.

Новые лендинги

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

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

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

ВерсияWindowsГод
IE6XP SP12001
IE7Vista2006
IE872009
IE972011
IE1082012
IE118.12013

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

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

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

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

Яндекс Метрика: Доля IE в России за год

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

Hotlog: Доля IE за июль 2019 года

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

Danilin.biz: Доля IE за последние 4 года

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

Danilin.biz: Статистика по версиям 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"; 
}

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

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

Подпишитесь на мой телеграм и первыми получайте новые материалы, в том числе которых нет на сайте.

INNERSTAT
Лучшее за неделю
Иван Данилин

Практикующий веб-разработчик, специализируюсь на платформе Вордпресс.

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