Проводимо очистку після Internet Explorer

25

Від автора: новий рік для front-end розробників почався дуже добре. 12 січня Microsoft припинила підтримку старих версій IE. Мільйони розробників по всьому світу спокійно зітхнули. На спокій пішли останні бійці «війни браузерів», які розпочалися з новим тисячоліттям.

Як мінімум протягом останніх десяти років різні версії IE піддавалися бану в середовищі веб-дизайнерів і front-end розробників по всьому світу. З зростанням популярності Firefox, Opera і останніх версій Chrome світ дізнався, що інтернет може бути набагато краще, швидше і набагато безпечніше. Але для того, щоб не обділити тих, хто залишився на IE (або не зміг перейти), ми були змушені викручуватися і працювати з різними примхами старих браузерів. Є досить відома кругова діаграма, що показує відчуття спільноти дизайнерів (сама новітня, яку я зміг знайти була за 2007 рік на сайті www.dezinerfolio.com):

Проводимо очистку після Internet Explorer

На щастя, зараз все набагато краще. Ми повинні працювати тільки з останнім втіленням движку Trident в IE11. Браузер досить сучасний порівняно з конкурентами. Тому пора зробити прибирання в будинку і викинути застарілі інструменти, процеси і методи. Геть це старе…

Більше ніяких хаків браузерів

Першим зброєю в нашому арсеналі були хакі браузерів. Хак це неправильне оголошення, яке використовує помилки парсера в движку рендеринга. Хакі використовувалися для перезапису стандартних декларацій зі значеннями. Нові значення повинні були забезпечити нормальний функціонал і вигляд у конкретному браузері. Були хакі, які працюють як в одній версії IE, так і в багатьох. Нижче представлена класифікація хаків за форматами:

Хакі селекторів: зазвичай такий хак використовується для відключення старих версій IE, які не розуміють новий синтаксис.

Хакі властивість/значення або атрибут: первинні хакі – діри в движку програми для доступу до конкретної старої версії.

Хакі медіа запитів: використовуються для доступу/фільтрації різних старих версій (не тільки IE). За основу береться підтримка синтаксису @media.

JavaScript хакі: використовуються для виявлення браузерів, визначення конкретної версії IE за конкретними властивостями, підтримуваним движком JS.

Працювати з хакамі було складно і незрозуміло. Іноді доводилося каскадировать кілька хаків один за іншим, так як в більш нових версіях фіксувалися помилки парсера, які не вирішували проблему відтворення, заради якої ви і почали злом. Розглянемо кілька прикладів таких хаків. Обмежимося трьома старими версіями:

/*========== Хакі селекторів ==========*/
/* 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, але ви можете зустрітися з нею в старих кодах. Розглянемо кілька прикладів коду:

Умовні коментарі для завантаження додаткових стилів

Умовні коментарі для завантаження JavaScript полифилов

Основна проблема тут була в тому, що для кожної версії IE виконувався додатковий HTTP запит. Розробники були змушені шукати більш високопродуктивні методи. В результаті виконання умовного коментаря до тегу html додавався додатковий клас. Даний підхід був більш популярним, зокрема використовувався у фреймворку HTML5 Boilerplate. До цього моменту IE6 можна було або ігнорувати або працювати з ним через техніку витонченої деградації, в той час як відмінності між сучасними версіями (IE7-9) і їх конкурентами (Firefox, Chrome, Safari і Opera) були настільки малі, що це не виправдовувало створення окремих файлів стилів. Можна було додати ще кілька невеликих виправлень за допомогою додаткової специфічності класів тега html. Можливість зустріти такий приклад зараз набагато вище, ніж у попереднього:

Умовні коментарі для додавання додаткових класів в тег html