Как адаптировать сайт под explorer

Обновлено: 04.07.2024

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

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

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

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

Версия	Windows	Год
IE6	XP SP1	2001
IE7	Vista	2006
IE8	7	2009
IE9	7	2011
IE10	8	2012
IE11	8.1	2013

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вордпресс и IE

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

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

Делаю сайты на Вордпресс с 2008 года. Не просто сайты, а уникальные инструменты для решения сложных бизнес‑задач с оптимизацией и поддержкой.

Начнем с того, что надо писать не под «ИЕ», а номера конкретных версий. Каждая версия ИЕ по своим особенностям и багам напоминает отдельный браузер, под который надо подкладывать свои, отдельные костыли. И что хуже, MS иногда выпускает исправления багов, и мы имеем кучу пользователей, с разными версиями, с разными наборами сервис-паков и обновлений. И что еще хуже, в некоторых браузерах есть режимы совместимости, например ИЕ8 может отобразить страницу в режиме совместимости с ИЕ7, и — кто бы ожидал — при этом с другим набором багов, нежели настоящий ИЕ7.

Потому начнем изучение противника с версий.

IE12 (можно поставить на Win 7+) — не сталкивался с ним.
IE11 (включен в Win 8.1, можно поставить на Win 7+) — более-менее нормальный браузер, поддерживающий современные стандарты HTML 5, CSS 3
IE10 (включен в Win 8, ставится на Win 7+) — более-менее нормальный браузер, поддерживает HTML 5/CSS 3, кроме каких-то совсем новых вещей
IE9 (ставится на Win Vista+) — первый из ИЕ, который начал поддерживать HTML5/CSS3. Увы, поддерживает мало что, например text-shadow (тени у текста) нету. Ну хотя бы скругленные уголки есть — и на этом спасибо. Последний браузер, который поддерживает майкрософтовские фильтры (которыми можно имитировать недостающие тени и градиенты, например). Есть совсем немножечко багов, доставшихся видимо от предков. Но в общем, в сравнении с тем, что было раньше, неплохой браузер.
IE8 (включен в Win 7, ставится на Win XP+) — первый из ИЕ, который начал поддерживать HTML 4/CSS2.1 нормально без злостных багов (но немного мелких ошибок есть). Не поддерживает HTML 5/CSS 3 (круглые уголки, теги и все, что дальше), по нынешним меркам плох, но поверьте мне, после ИЕ7 и особенно 6 это был праздник — в кои-то веки верстка по стандартам отображается (почти) нормально! Сколько времени экономится! Часть вещей, вроде теней и градиентов, можно имитировать фильтрами.
IE7 (включен в Vista), IE6 (включен в XP) — жуткие монстры из фильмов ужасов, которые обещают даже опытному верстальщику не одну бессонную ночь. На словах они Львы Толстые поддерживают HTML4/CSS2.1, но на деле там такое количество багов и «особенностей», что половину свойств использовать невозможно, все разваливается и съезжает. 95% современных сайтов в них не отображается в принципе. Если тебе приходится верстать под них, то запасись успокаивающими препаратами или котом забудь про CSS3, используй только CSS2.1, самую примитивную верстку, самые простые css-свойства, все размеры и расположение элементов задавай фиксированным, никакой резины, никаких процентов, никаких сложных конструкций с флоатами, никаких width: auto. Может быть, у тебя что-то и получится.

Обрати внимание, «баги» относятся не только к багам в поддержке CSS, но и в JS. Твой JS код на старых версиях ИЕ тоже может не работать.

Браузер ИЕ глубоко интегрируется в систему, потому портабельных версий ИЕ нет. Откатить версию ИЕ на более старую можно только при установке ИЕ10 и выше, а например с ИЕ9 откатиться ниже уже нельзя. Возникает вопрос, как проверять сайт в нескольких версиях программы?

Плюс в том, что мы видим то же, что и пользователь с ИЕ. Минус — затраты времени на установку/запуск виртуальных машин. Тем не менее, серьезные компании и профессионалы используют именно этот способ.

Другие варианты — программы вроде «multiple IE», которые включают в себя браузеры разных версий. С ними проще, но они обеспечивают недостаточную эмуляцию всех багов и особенностей ИЕ, и ты рискуешь либо пропустить баг, либо увидеть несуществующий.

В ИЕ начиная с версии 8 включены средства разработчика, вызваемые клавишей F12 . Используй их, хотя они тоже могут глючить.

