Проблема Internet Explorer: чи є можливість розвитку при відсутності підтримки

1. Проблема «працює найкраще з Chrome»
2. розширюється прірву
3. Обіцянка і реальність прогресивного поліпшення
4. Проблема з shoehorning
5. Що треба зробити?
6. Зробіть чіткий поділ

Наша взаимовыгодная связь https://banwar.org/

Від автора: проблема Internet Explorer поступово веде його до смерті. Моя перша робота на повну зайнятість була в невеликій компанії. У нас не було BrowserStack, тому ми об'єднали тимчасову лабораторію пристроїв. Переглядав сайти я на застарілому iPad першого покоління з застарілою версією Safari, тому бачив я лише безлад. Я згадав цитату Дугласа Крокфорд, який колись вважав, що мережа «сама вороже середовище розробки програмного забезпечення».

Проблема «працює найкраще з Chrome»

Через цю труднощі виникла проблема. Раніше в цьому році широко поширена стаття в Verge попереджала про повідомленні «працює найкраще з Chrome».

Є ще кілька прикладів цієї проблеми. У популярному додатку для обміну повідомленнями Slack голосові виклики працюють тільки в Chrome. У відповідь на прохання про допомогу Slack пояснює своє рішення наступним чином: «Від нас вимагається значних зусиль для вирішення проблем у всіх браузерах, тому ми зосереджені на наданні кращого досвіду в Chrome». Сам Google неодноразово створював сайти, в тому числі Google Meet, Allo, YouTube TV, Google Earth і YouTube Studio, які повністю блокують альтернативні браузери. Це, безумовно, погана практика, але підкреслює той факт, що сумісність між браузерами може бути складною і віднімає багато часу.

Значний відмітна ознака не пов'язаний між Chrome і всім іншим. Набагато більше значення має зростаюча прірва між Internet Explorer і всіма іншими великими браузерами. Чи повинні наші методи розвитку ускладнюватися минулим? Або ми повинні кинутися в майбутнє, відмовляючись від деяких користувачів на нашому шляху? Я за середину. Ми можемо зробити життя простіше для себе, не порушуючи зворотної сумісності Інтернету.

розширюється прірву

Chrome, Opera і Firefox постійно відкривають нові функції. Edge і Safari в кінцевому підсумку наздоганяють. Тим часом, Internet Explorer, однак, був повністю відкинутий Microsoft, яка намагається підштовхнути користувачів Windows до Edge. IE не отримує нічого, крім оновлень безпеки. Це розчарування для розробників на стороні клієнта. Ми читаємо про нові функції, але часто не можемо їх використати - через одного браузера з зменшується часткою ринку.

JavaScript. Швидкий старт

Вивчіть основи JavaScript на практичному прикладі зі створення веб-додатки

Деякі нові функції абсолютно тривіальні (caret-color!); деякі з них відносяться до конкретних випадків використання, яких у вас ніколи не може бути (WebGL 2.0, Web MIDI, Web Bluetooth). Інші вже відчувають себе майже незамінними навіть для найпростіших сайтів (object-fit, Grid).

Обіцянка і реальність прогресивного поліпшення

Для сайтів, орієнтованих на контент, на питання про підтримку браузера не слід відповідати простим так чи ні. CSS і HTML були розроблені з точки зору відмовостійкості. Якщо конкретний браузер не підтримує shape-outside або service worker, або font-display, ви все одно можете використовувати ці функції. Ваш сайт не буде вибухати. На сайті просто не буде додаткової стилістичного забарвлення або оптимізації продуктивності в які не підтримують браузерах.

Інші функції, такі як CSS Grid, вимагають трохи більше роботи. Макет сторінки менше, ніж необхідність, і Grid нарешті привнесла реальну систему макета в Інтернет. При використанні з обережністю в простих випадках, Grid може витончено повернутися до більш старих методів компонування. Наприклад, ми могли б повернутися до flex-wrap. В даний час Flexbox є невід'ємною рисою розробників, але навіть це пронизано помилками в IE11.

. grid> * {

width: 270px; / * No grid fallback style * /

margin - right: 30px; / * No grid fallback style * /

}

@ Supports (display: grid) {

. grid> * {

width: auto;

margin - right: 0;

}

}

У наведеному вище коді я встановлюю для всіх найближчих дочірніх елементів сітки задану ширину і відступ. Для браузерів, які підтримують Grid, я буду використовувати grid-gap замість margin і визначати ширину елементів за допомогою властивості grid-template-columns. Це не складно, але воно робить код більше і складніше, якщо він повторюється на всій кодової базі для різних макетів. Коли ми починаємо будувати все макети сторінок за допомогою Grid (і в кінцевому підсумку display: contents), надання резервної копії для IE буде ставати все більш важким. Використовуючи @supports для складних завдань компонування, ми ефективно вирішуємо одну і ту ж проблему двічі - використовуємо два різних методу для створення аналогічного результату.

