Advertisement
  1. Web Design
  2. HTML

Совет: не забывайте про тег "noscript"

by
Read Time:3 minsLanguages:
This post is part of a series called Strange and Unusual HTML.
HTML5 Form Validation With the “pattern” Attribute

Russian (Pусский) translation by Andrey Bernatskiy (you can also view the original English article)

JavaScript – мощный язык, оживляющий сайты, который придает им интерактивности, но все это до тех пор, пока вдруг мы не сталкиваемся с его отключением в браузере.  В данной статье мы поговорим про создание фолбэка используя тег noscript

Без JavaScript

Пользователи отключают JavaScript по нескольким причинам. Они делают это из-за ограничений пропускной способности сети, для продления срока жизни батареи телефона, возможно, из-за личных данных – люди не хотят, чтобы аналитические скрипты следили за ними. Некоторые даже устанавливают расширения для браузеров типа NoScript для ограничения запуска JS в браузере. Достаточно будет отметить тот факт, что при отключении JavaScript многие сайты и приложения теряют большую часть функционала; если не полностью перестают работать.

Давайте рассмотрим примеры.

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

WordPress.com

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

WordPress.com редактор постов (11 Декабря 2015 )

Trello

Trello – менеджер проектов, сильно зависимый от JavaScript Но в отличие от WordPress.com Trello дает простое предупреждение:

Интерфейс Trello  (11 Декабря 2015 )

Facebook

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

Facebook (11 Декабря 2015 )

NewYorkTimes

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

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

Использование тега «noscript»

То, какой фолбэк мы заложим в сайт, сильно зависит от того, как мы используем JavaScript на сайте, однако тег noscript может пригодиться во многих случаях. Как следует из названия, noscript можно использовать для отображения альтернативного контента. То, что находится внутри контейнера noscript, будет отображаться только при выключенном JavaScript .

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

Изображения не загрузятся.

Чтобы изображения отображались, мы можем обернуть их в тег noscript так же, как и их стили, в которых прописано позиционирование изображений.

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

Заключение

Использование тега noscript в качестве фолбэка это отличный способ донести до пользователей с отключенным JavaScript, что в таком случае им не обеспечивается 100% работа сайта Однако давайте не будем забывать, что основная задача это убедиться в том, что отключенный JavaScript (или CDN, или любой другой важный функционал) не испортит впечатления пользователя Спасибо Christian Heilmann за то, что передал сообщение. 

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.