Загальні відомості про HTML 5 Polyfill, Shiv і Shim

18

Від автора: початківці розробники часто скаржаться на відсутність повної підтримки в новітніх браузерах, таких як Chrome, всіх останніх тегів HTML, властивостей CSS та JavaScript. Замість цього всі браузери прагнуть випустити локальні патчі: Firefox підтримує якісь з властивостей, які не підтримує Chrome, Safari немає тих властивостей, що є в Chrome і т. д. Все це пояснюється трьома основними причинами.

HTML-це живий, постійно розвивається мова розмітки. У той час як W3C все ще доробляє і стандартизує HTML5, розробникам цікаві зовсім інші, нові, незакінчені, що знаходяться в бета-тестуванні, властивості (як, наприклад, Web Animation API). По самій своїй природі дані властивості можуть бути лише частково виконані в останніх версіях браузерів.

Великі обсяги роботи. Існує кілька способів розробки нового браузера, але всі вони стикаються з однією і тією ж нерозв’язною проблемою: для повної підтримки HTML5 занадто багато чого потрібно зробити, а значить, потрібно дуже багато людей з вільним часом і можливостями.

Споживачі не будуть чекати релізу з повноцінною підтримкою специфікації. Два десятиліття тому оновлення браузера могли бути раз на 12 або 18 місяців; IE6 протримався 5 років без оновлень. Але такий підхід непридатний в цих умовах ринку. Користувачам потрібні (і вони заслуговують) постійні оновлення браузера. Чисто теоретично можливо не випускати оновлення браузера, поки не буде повністю підтримуватися HTML5 специфікація, однак ринок неодноразово показав, що споживачеві важливіше отримати короткочасне оновлення, в якому підтримуються парочка нових властивостей.

Все це ставить розробників у скрутне становище: старі специфікації HTML, CSS і JavaScript відмінно підтримуються браузерами (хоча і не без похибок), в той час як новітні властивості у всіх цих мовах можуть підтримуватися тільки в одному або двох браузерах і повністю не працювати в інших. Але на щастя, є вихід:

ШИМы – будь шматки коду, перехоплюючі виклик API (мовою розробників запит властивостей з HTML5, CSS та JavaScript) і дозволяють змінити код. Полифилл (термін придуманий розробником Remy Sharp) це спрощений ШІМ, в тому сенсі, що він вбудовується в код сторінки і допомагає підтримувати властивості в браузерах, які цієї підтримки ще не мають.

Зазвичай це JavaScript код (але не завжди), часто у поєднанні з CSS і частково з HTML розміткою. Є безліч добре зарекомендували себе полифиллов, які вирішують проблему підтримки HTML5 і нових властивостей CSS і JavaScript кількома способами.

Тим не менш, з полифиллами потрібно бути обережніше, нижче кілька причин:

Полифиллы самі по собі підтримуються не всіма браузерами. З одного боку вони написані, щоб забезпечити підтримку старих браузерів, але з іншого у полифиллов все одно є свої обмеження: коли справа стосується IE, наприклад, працюють вже тільки деякі з полифиллов, і тільки з версії IE8 і вище. Щоб підібрати потрібні вам полифиллы, слід протестувати свій сайт в різних браузерах і їх версіях з допомогою Google Analytics.

Залежність від інших бібліотек. Для забезпечення розширеної підтримки браузерів полифиллы часто вдаються до фреймворку JQuery. Для їх роботи необхідно спочатку підключити дану бібліотеку.

Використовуйте умовну завантаження скрізь, де це можливо. Вам точно не хочеться завантажувати нерелевантні JavaScript код для браузерів, які без цього коду вже підтримують нові властивості. Умовна завантаження спрацьовує самої першої, так що можна довантажувати тільки ті полифиллы, які потрібні для конкретної сторінки в даному браузері. З цим вам може допомогти бібліотека Modernizr; в останніх версіях браузерів також може стати в нагоді @supports.

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

У термінах HTML5 ШИВ більш специфічний: HTML5hiv це маленький шматок JavaScript коду, написаного Sjoerd Visscher, який дозволяє застосовувати нові теги HTML5 і властивості CSS в IE8. Якщо ви використовуєте лише кілька HTML5 тегів на сторінці, наприклад, , то ви можете самостійно прописати підтримку ваших тегів для IE; в інших випадках HTML5Shiv більш ніж підходить.