Не кожна функція може використовуватися як удосконалення. Деякі речі необхідні. Люди із захопленням ставляться до призначених для користувача властивостей CSS з 2013 року, але вони все ще не широко використовуються, і ви можете здогадатися, чому: Internet Explorer їх не підтримує. Або візьміть Shadow DOM. Люди говорять про це більше п'яти років. Нарешті, в цьому році він з'явиться в Firefox і Edge і потрапляє в Internet Explorer ... в будь-який момент в майбутньому. Ви не можете виправляти підтримку за допомогою transpilers або polyfills або prefixes.

У користувачів більше браузерів, ніж будь-коли, на вибір, але IE вдається поодинці прив'язати нас до вічнозелених минулого Інтернету. Якщо розробка сайтів, заснованих тільки на Chrome, являє собою одну з крайнощів поганий практики розвитку, прив'язка себе до рудиментарних, застарілому, зомбі-браузеру, безумовно, представляє інший.

Проблема з shoehorning

Замість того, щоб уникати сучасних функцій JavaScript, polyfilling і transpiling стали нормою. ES6 підтримується всюди, крім IE, але ми відправляємо все браузери, перевантажені версіями нашого коду. Транспортування не дуже хороша для продуктивності. Наприклад, одна async функція з п'ятьма рядками може перетворитися в двадцять п'ять рядків коду.

«Я відчуваю деяку провину за поточний стан справ», - сказав Алекс Рассел про свою попередню ролі, leading development Traceur, транспілера, який передував Babel. «Я бачу так багато слідів, коли комбінація переповнення Babel і поганий [webpack] foo повністю гальмують продуктивність сайту. ... Мені сумно, що ми все ще граємо в цю гру ».

Якщо не підходить transpilling, часто може підійти polyfill. Polyfill.io став масово популярний. Chrome відправляється порожній файл. Стародавні версії IE отримують гігантську гору polyfills. Ми відправляємо найбільшу корисне навантаження тим, хто найменше здатний впоратися з цим - люди застрягли на повільних старих машинах.

Що треба зробити?

пріоритет контенту

Cutting the mustard - це метод, популяризованому командою Front News на BBC News. Цей підхід знижує ринок браузерів в два рази: всі браузери отримують базовий досвід або основний контент. JavaScript умовно завантажений лише більш здатними браузерами. Ще в 2012 році їх розділова лінія була наступною:

if ( 'querySelector' in document && 'localStorage' in window && 'addEventListener' in window) {

// load the javascript

}

Томас Маслен, провідний розробник BBC, пояснив логіку: «За останні кілька років я відчуваю, що наша індустрія стала ледачою через божевільних швидкостей завантаження, які нам надали широкосмуговий зв'язок. Всі перестали турбуватися про те, наскільки великі їх веб-сторінки і додали тонну JS-бібліотек, CSS-файлів і масивних зображень в DOM. Це тривало на мобільних платформах, які не завжди мають широкосмугові швидкості або апаратні можливості для створення складного коду ».

Тим часом Guardian повністю виключає JavaScript і таблиці стилів з Internet Explorer 8 і далі.

JavaScript. Швидкий старт

Вивчіть основи JavaScript на практичному прикладі зі створення веб-додатки

Nature.com використовує аналогічний підхід, надаючи тільки дуже обмежену таблицю стилів для чого-небудь старше IE10.

Якби ви увірвалися в музей, вкрали старий комп'ютер і відкрили Netscape Navigator, ви все одно могли б із задоволенням розглянути ці веб-сайти. Користувач приходить на ваш сайт для контенту. Вони не дійшли до красивого градієнта або красиво округленого прикордонного радіусу. Вони, звичайно, не прийшли для потенційно нудотної анімації прокрутки паралакса.

Той, хто розробляв для Інтернету якийсь час, зіткнувся з помилкою браузера. Ви перевіряєте свою нову функцію в кожному великому браузері, і вона відмінно працює, за винятком одного. Запам'ятовування інформації про підтримку з caniuse.com і використання прогресивного поліпшення не гарантує, що кожна функція вашого сайту буде працювати належним чином.

