Новый год начался отлично для развития интерфейса. 12 января Microsoft прекратила поддержку старых версий Internet Explorer . Миллионы разработчиков по всему миру радовались новостям. Последние пережитки Войн Браузеров, которые определили начало нового тысячелетия, были окончательно уничтожены.
В течение по крайней мере последнего десятилетия различные версии Internet Explorer были проклятием для веб-дизайнеров и разработчиков интерфейсов во всем мире. Появление Firefox, Opera и позже Chrome показало миру, что Интернет может быть намного лучше, быстрее и безопаснее. Тем не менее, из-за боязни взломать сеть для тех, кто не (или не мог) отойти от Internet Explorer, мы были вынуждены перепрыгивать через обручи и наклоняться назад, чтобы удовлетворить причуды этих устаревших браузеров. Существует хорошо известное изображение круговой диаграммы (самое старое изображение, которое я смог найти в 2007 году на сайте www.dezinerfolio.com ), которое демонстрирует чувства сообщества:
К счастью, сейчас все намного лучше. Нам остается только иметь дело с последним воплощением движка Trident, а именно Internet Explorer 11, который уже является солидным современным браузером наравне со своими конкурентами. Таким образом, пришло время убирать дом и выбрасывать устаревшие инструменты, процессы и методы. Долой старое …
Нет больше взлома браузера
Первое оружие, которое мы имели в нашем арсенале, было взломом браузера. Хак — это, казалось бы, некорректное объявление, которое использует некоторые ошибки синтаксического анализа в механизме рендеринга. Он используется для перезаписи стандартного объявления значением, которое заставит макет выглядеть и функционировать должным образом в этом конкретном браузере. Были хаки, нацеленные на отдельные версии Internet Explorer, в то время как другие охватывали несколько версий. Дальнейшая классификация может быть сделана в зависимости от формата взлома:
- Хаки селектора : эти хаки обычно используются для исключения старых версий IE, которые не понимают новый синтаксис.
- Хаки свойств / значений или атрибутов : это оригинальные хаки, использующие дыры в механизме синтаксического анализа для определения конкретных старых версий.
- Взлом медиазапросов : они используются для нацеливания / фильтрации различных версий браузеров (не только Internet Explorer) на основе поддержки синтаксиса объявлений
@media - Хаки JavaScript : они используются для «перехвата браузера», обнаружения определенных версий Internet Explorer на основе различных функций, поддерживаемых механизмом JavaScript.
Использование хаков было одновременно сложным и разочаровывающим. Иногда вам приходилось каскадировать несколько хаков один за другим, так как некоторые ошибки синтаксического анализа (которые допускали существование хака) были исправлены в следующих версиях, не устраняя проблему рендеринга, которая изначально требовала взлома. Давайте рассмотрим несколько примеров таких хаков, ограниченных тремя версиями, которые недавно были удалены:
/*========== Selector Hacks ==========*/
/* Internet Explorer 10+ */
_:-ms-input-placeholder, :root .selector {}
/* Everything except Internet Explorer 9 and lower */
html[lang='\
en'] .selector
{}
/*========== Property/Value Hacks ==========*/
/* Internet Explorer 6-8 */
.selector { property: value\9; }
.selector { property/*\**/: value\9; }
/*========== Media Query Hacks ==========*/
/* Internet Explorer 8 */
@media \0screen {}
/* Internet Explorer 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {}
/*========== JavaScript Hacks ==========*/
/* Internet Explorer 6-10 */
var isIE = !!window.ActiveXObject;
/* Internet Explorer 8-10 */
var isIE = document.all && document.querySelector;
Для более полного списка хаков, которые нужно удалить из вашего кода, посетите Browserhacks .
Пока Пока Условные комментарии
Как мы видели выше, использование хаков CSS является грязным, склонным к сбоям и (для тех из вас, кто помешан на их коде) проваливанию проверки таблицы стилей. Ситуация обострилась до такой степени, что в ноябре 2005 года ребята из Microsoft вмешались и призвали к действию для прекращения хаков CSS , призывая разработчиков использовать условные комментарии .
Первоначально условные комментарии использовались для загрузки дополнительных таблиц стилей для определенных версий Internet Explorer. В то время различия в кодах между браузерами, совместимыми со стандартом, и Internet Explorer были достаточно большими, чтобы сделать эту практику действительной. Когда HTML5 стал реальностью, он также использовался для загрузки полифилов, которые обеспечивали недостающую поддержку новых функций (мы затронем эту тему позже в этой статье). Хотя эта практика в основном использовалась для нацеливания кода для IE6–7, вы все равно можете столкнуться с ним в каком-то устаревшем коде. Давайте посмотрим на некоторые примеры кода:
Условные комментарии, используемые для загрузки дополнительных таблиц стилей
<!--[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
(фрагмент кода из начального шаблона Bootstrap по умолчанию)
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
Основной проблемой этого подхода было то, что каждая версия Internet Explorer, нацеленная таким образом, выполняла дополнительные HTTP-запросы. Разработчики были вынуждены искать подходы, предлагающие более высокую производительность. В результате были развернуты условные комментарии для добавления дополнительных классов в <html> Эта практика была намного более популярна, и ее, среди прочего, использовал фреймворк HTML5 Boilerplate . К тому времени Internet Explorer 6 можно было либо игнорировать, либо обрабатывать с использованием постепенного ухудшения, в то время как различия между более современными версиями (IE7–9) и их конкурентами (Firefox, Chrome, Safari и Opera) были достаточно малы, чтобы не допустить использования целых дополнительных таблиц стилей. , Несколько незначительных настроек могут быть достигнуты благодаря дополнительной специфичности, обеспечиваемой классами, добавленными в <html> Этот пример наиболее вероятен сегодня, как показано в примерах ниже:
Условные комментарии, используемые для добавления дополнительных классов в <html>
<!--[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-код с использованием дополнительных классов
.foo { color: black; }
.ie7 .foo { color: blue; } /* IE7 */
.ie8 .foo { color: green; } /* IE8 */
.ie9 .foo { color: red; } /* IE9 */
Запуск Internet Explorer 10 положил конец условным комментариям, так как они больше не поддерживаются в этой версии. Обнаружение признаков (с использованием Modernizr ) было новым стандартом для прогрессивного улучшения или постепенного ухудшения. Только веб-сайты или фреймворки, которым требовалась обратная совместимость, по-прежнему использовали их, в основном для загрузки полифилов, как мы могли видеть в приведенных выше примерах.
Уменьшите свои библиотеки JavaScript
Выше мы видели, как отсутствие поддержки современных функций часто связывалось с полифиллами с использованием условных комментариев. Если ваше приложение или веб-сайт используют такие сценарии, вы можете смело избавиться от них сейчас. Но не каждая ситуация так же ясна, как эта. Давайте расширим эту тему немного дальше, приведя несколько соответствующих примеров.
Известно, что jQuery является наиболее используемой библиотекой JavaScript в Интернете, на которой зарегистрировано более 53 миллионов веб-сайтов (согласно данным BuiltWith.com ). jQuery родилась из необходимости выравнивать игровое поле между браузерами, покрывая различия в поддержке функций. Со временем устаревшая поддержка достигла такого уровня, что в 2013 году jQuery был разделен на две ветви: 1.x.x2.x.xотказались от всех функций, связанных с Internet Explorer 6–8 . Последнее обновление от 8 января 2016 года было объявлено последним перед переходом на 3.x.x Поэтому вы можете либо остаться с веткой 1.x.x3.x.x2.x.x
Есть еще одна вещь для рассмотрения. Internet Explorer 11 и Edge имеют лучшую интеграцию нативных методов (особенно для навигации и манипулирования DOM), которые в прошлом требовали jQuery для правильной работы в разных браузерах. В некоторых случаях, когда скрипты могут быть реорганизованы должным образом, может быть даже возможно полностью удалить jQuery и использовать только простой JavaScript.
Другой пример — Modernizr, о котором мы уже упоминали ранее. Эта библиотека работает так, чтобы выполнить набор тестов для поддерживаемых функций и пометить результат как класс, присоединенный к элементу <html> После небольшого исследования (в основном на CanIUse.com ) мы можем отключить тесты, предназначенные для изоляции функций, не поддерживаемых в более старых версиях Internet Explorer. Если ваша страница использует только основные функции с широкой поддержкой браузера, вам может не потребоваться загрузка Modernizr.
Тот же подход действителен для любого другого скрипта полифилла, который вы можете использовать. Проверьте, поддерживаются ли поддерживаемые им функции в современных браузерах, и избавьтесь от них, если они больше не нужны.
Удалить собственные значения CSS
Когда-то, Internet Explorer был единственным браузером, способным создавать удивительные эффекты на странице, благодаря проприетарной технологии, называемой ActiveX Filters . Разработчики могли создавать статические эффекты (например, непрозрачность), создавать градиентные фоны, вращать и преобразовывать элементы или создавать эффекты перехода при загрузке новой страницы. Хотя CSS3 предлагал стандартные альтернативы большинству этих эффектов, фильтры ActiveX долгое время оставались единственной возможностью, доступной для Internet Explorer. Нередко встречаются эти объявления, особенно в таблицах стилей, закодированных вручную. Поэтому, следите за утверждениями, подобными приведенным ниже, они вам больше не нужны:
.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)'";
}
Если ваш процесс написания CSS включает использование автоматического префикса, вам не нужно беспокоиться об этой теме. Хороший плагин будет оставаться в курсе уровня поддержки, присутствующего в современных браузерах.
Избавьтесь от устаревших мета-тегов
Internet Explorer 8 представил новый программный механизм, который называется «Просмотр совместимости» и предназначен для изменения режима рендеринга таким образом, чтобы старые веб-сайты по-прежнему отображались правильно. Это было достигнуто с помощью объявления X-UA-Compatible<meta /> В какой-то момент этот подход был даже рекомендован в Google Web Toolkit . Сегодня, когда поддерживаются только Internet Explorer 11 и Microsoft Edge, эти теги устарели. Мы можем увидеть здесь пример того, что вы должны искать:
<meta http-equiv="X-UA-Compatible" content="IE=9">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
Очистите ваши пользовательские веб-шрифты
В течение долгого времени веб-дизайнеры были ограничены в выборе шрифта. Люди собирают многочисленные списки шрифтов «web safe» из системных шрифтов, доступных в различных операционных системах (например, CSS Font Stack ). С введением правила @font-faceGoogle Web Fonts и TypeKit . Давайте не будем забывать множество значков шрифтов, которые приобрели большую популярность. У Криса Койера есть исчерпывающая статья об использовании @ font-face на тот случай, если вам нужно освежить память.
С окончанием поддержки Internet Explorer 9 теперь мы можем безопасно отказаться от файлов шрифтов .eot (и даже .ttf ) вместе с соответствующими записями CSS. Это особенно полезно, если вам нужно управлять шрифтом значка, поскольку процесс обновления значительно упрощается (хотя все больше и больше людей рекомендуют использовать значки SVG вместо шрифта значка).
Упростите кросс-браузерный процесс тестирования
Кросс-браузерное тестирование и отладка всегда были утомительным процессом, особенно когда требовалась совместимость с Internet Explorer. Со временем были найдены различные решения: от приложений, таких как IETester или Multiple IE . Некоторые люди использовали виртуальные машины, но главная проблема заключалась в том, что вам все еще требовалась действительная лицензия ОС для каждого экземпляра. Затем к ним присоединились ребята из Microsoft и предложили виртуальные машины с «бомбами времени» с конкретными комбинациями Windows и Internet Explorer . Все, что нужно было сделать, это выбрать свою любимую систему виртуализации из доступного списка (в настоящее время содержащий Virtual Box , VMWare , Vagrant и HyperV ), загрузить нужный образ виртуальной машины, запустить его и начать работать.
Все эти опции по-прежнему доступны сегодня, если вы чувствуете ностальгию и хотите объяснить новичкам, как вам пришлось отлаживать код в Internet Explorer 6 без инструментов веб-разработчика. Не должно быть больше причин делать их частью нормального процесса разработки.
Вывод
Отладка кода для устаревших версий Internet Explorer раньше была сложным (а иногда и разочаровывающим) процессом. Мы запомнили наиболее распространенные ошибки браузера и их счетчики. Положение — Все, и Режим Причудов имел обыкновение быть наверху нашего списка закладок. К счастью, поскольку сеть продолжает свое развитие, мы можем оставить эти дни позади и отказаться от устаревших инструментов и методов. Теперь пришло время для тщательной уборки дома.