Я всё тщательно проверил и убедился, что мой сайт отлично (или хотя бы вполне неплохо) даже без JavaScript. Но, когда JavaScript недоступен, иногда бывает немного тяжеловато скрывать вещи, скрывать которые необходимо. Всего 7 строк кода (или даже однострочника, для самых душных) достаточно, чтобы скрывать на странице элементы, требующие JavaScript. Поэтому вам не придётся краснеть перед пользователи, которые без JavaScript заметили бы, как хромает функциональность вашего сайта.
Небольшой контекст: я сейчас разрабатываю небольшую кнопочку «Share», которую можно вставлять в посты и с лёгкостью делиться ими, если мне захочется. Взгляните, как она сейчас выглядит без JavaScript: \
Не сказать, чтобы она выглядела ужасно, но когда JavaScript включён — не требуется ссылка, а когда отключён — не требуется SVG. Я просто хотел показать SVG в виде кнопки, которую можно нажимать при включённом JavaScript, а ссылку выводить для того, чтобы её можно было без труда скопировать и вставить при отключённом JavaScript.
Если вам это в новинку — подскажу, что вторую операцию легко выполнить при помощи HTML-тега <noscript>. Браузеры понимают, что содержимое этого тега нужно отображать лишь в случаях, когда JavaScript отключён. Поэтому, если вы хотите, чтобы ссылка отображалась лишь при отключённом JavaScript, просто заключите её в тег <noscript>.
Но, если вы хотите, чтобы элемент появлялся на странице только при включённом JavaScript — тут всё несколько сложнее. Тега <onlyscript> нет, а тег <script> имеет существенно иную семантику, чем <noscript>.
Сигнализируем при помощи JavaScript, что JavaScript включён
Впервые попытавшись к этому подступиться, я подумал, что можно просто добавить строку на JavaScript в тег <head>. В таком случае, если JavaScript включён — эта строка выполнится и добавит js-enabled в список классов, применяемых к элементу <html>.
Это вполне работало бы, если бы я специально подбирал стили с учётом возможной активации JavaScript. Речь о таком подходе к стилям:
.share-button { display: none; } .js-enabled .share-button { display: block; }Но это выглядит как-то неуклюже. В таком случае приходится предусматривать по два CSS-правила для каждого элемента, а я просто хочу скрывать при отключённом JavaScript некоторые вещи. Наверное, можно поступить изящнее.
Правда, такое решение может вам пригодиться, если при включённом JavaScript вы хотите активировать какое-то очень изысканное оформление. Но в моём случае напрашивалось решение попроще.
Переопределяем конкретные элементы при помощи noscript
Далее я придумал, что в заголовочной части сайта можно было бы сочетать тег <noscript> с тегом <style>. В таком случае можно было бы просто перечислить элементы, которые я не хочу показывать, и прямо пометить их как display:none;. Они бы так и остались в разметке, но это нормально, в таком виде они никому бы не помешали.
Прямо в заголовке сайта можете, как обычно, поставить ссылки на все ваши CSS, а затем добавить следующий фрагмент кода. Он переопределит все поля, которые вы не хотите показывать при отключённом JavaScript. Я хотел скрыть классы .theme-toggle и .menu-trigger. Они касаются возможностей, работающих лишь при включённом JavaScript — это трёхпозиционный переключатель и меню-гамбургер, выпадающее в мобильной версии сайта.
<noscript> <style> .theme-toggle { display: none; } .menu-trigger { display:none; } </style> </noscript>Теперь нормально. Всё явно прописано. Код опирается на уже имеющиеся в браузере поведения и избирательно переопределяет стили в случае, если JavaScript недоступен. Поэтому не приходится специально оформлять в отдельности случаи как с включённым JS, так и с отключённым. Но, поскольку я занимаюсь разработкой новых поступательно развивающихся фич, меня этот паттерн перестал устраивать. Чем более продвинутым становится сайт, тем длиннее этот список переопределений — и именно вам придётся заботиться о его актуализации в случаях, если будут изменяться какие-то имена классов.
Использование тега noscript и класса d-js-required
Поскольку к элементу можно прикрепить сколько угодно классов, я понял, что было бы целесообразно максимально упростить стиль noscript-style. Берём и создаём всего один класс, d-js-required, при помощи которого указываем, что для отображения этого элемента на сайте должен действовать JavaScript. Можно обновить блок <noscript><style> единственным классом, а затем обновить и все имеющиеся у нас элементы, чтобы они тоже использовали этот класс.
<noscript> <style> .d-js-required { display: none; } </style> </noscript>Итак, теперь у нас может быть сколько угодно простых элементов, отображаемых на сайте только при включённом JavaScript. Для этого не требуется ни писать какого-либо дополнительного JavaScript, ни вести постоянно разрастающийся список CSS-переопределений.
Надеюсь, этот опыт вдохновит вас на творческие решения и поможет при решении задач, связанных с прогрессивным улучшением сайта.
ссылка на оригинал статьи https://habr.com/ru/articles/898214/
Добавить комментарий