Незалежно від того, наскільки добре сформований і добре написаний ваш код, іноді речі пробиваються не зі своєї вини, навіть в сучасних браузерах. Якщо ви не активно тестируете свій сайт, помилки найчастіше будуть доступні вашим користувачам, без відома вам. Замість того, щоб transpiling і polyfilling і сподіватися на краще, ми можемо доставити те, до чого прийшла людина, в найстійкішою, результативною і надійної форми: unadulterated HTML. Жодна компанія не має ресурсів для активного тестування свого сайту на кожній старій версії кожного браузера. Несправність JavaScript може зіпсувати веб-інтерфейс і зробити невимушену сторінку простий. Замість того, щоб залишати користувачів на масу polyfills і потенційних помилок JavaScript, ми даємо їм базовий, але функціональний досвід.

Зробіть чіткий поділ

Як далі може виглядати mustard cut похід? Ви можете виконати запит функції з використанням JavaScript, щоб умовно завантажити таблицю стилів, але, спираючись на JavaScript, з'являється крихкість, яку найкраще уникати. Ви не можете використовувати @import всередині блоку @supports, тому у нас залишилися медіа-запити.

Наступний запит запобіжить доставку файлу CSS в будь-яку версію Internet Explorer і більш старих версій інших браузерів:

<Link id = "mustardcut" rel = "stylesheet" href = "stylesheet.css" media = "

only screen,

only all and (pointer: fine), only all and (pointer: coarse), only all and (pointer: none),

min - moz-device-pixel-ratio: 0) and (display-mode: browser), (min - moz-device-pixel-ratio: 0)

">

Нам не дуже-то цікаво, які саме функції тестує цей запит; це просто хакерський спосіб поділу між старими і сучасними браузерами. Блискучий сучасний сайт буде доставлений в Edge, Chrome (і Chrome для Android) 39+, Opera 26+, Safari 9+, Safari на iOS 9+ і Firefox 47+. Я заснував запит на роботі Енді Кирка. Якщо ви хочете використовувати підхід з cutting-the-mustard, але повинні відповідати різним вимогам підтримки, він підтримує репозиторій Github з різними варіантами.

Ми можемо використовувати один і той же медіа-запит для умовної завантаження файлу Javascript. Це дає нам одну послідовну роздільну лінію між старими і сучасними браузерами:

(Function () {

var linkEl = document. getElementById ( 'mustardcut');

if (window. matchMedia && window. matchMedia (linkEl. media). matches) {

var script = document. createElement ( 'script');

script. src = 'your-script.js';

script. async = true;

document. body. appendChild (script);

}

}) ();

matchMedia надає можливості медіа-запитів CSS для JavaScript. Властивість matches є логічним, яке відображає результат запиту. Якщо медіа-запит, який ми визначили в тезі link значення true, файл JavaScript буде додано на сторінку.

Це може здатися крайнім рішенням. З маркетингової точки зору сайт більше не виглядає «професійним» для невеликої кількості відвідувачів. Проте, нам вдалося підвищити продуктивність для тих, хто застряг на старих технологіях, а також відкрити можливість використання новітніх стандартів в браузерах, які їх підтримують. Це далеко не новий підхід. У 2001 році A List Apart припинив надавати візуальний дизайн Netscape 4. Читачі серед користувачів цього браузера піднялися.

Розробка зрештою складна в кращі часи. Додавання підтримки технологічно застарілого браузера додає надмірну кількість часу і розчарування в процесі розробки. Тестування стає обтяжливим. Час на фікс багів збільшується.

Чітко відокремивши минуле, ми можемо зосередитися на створенні сучасних сайтів з використанням сучасних стандартів, не залишаючи користувачів, що застрягли в застарілих браузерах з неперевіреними і, можливо, зламаним сайтом. Ми зберігаємо величезна кількість розумових накладних витрат. Якщо ваш контент має реальну цінність, він може вижити без яскравих прикрас. А для користувачів Internet Explorer в Windows 10 встановлено Edge. Повний досвід - всього лише один клік.

Розробники повинні уникати життя в міхурі MacBook Pro і надшвидких з'єднаннях. Там немає чарівної кулі, яка дозволяє розробникам використовувати найскладніші функції. Вам все одно може знадобитися Autoprefixer і polyfills. Якщо ви плануєте мати велику базу користувачів в Азії та Африці, вам потрібно буде створити сайт, який відмінно виглядає в Opera Mini і UC Browser, які мають свої власні обмеження. На даний момент ви можете вибрати іншу точку відсікання, але вона буде все більше і більше окупатися з точки зору як досвіду користувачів, так і досвіду розробників, щоб використовувати те, що пропонує сучасна мережа.

Автор: Oliver Williams

джерело: http://alistapart.com/

Редакція: Команда webformyself.

JavaScript. Швидкий старт

Вивчіть основи JavaScript на практичному прикладі зі створення веб-додатки

Вивчіть сучасну верстку сайтів з нуля