Проще всего поставить HTML5 доктайп (он самый короткий):

Этого хватит, чтобы избежать перехода в quirks mode. Но этого недостаточно, чтобы избежать других ловушек вроде режимов «совместимости».

Версии браузера, начиная с ИЕ8 имеют режимы «совместимости» с более ранними версиями. Если ИЕ покажется, что страница рассчитана на более старый браузер — он переключится в этот режим (например из ИЕ9 в ИЕ7 — естественно, с отключением поддержки HTML5 и с включением багов из ИЕ7). Причем, разумеется, отображение страницы в режиме совместимости с ИЕ7 не совпадает с отображением в настоящем ИЕ7.

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

К счастью, есть способ запретить такое поведение. Сделать это можно 2 способами:

В настройках веб-сервера или в приложении отдать заголовок X-UA-Compatible: IE=edge . В php это можно сделать командой header("X-UA-Compatible: IE=edge"); , идущей до вывода самой страницы. Это надежный способ и работает в 99.9% случаев (кроме случая, когда пользователь нажал кнопку переключения режима). Вместо IE=edge можно писать желаемую версию ИЕ, которую нужно эмулировать, например, IE=7 , но эмулировать ИЕ умеет только более старые (и более глючные) версии. Зачем тебе такая радость?

Добавить, как можно выше внутри <head> , мета-тег:

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

Прежде чем говорить о багах, поговорим о том, как можно задать отдельные правила или html-код для отдельных версий ИЕ.

Баги и особенности ИЕ

Особых багов нет. В ИЕ10 могут не поддерживаться какие-то совсем новые фичи CSS3/HTML5

Первая версия, поддерживающая (частично) HTML5/CSS3, а также Javascript ES5 (это Object.create() , Array.forEach , Function.bind и другие).

Поддерживается только HTML4.01/CSS2.1. Это значит, нет круглых уголков, теней, растягивания фона и других прелестей CSS3. Это значит, что элементы из HTML5 вроде <nav> не отображаются и к ним не применяются стили (есть решение, смотри html5-shiv ниже).

Зато CSS2.1 поддерживается неплохо, с небольшим количеством багов.

Не поддерживаются нововведения Javascript ES5.

Если кратко, то ИЕ6-7 работают по своим правилам, чем-то отдаленно напоминающие стандарты CSS2.1/HTML4. Если ты можешь избежать верстки под эти версии — избегай ее любой ценой.

Способы борьбы с багами

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

С их помощью, например, можно подключить отдельный css-файл только для ИЕ и писать в него исправления верстки.

С помощью специальных конструкций можно сделать css-правила применимыми (или неприменимыми) для отдельных версий браузеров. Подробнее:

В ИЕ (до версии 9) есть фильтры, с помощью которых можно частично имитировать полупрозрачность ( opacity ), тени ( box-shadow , text-shadow ) и градиенты из CSS3. Учти, что тут надо тщательно все тестировать, так как фильтры могут приводить к искажениям формы букв, картинок, «грязному» тексту, искажениям вида страницы и тормозам.

Фильтры добавляются через css-свойства filter и -ms-filter (в ИЕ9). Это не те фильтры, что вводятся в новых стандартах CSS3, не перепутай (хотя свойства называются так же).

Полифиллы и скрипты

Для борьбы с проблемами ИЕ есть полифиллы и скрипты. Полифиллы добавляют поддержку фич из Javascript ES5.

Прежде чем их использовать, стоит учесть, что тут не все так просто. Те скрипты, которые эмулируют в старых ИЕ поддержку новых CSS3 свойств могут вносить серьезные ухудшения юзабилити: страница может начать тормозить, дергаться при прокрутке, дольше загружаться, могут съехать верстка. Потому стоит тщательно тестировать такие скрипты и выбирать: что важнее, круглые уголки или скорость работы и удобство использования страницы. Мне, например, скорость важнее, но заказчик может иметь другое мнение.

Кроссбраузерность — это одинаковое отображение и работа сайта в различных браузерах. Если не задуматься над этим вопросом на этапе верстки, то, создав сайт, вы увидите, что в разных браузерах он отображается по-разному и не везде корректно.

Откуда возникла такая проблема? Дело в том, что браузеры используют разные движки. Браузерный движок занимается загрузкой, обработкой, отображением и расчетами данных. И хоть сегодня существует большое количество различных браузеров, если мы их разложим по используемым движкам, то увидим, что этих движков не так и много, так как создание своего движка является очень трудоемкой задачей.

