edDimensi
1/30/2017 - 6:09 PM

Верстаем под Internet Explorer

Верстаем под Internet Explorer

Тестирование и отладка верстки под IE.md
content_copyfile_download
  • Rendered
  • Source

Тестирование и отладка верстки под ИЕ

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

Вот плач тестировщика Яндекса по этому поводу: http://habrahabr.ru/post/201172/ (мне особенно нравится картинка из фильма про хоббитов — она очень хорошо выражает суть ситуации). Можете прочитать статью для осознания масштабов проблемы.

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

Версии ИЕ

  • 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. Может быть, у тебя что-то и получится.

Вот большая табличка с версиями: http://ru.wikipedia.org/wiki/Internet_Explorer#.D0.92.D0.B5.D1.80.D1.81.D0.B8.D0.B8_.D0.B1.D1.80.D0.B0.D1.83.D0.B7.D0.B5.D1.80.D0.B0_Internet_Explorer

Для поддержки важно знать, сколько процентов пользователей использует ту или иную версию. Посмотреть статистику по России можно например тут (в других странах могут быть другие цифры): http://www.liveinternet.ru/stat/ru/browsers.html?id=41&id=4&id=25&id=32&id=20&per_page=100&ok=+OK+&report=browsers.html

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

Как тестировать

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

Правильный способ — виртуальные машины. Берем тот же Virtual Box, создаем в нем нужное число машин, ставим в них ОС и нужную версию ИЕ (который можно скачать с сайта MS). Я использовал где-то 512 Мб памяти на машину и «облегченные» версии винды. Также, майкрософт выпускает готовые образы с уже установленными ИЕ разных версий: https://www.modern.ie/ru-ru/virtualization-tools

Также, майкрософт предлагает (вроде бы бесплатно) получить доступ к IE в их облаке: https://remote.modern.ie/

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

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

Developer tools

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

Доктайп

В начале твоего HTML-кода должен стоять доктайп ( http://htmlbook.ru/samlayout/rezhimy-brauzerov/doktaip ). Если ты не ставишь доктайп (или ставишь не в начале файла) — браузер думает, что перед ним древняя страница из 20-го века и переходит в quirks mode — режим совместимости с допотопным старьем. Для ИЕ это режим совместимости с ИЕ5 (ты читал, какой плохой ИЕ6? ну а тут будет ИЕ5).

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

<!DOCTYPE html>

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

Режимы совместимости

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

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

Вот алгоритм выбора режима совместимости для ИЕ8: http://blogs.msdn.com/b/ie/archive/2010/03/02/how-ie8-determines-document-mode.aspx (картинка в конце статьи). Как тебе?

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

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

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

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

Официальная документация:

Подвохи с метатегом: http://pepelsbey.net/2008/11/surprise-box/

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

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

IE11, IE10

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

IE9

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

Не поддерживается часть CSS3-свойств: http://www.impressivewebs.com/css3-support-ie9/

Проверять поддержку того или иного набора свойств удобно на caniuse, например: http://caniuse.com/#search=text-shadow

IE8

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

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

Баги списком (англ.): http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/

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

IE7,6

Баги:

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

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

Progressive degradation

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

Условные комментарии

В ИЕ до 9 версии включительно можно использовать условные комментарии, чтобы вставить кусок HTML-кода только для определенных версий ИЕ (или наоборот скрыть от них): http://htmlbook.ru/samlayout/internet-explorer/uslovnye-kommentarii

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

CSS-хаки

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

Фильтры

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

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

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

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

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

  • html5-shiv: https://github.com/aFarkas/html5shiv — позволяет ИЕ8 (и ниже) использовать HTML5-теги вроде <header> и применять к ним CSS-стили. Все, больше он ничего не делает. Поддержка CSS3 и круглых уголков от него не появятся. Принцип его работы (англ.): http://www.paulirish.com/2011/the-history-of-the-html5-shiv/ От него негативных последствий нет.

  • PIE.htc — обещает поддержку в IE8 и даже ниже CSS3-свойств, но возможно ценой багов и сильных тормозов. Надо тщательно тестировать. Также помни, что в IE7 даже CSS2 толком не поддерживается.

(другие скрипты и полифиллы ищи в гугле)