От автора: новый год для front-end разработчиков начался очень хорошо. 12 января Microsoft прекратила поддержку старых версий IE. Миллионы разработчиков по всему миру спокойно выдохнули. На покой ушли последние бойцы «войн браузеров», которые начались с новым тысячелетием.
Как минимум на протяжении последних десяти лет различные версии IE подвергались бану в среде веб-дизайнеров и front-end разработчиков по всему миру. С ростом популярности Firefox, Opera и последних версий Chrome мир узнал, что интернет может быть намного лучше, быстрее и намного безопаснее. Но для того, чтобы не обделить тех, кто остался на IE (или не смог перейти), мы были вынуждены выкручиваться и работать с различными причудами старых браузеров. Есть довольно известная круговая диаграмма, показывающая ощущения сообщества дизайнеров (самая новейшая, которую я смог найти была за 2007 год на сайте www.dezinerfolio.com):
К счастью, сейчас все намного лучше. Мы должны работать только с последним воплощением движка Trident в IE11. Браузер довольно современный в сравнении с конкурентами. Поэтому пора сделать уборку в доме и выкинуть устаревшие инструменты, процессы и методы. Долой это старое…
Больше никаких хаков браузеров
Первым оружием в нашем арсенале были хаки браузеров. Хак это неправильное объявление, которое использует ошибки парсера в движке рендеринга. Хаки использовались для перезаписи стандартных деклараций со значениями. Новые значения должны были обеспечить нормальный функционал и вид в конкретном браузере. Были хаки, работающие как в одной версии IE, так и во многих. Ниже представлена классификация хаков по форматам:
Хаки селекторов: обычно такой хак используется для отключения старых версий IE, которые не понимают новый синтаксис.
Хаки свойство/значение или атрибут: первичные хаки – дыры в движке парсера для доступа к конкретной старой версии.
Хаки медиа запросов: используются для доступа/фильтрации различных старых версий (не только IE). За основу берется поддержка синтаксиса @media.
JavaScript хаки: используются для обнаружения браузеров, определения конкретной версии IE по конкретным свойствам, поддерживаемым движком JS.
Работать с хаками было и сложно и непонятно. Иногда приходилось каскадировать несколько хаков один за другим, так как в более новых версиях фиксировались ошибки парсера, которые не решали проблему отрисовки, ради которой вы и начали взлом. Рассмотрим несколько примеров таких хаков. Ограничимся тремя старыми версиями:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
/*========== Хаки селекторов ==========*/ /* Internet Explorer 10+ */ _:-ms-input-placeholder, :root .selector {} /* Все кроме Internet Explorer 9 и ниже */ html[lang='\ en'] .selector {} /*========== Свойство/Значение Хаки ==========*/ /* Internet Explorer 6-8 */ .selector { property: value\9; } .selector { property/*\**/: value\9; } /*========== Медиа запросы Хаки ==========*/ /* Internet Explorer 8 */ @media \0screen {} /* Internet Explorer 10+ */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {} /*========== JavaScript Хаки ==========*/ /* Internet Explorer 6-10 */ var isIE = !!window.ActiveXObject; /* Internet Explorer 8-10 */ var isIE = document.all && document.querySelector; |
За более подробным списком хаков, которые можно удалить из своего кода, зайдите на Browserhacks.
Прощайте условные комментарии
Как мы увидели выше, CSS хаки это грязные инструмент, приводящий к ошибкам и делающий код стилей не валидным (важно для тех, кто помешан на коде). Обстановка накалилась до такой степени, что в ноябре 2005 года ребята из Microsoft призвали не использовать CSS хаки, а вместо них работать с условными комментариями.
Первоначально условные комментарии использовались для загрузки дополнительных файлов стилей под конкретные версии IE. На тот момент различия в коде для стандартных браузеров и для IE были значительными. Когда HTML5 стал достаточно распространен комментарии стали использовать и для загрузки полифилов, которые добавляли поддержку новых свойств (эту тему мы обсудим немного позже в этой статье). Данная практика применялась в основном для кода под IE6-7, но вы можете встретиться с ней в старых кодах. Рассмотрим несколько примеров кода:
Условные комментарии для загрузки дополнительных стилей
|
1 2 3 |
<!--[if lte IE 8]><link rel="stylesheet" href="lte-ie-8.css"><![endif]--> <!--[if lte IE 7]><link rel="stylesheet" href="lte-ie-7.css"><![endif]--> <!--[if lte IE 6]><link rel="stylesheet" href="lte-ie-6.css"><![endif]--> |
Условные комментарии для загрузки JavaScript полифилов
|
1 2 3 4 |
<!--[if lt IE 9]> <script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> |
Основная проблема тут была в том, что для каждой версии IE выполнялся дополнительный HTTP запрос. Разработчики были вынуждены искать более высокопроизводительные методы. В результате выполнения условного комментария к тегу html добавлялся дополнительный класс. Данный подход был более популярным, в частности использовался в фреймворке HTML5 Boilerplate. К этому моменту IE6 можно было или игнорировать или работать с ним через технику изящной деградации, в то время как различия между более современными версиями (IE7-9) и их конкурентами (Firefox, Chrome, Safari и Opera) были настолько малы, что это не оправдывало создание отдельных файлов стилей. Можно было добавить еще несколько небольших исправлений с помощью дополнительной специфичности классов тега html. Возможность встретить такой пример сейчас намного выше, чем у предыдущего:
Условные комментарии для добавления дополнительных классов в тег html
|
1 2 3 4 |
<!--[if IE 7]> <html class="ie7"><![endif]--> <!--[if IE 8]> <html class="ie8"><![endif]--> <!--[if IE 9]> <html class="ie9"><![endif]--> <!--[if gt IE 9]><!--><html><!--<![endif]--> |
CSS код дополнительных классов
|
1 2 3 4 |
.foo { color: black; } .ie7 .foo { color: blue; } /* IE7 */ .ie8 .foo { color: green; } /* IE8 */ .ie9 .foo { color: red; } /* IE9 */ |
С запуском IE10 условным комментариям пришел конец, в этой версии они больше не поддерживаются. Для техник прогрессивного улучшения и изящной деградации появился новый стандарт функции обнаружения поддержки свойств (используется в Modernizr). Данные методы до сих пор используются только сайтами и фреймворками с обратной совместимостью в основном для загрузки полифилов, как мы видели в примере выше.
Уменьшите вес JavaScript библиотек
Выше мы уже видели, как при отсутствии поддержки современных свойств используются полифилы и условные комментарии. Если на вашем сайте или веб-приложении есть такие скрипты, то теперь от них можно спокойно избавиться. Но не все ситуации такие прозрачные, как наша. Разберем эту тему немного подробнее на паре примеров.
Всем известно, что JQuery самая используемая JavaScript библиотека в сети. Ее используют более 53 миллионов сайтов (по данным сайта BuiltWith.com). Разработчикам нужно было уровнять правила игры для всех браузеров, инструмент должен был создавать поддержку свойств во всех браузерах, так родился JQuery. Со временем в 2013 году поддержка старых браузеров вылилась в две версии: 1.х.х обслуживала старые версии IE, а в версии 2.х.х были вырезаны все функции, относящиеся к IE6-8. Последнее обновление 8 января 2016 года было последним перед переходом на версию 3.х.х. Поэтому можно или остаться на версии 1.х.х и потом перепрыгнуть сразу на 3.х.х, или же перейти сейчас на 2.х.х и выжать из этой версии все возможности.
Нельзя забывать еще про одну вещь. В IE11 и Edge намного лучше реализована интеграция родных методов (особенно для навигации по DOM и манипуляции узлами), которым раньше требовался JQuery для нормальной работы во всех браузерах. В некоторых случаях, если скрипт можно хорошо отрефакторить, можно вообще удалить JQuery и использовать обычный JS.
Еще один пример это Modernizr, о котором мы уже говорили выше. Данная библиотека проводит набор тестов, чтобы понять, какие свойства поддерживаются браузером, а результат заносится как дополнительный класс в тег . Проведя исследования (в основном на сайте CanIUse.com), мы можем отключить тесты, созданные для изолирования свойств, которые не поддерживаются в старых версиях IE. Если на вашем сайте используются только распространенные свойства с хорошей поддержкой, вы можете отказаться от Modernizr.
Данный подход работает и для других полифилов. Проверьте, поддерживается ли свойство, которое вы патчите, в современных браузерах, и если оно поддерживается большинством браузеров, можете избавиться от полифила.
Удалите проприетарные CSS значения
Давным-давно из-за технологии ActiveX Filters IE был единственным браузером, в котором можно было делать потрясающие эффекты. Разработчики могли создавать статические эффекты (к примеру, прозрачность), создавать градиентные фоны, вращать и трансформировать элементы, а также создавать эффекты переходов во время загрузки страницы. С выходом CSS3 большинству этих эффектов появилась своя замена, а фильтры ActiveX долгое время оставались единственным вариантом для IE. Больше не нужно указывать данные свойства, особенно если стили пишутся вручную. Будьте внимательны и не используйте свойства из примера ниже:
|
1 2 3 4 5 6 7 8 9 10 |
.foo { /* Internet Explorer 4.0 syntax */ filter:filtername(sProperties); /* Internet Explorer 5.5 syntax */ filter: progid:DXImageTransform.Microsoft.filtername(sProperties)"; /* Internet Explorer 8 syntax */ -ms-filter: 'progid:DXImageTransform.Microsoft.filtername(sProperties)'"; } |
Если в процессе написания стилей вы работаете с auto-prefixer, можете не беспокоиться по поводу старых фильтров. Хороший плагин знает уровень поддержки свойств в современных браузерах.
Избавьтесь от устаревших мета тегов
В IE был представлен новый механизм под названием «режим совместимости». С его помощью можно изменять режим просмотра и смотреть, как в старых браузерах будет отображаться ваш сайт. Данная функция работает на объявлении X-UA-Compatible, через meta или HTTP заголовки. Какое-то время данный метод даже рекомендовали в Google Web Toolkit. Теперь же, когда есть только IE11 и Edge, эти теги устарели. Ниже показан пример объявления:
|
1 2 |
<meta http-equiv="X-UA-Compatible" content="IE=9"> <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> |
Почистите кастомные шрифты
На протяжении долгого времени веб-дизайнеры были ограничены в выборе шрифта. Люди собирали так называемые списки «безопасных шрифтов», которые включали в себя системные шрифты с разных операционных систем (к примеру, CSS Font Stack). С появлением правила @font-face все смогли загружать свои шрифты напрямую или же с сервисов типа Google Web Fonts и TypeKit. Давайте не будем забывать также про массу шрифтов-иконок, которые очень популярны на данный момент. Chris Coyier разложил все по полочкам в своей статье using @font-face на тот случай, если вам нужно освежить память.
С окончанием поддержки IE9 мы можем спокойно отказаться от файлов формата .eot (даже от .ttf). Очень удобно, особенно если нужно настроить шрифты-иконки, так как процесс обновления стал намного проще (хотя все больше людей рекомендуют использовать SVG иконки вместо шрифтов).
Упростите кроссбраузерные тесты
Тестирование на кроссбраузерность и отладка всегда были утомительным процессом, особенно когда нужна поддержка IE. Со временем были найдены различные решения: от приложений типа IETester или Multiple IE. Некоторые запускают виртуальные машины, но основная проблема была в том, что требовалась настоящая лицензия ОС. Потом ребята из Microsoft предложили «бомбу замедленного действия» — виртуальные машины в особенной комбинации Windows и IE. Все, что было нужно это выбрать любимую систему виртуализации из списка (на данный момент это Virtual Box, VMWare, Vagrant и HyperV), загрузить образ нужной виртуальной машины, запустить и начать работать.
Все варианты доступны и по сегодняшний день на тот случай, если вы захотите объяснить детям, как вам приходилось проводить отладку кода в IE6 без панели разработчика. Других причин, по которым их стоит использовать, на данный момент нет.
Заключение
Отладка кода под старые версии IE была сложным занятием (а иногда и непонятным). Мы запомнили самые распространенные из багов. Position is Everything и Quirks Mode, пожалуй, находятся на вершине данного списка. К счастью с развитием интернета мы можем оставить позади устаревшие инструменты и практики. Пора провести полную уборку в доме.
Автор: Adrian Sandu
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