Основные движки:

Blink — принадлежит компании Google, имеет открытый исходный код, входит в состав проекта Chromium. Используют браузеры: Chrome, Opera, Яндекс.Браузер, Vivaldi и др. Над развитием этого движка работают многие крупные компании: Opera, Intel, IBM, Yandex, Vivaldi и другие.
WebKit — принадлежит компании Apple, имеет открытый исходный код, используется в браузере Safari. Именно этот движок c 2008 г. по 2013 г. использовала компания Google в своем браузере Chrome.
Gecko — принадлежит компании Mozilla, имеет открытый исходный код, используется в браузерах Firefox и Tor Browser.
EdgeHTML — принадлежит компании Microsoft, имеет закрытый исходный код, используется в браузере Edge. Пришел на смену движку Trident (использовался в Internet Explorer), с запуском Windows 10, и работает только на этой операционной системе. 15 января 2020 года Microsoft выпустило обновление для браузера Edge (Microsoft Edge 79 stable), в котором перешла на Chromium с браузерным движком Blink.

Примечание.
Последующие сравнения с браузером Edge справедливы для версий ниже 79.

Проблема различного отображения верстки заключена в том, что разные движки по-разному воспринимают и обрабатывают некоторые html-теги и css-стили, а также содержимое самих тегов. Например, браузер Edge подсвечивает все номера телефонов добавляет свои стили.

В результате получаем номер телефона без добавления стилей:

Подробнее о html и css расскажем ниже.

Как добиться одинакового отображения сайта в разных браузерах?

Разобравшись с понятием кроссбраузерной верстки, возникает вопрос: а как добиться корректного отображения верстки во всех этих браузерах? Откроем несколько секретов html-верстальщиков. =)

1. Использование префиксов

Префиксы — приставки к названиям CSS-свойств, используемые для конкретных браузеров.

Производители браузеров называют несколько причин использования префиксов:

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

-moz- используется в Firefox;
-ms- используется в Edge и Internet Explorer;
-webkit- используется в Safari, Chrome и браузерах на основе движков WebKit и Blink;
-o- — используется в старых версиях браузера Opera, работающего на движке Presto. С 2013 г. Opera перешла на движок Blink.

-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;

-webkit-flex-wrap — свойство для Chrome с 4 по 28 версии, Safari с 3.1 по 8 версии;
-ms-flex-wrap — свойство для Internet Explorer 10.

2. CSS-хаки

Это использование специальных свойств, понимаемых только определенными браузерами. Разберем пример css-хака, работающего только в Firefox. Создадим квадрат и закрасим его в красный цвет:

А теперь добавим свойство, которое будет работать только в Firefox:

3. Разделение стилей для браузеров

Метод заключается в том, чтобы определить вид браузера и подключить определенный файл стилей. В Internet Explorer используются условные комментарии, которые понимаются только этим браузером, остальные браузеры видят такой код как обычный комментарий.

Пример для Internet Explorer 9:

Файл style-for-ie9.css подключится только в браузере Internet Explorer 9.

В основном для кроссбраузерной верстки используют префиксы, это увеличивает объем кода, но он остается быть валидным и понятным.
CSS-хаки являются нежелательным способом исправления ошибок. Использование их приводит к плохой читабельности кода, невалидности, некачественной поддержке в будущем.
Разделение стилей с помощью условных операторов используется для поддержки браузеров Internet Explorer.

Рассмотрим возникающие проблемы кроссбраузерности на небольшом примере.

Создадим html-документ и посмотрим отображение элементов и стилей в браузерах: Chrome, Firefox, Edge, Safari, Internet Explorer 9/11. В документе создадим две горизонтальные линии, поле для ввода текста, кнопку и ссылку.

Посмотрим в браузерах:

Internet Explorer 9:

Internet Explorer 11:

Как видите, есть отличия в отображениях горизонтальных линий (<hr>), кнопок, и в Internet Explorer 9 нет текста placeholder. Атрибут placeholder у тегов input и textarea появился в стандарте html5, поддержка которого стала доступной в Internet Explorer с 10 версии.

Чтобы в Internet Explorer 9 появился placeholder, придется использовать JavaScript. Можно написать свое решение, либо воспользоваться готовым плагином Placeholders.js. Для использования данного скрипта нужно подключить к странице jQuery и сам плагин:

Больше никаких действий производить не нужно, плагин все сделает самостоятельно. Данный плагин поддерживает большое количество браузеров, включая Internet Explorer 6.

