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

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

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

Что будет если отключить JavaScript

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

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

WordPress.com

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

Trello

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

Facebook

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

NewYorkTimes

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

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

Как использовать тег «noscript»

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

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

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

<head>
    <noscript>
        <style>
            figure noscript {
                top: 0;
                left: 0;
                position: absolute;
            }
        </style>
    </noscript>
</head>
 
...
 
<figure>
    <img src="img/img-small-1.jpg"
         width="30"
         height="20"
         class="img-small"
         alt=""
         data-large="img/img-large-1.jpeg"
         data-large-width="1280"
         data-large-height="853">
    <canvas></canvas>
    <figcaption>Lorem ipsum dolor sit amet.</figcaption>
     
    <!-- fallback image -->
    <noscript><img src="img/img-large-1.jpeg" height="600" width="900"></noscript>
</figure>

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

Заключение

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

Автор: Thoriq Firdaus

Источник: http://webdesign.tutsplus.com/

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

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Елена

    Никогда не отключаю JavaScript, и не отключала… Но хорошо узнать, заранее, как это работает без JavaScript. Спасибо за урок.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree