Порада: не забувайте про тег noscript

14

Від автора: JavaScript – потужний мову, оживляють сайти, який надає їм інтерактивності. Але все це до тих пір, поки ми не стикаємося з його відключенням у браузері. У даній статті ми поговоримо про тег noscript.

Що буде якщо відключити JavaScript

Користувачі відключають JavaScript з кількох причин. Вони роблять це з-за обмежень пропускної здатності мережі, для продовження терміну життя батареї телефону, можливо, з-за особистих даних – люди не хочуть, щоб аналітичні скрипти стежили за ними. Деякі навіть встановлюють розширення типу NoScript для обмеження запуску JS у браузері. Досить буде відзначити той факт, що при відключенні JS багато сайти і додатки втрачають більшу частину функціоналу; якщо не повністю перестають працювати.

Розглянемо приклади. Порада: В цілях уроку я буду використовувати Quick JavaScript Switcher – корисне розширення для Chrome, за допомогою якого можна швидко включати і відключати JS.

WordPress.com

Новий редактор постів сайту WordPress.com сильно залежимо від JS. На скріншоті нижче ви можете спостерігати, що з відключеним JavaScript крім логотипу WordPress «W» на сторінці більше нічого немає. Якщо припустити, що більшість користувачів WordPress не так добре розбираються в технічних питаннях, то вони б, напевно, не зрозуміли, що відбувається.

Порада: не забувайте про тег noscript

Trello

Trello – менеджер проектів, сильно залежний від JS. Але на відміну від WordPress.com Trello дає просте попередження:

Порада: не забувайте про тег noscript

Facebook

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

Порада: не забувайте про тег noscript

NewYorkTimes

Деякі сайт, такі як блоги або новинні колонки, використовують JS лише частково. На сайті NewYorkTimes, приміром, можна помітити кілька порожніх областей, де JavaScript відключений. На скріншоті нижче видно, що між секцій «Sections» і «Search» відсутня іконка пошуку.

Порада: не забувайте про тег noscript

Це приклад техніки витонченої деградації (користувач може навіть не знати про це), основне завдання якого-забезпечення користувача найкращим зручністю використання сайту з відключеним JavaScript.

Як використовувати тег «noscript»

Те, який фолбэк ми закладемо в сайт, сильно залежить від того, як ми використовуємо JavaScript на сайті. Однак тег noscript може стати в нагоді в багатьох випадках. Як випливає з назви, noscript можна використовувати для відображення альтернативного контенту. Те, що знаходиться всередині тегів , буде відображатися тільки при вимкненому JS.

В якості прикладу я зробив демо сторінку. На цій сторінці відтворений ефект розмитою завантаження зображень, як на сайті Medium. Зображення, як і ефект розмиття, обробляються JavaScript’ом. Відмінний питання, а що станеться, якщо відключити JavaScript? Зображення не завантажуються.

Порада: не забувайте про тег noscript

Щоб зображення відображалися, ми можемо загорнути їх в тег noscript так само, як і їх стилі, в яких прописано позиціонування зображень.

figure noscript {
top: 0;
left: 0;
position: absolute;
}

Порада: не забувайте про тег noscript
Lorem ipsum dolor sit amet.
Порада: не забувайте про тег noscript

Тег noscript можна також використовувати для повідомлення користувача про те, що JavaScript відключений – майже так само, як на Facebook і Trello. Крім того, можна додати посилання, по якій користувачі зможуть активувати JS.

Порада: не забувайте про тег noscript

Висновок

Використання тега noscript в якості фолбэка це відмінний спосіб донести до користувачів з відключеним JS, що в такому разі їм не забезпечується 100% робота сайту. Однак давайте не будемо забувати, що основне завдання це переконатися в тому, що відключений JavaScript або CDN, або будь-який інший важливий функціонал) не зіпсує враження користувача.