Добавим всем элементам отступы, цвет красный (color: red) и посмотрим, что изменилось:

Internet Explorer 9:

Internet Explorer 11:

В Firefox горизонтальные линии окрасились в красный цвет, а в Chrome, Edge и Safari placeholder остался черным. Добавим цвет placeholder в оставшихся браузерах, увеличим высоту горизонтальной линии и зальем ее красным цветом:

Internet Explorer 9:

Internet Explorer 11:

Все горизонтальные линии стали красными, но в Firefox толщина отличается от других. Связано это с тем, что в браузере Firefox стиль color: red окрашивает рамку вокруг элемента, в то время как в остальных браузерах этот стиль не действует на рамку, и она остается прозрачной. Уберем рамку и свойство color: red. Для исправления цвета placeholder’а у текстового поля в Edge необходимо воспользоваться префиксами: -ms-input-placeholder и -ms-input-placeholder:

Добавим остальные стили:

Internet Explorer 9:

Internet Explorer 11:

Внешний вид отличается только у браузеров Internet Explorer.

Начнем с 11-ой версии. Мы сделали ссылку в виде черной кнопки и текст расположили по центру. Для этого использовали свойство display: flex, но специально добавили свойство min-height: 40px. Поддержка flex у Internet Explorer с 10-ой версии, но с некоторыми ошибками, одну из которых мы продемонстрировали. Если у элемента задана минимальная высота, то в IE 11 не работает вертикальное выравнивание. Исправим это с помощью css-хака, добавим свойства, которые будут работать только в IE 11:

Получаем правильное отображение:

Как писали выше, поддержка flex в Internet Explorer стала доступной только с 10-ой версии, из-за этого ссылка в 9-ой версии отображается как строковый элемент display: inline.

Исправим это с помощью добавления условного комментария в html-документ, в котором подключим новый файл стилей.

И пропишем в новом файле стили для ссылки:

Помимо неправильного отображения ссылки, у кнопки нет фона градиента. Это также связано с тем, что поддержка линейных градиентов появилась в Internet Explorer c 10-ой версии. Создадим файл gradient.svg с графикой линейного градиента и в стилях для IE9 зададим фон изображением созданного градиента background: url(gradient.svg).

Получаем следующие стили для IE9:

В итоге получится такой же внешний вид всех элементов, что и в других браузерах:

Для современных сайтов стоит отказаться от поддержки Internet Explorer, т.к. без использования всех современных возможностей CSS придется выполнять практически вторую верстку сайта под браузер с долей 1,5-3%. Но, как говорилось выше, все зависит от пользователей, посещающих ваш сайт.

Проверка кроссбраузерности: наши рекомендации

Увы, установить все версии браузеров на компьютер нельзя, можно воспользоваться сервисами, предоставляющими возможность проверить сайт во всевозможных браузерах. Посмотрим на некоторые из них:

При разработке сайта необходимо проверять не только кроссбраузерность, но и правильность отображения в различных версиях браузеров. Особенно актуально это для браузера Internet Explorer. Мы уже говорили в предыдущей статье об использовании сервиса Browsershots. Но он слаб для проверки отображения сайта в Internet Explorer, да и к тому же процесс создания скриншотов занимает много времени.

Долгое время для того, чтобы проверить свой сайт в нескольких браузерах, да еще и в различных их версиях, разработчикам приходилось держать все эти версии у себя на компьютере. К тому же, "подружить" несколько версий именно Internet Explorer - задача не из легких: приходилось поднимать несколько виртуальных машин ради проверки кроссбраузерности. Этому пути следуют некоторые профессиональные верстальщики и сейчас: ведь нет лучшего способа протестировать свой сайт в нужной версии нужного браузера, кроме как самому "пощупать". Более того, по скриншотам, которые предоставляют различные веб-сервисы типа Browsershots, вы не сможете проверить корректность работы JavaScript на страницах вашего сайта.

Разработчики сайтов долго просили Microsoft как-то решить эту проблему, и эта проблема была решена в браузерах Internet Explorer, начиная с версии IE 9. Решена она была путям добавления пункта Режим браузера в меню Средства разработчика (кнопка F12). С помощью данной опции можно переключить браузер с текущей версии на нужную и проверить отображение сайта в разных версиях IE.

Данный способ позовляет досконально проверить сайт на ошибки в отображении, верстке, анимации.

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

На данный момент рекомендуется адаптировать сайты для версий Internet Explorer, начиная с IE 8.

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