Пожалуйста, уже стилизуйте теги NOSCRIPT!

В эти наполненные солнцем дни SPA (одностраничных приложений) на основе Javascript, где все поют и танцуют, кажется, единственное, на чем экономят, — это скромный тег ‹NOSCRIPT›.

После всей вашей работы, собраний команды и спринтов, поздних ночных сеансов кодирования для Black Sabbath, скрамов, которые совсем не Agile и короткие, встреч с управляющим директором (у которого нет ни черта права вносить изменения), спрашивающим: «Вы уверены, что у нас достаточно милые картинки с собаками?», разве это не разрушает душу ваших клиентов, когда они выдают следующий результат в браузере, когда ваше приложение, наконец, запускается?

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

Если вы в настоящее время не используете блокировщик скриптов, позвольте мне порекомендовать вам NoScript. Имеет расширения для FireFox и Chrome. Пожалуйста.

Привет! Для внесения в белый список требуется несколько секунд (вы можете сказать), так в чем проблема?

Что ж. лично я потерял счет времени, когда я переходил на интересную страницу, все время дрожа, чтобы прочитать новые методы CSS или увидеть последнюю супермодель в мире собак, чтобы встретить совершенно пустую страницу. Даже не намёк, как выше, а просто нетронутый вопиющий WPOF (White Page Of Frustration).

Некоторые из популярных быстрых руководств по библиотеке/фреймворку (я смотрю на ваше приложение create-react-app), по крайней мере, предоставляют сообщение выше. Однако, как насчет того, чтобы мы потратили маленькуюдолю времени, которое потребовалось, чтобы наша гибридная раскладка карты flex/grid перестала давать дополнительный интервал в 1 пиксель в браузере Safari iOS 7 (только для чехословацкой версии), и добавить немного профессионализма в вопрос?

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

Хорошо, это желтое и яркое, но в этом суть. Также есть ссылка на https://www.enable-javascript.com/ с инструкциями для большинства браузеров. Правда, вашему среднестатистическому Капитану NoScript это не нужно!!!! типа chappie, но давайте угодим всем. Он также удобен для мобильных устройств и по-прежнему хорошо смотрится на моем старом iPhone 5 и более поздних версиях.

Я собираюсь показать вам, как сделать приведенный выше вывод в контексте приложения React, загружаемого с помощью create-react-app, что, по-видимому, является единственным способом качаться в наши дни. Тем не менее, поскольку концепции не требуют никакого JavaScript или необычного бизнеса, который ваша мама не одобрила бы на первом свидании, он будет работать для любой системы, включая простой статический HTML/CSS. Я предполагаю, что вы создали приложение и удалили шаблонный материал, который нам не нужен.

В порядке. В вашей общедоступной папке вы создадите каталог 'assets', который затем будет содержать 'css' и 'изображения. папка strong>'. Этот макет является на 100% необязательным (извините за ниндзя, которые заглядывают вперед), но просто сохраняет чистоту. Если вы не пойдете по этому пути, вам нужно будет изменить разметку index.html ниже.

В папке css создайте пустой файл noscript.css.

В папке images загрузите файл логотипа JS отсюда. Я переименовал его в js-logo.png до конца этого урока. На этом сайте много приличных логотипов и обычных png, если у вас хватит терпения поискать их по subpng

В итоге вы получите следующий макет:

Теперь отредактируйте существующий index.html, как показано ниже:

Обратите внимание, что строка 8 является новой, и вам необходимо заменить существующее скучное содержимое NOSCRIPT в теле строками с 12 по 29.

Как зоркие среди вас наверняка заметили, все здесь имеет id, и в поле зрения нет ни одного class="super-sexy-css". Я обнаружил, что использование классов css в NOSCRIPT не работает, просто придерживайтесь id по всем направлениям.

Так. В строке 8 мы условно загружаем noscript.css, только если мы находимся в ситуации без скриптов, иначе он игнорируется.

Разметка Body внутри тегов NOSCRIPT не должна преподносить сюрпризов, мы просто помечаем соответствующие элементы тегами id, которые будут сопоставляться в css.

Как видно из HEAD, у нас есть один отдельный файл CSS для сценария NOSCRIPT, полностью независимый от любых других наших стилей.

В приведенном выше коде действительно не должно быть никаких сюрпризов. Мы загружаем шрифт Google, чтобы придать тексту немного странный вид, делаем несколько сбросов, а затем используем Flex для макета, чтобы центрировать все на странице. Наконец, есть несколько медиа-запросов, чтобы разобраться с этим на мобильных устройствах.

Это не самый лучший CSS, и я уверен, что у меня будут комментарии, которые помогут мне его улучшить, но он работает в такой ситуации. Когда он загрузится, будет небольшая вспышка неформатированного кода, но он выглядит намного лучше, чем если бы мы не беспокоились.

Надеюсь, это поможет всем, кто был обеспокоен скучным поведением NOSCRIPT по умолчанию, и даже лучше, если оно сможет открыть глаза тем, кто никогда даже не знал об этом калечащем своих любимых цифровых детей.

Всегда открыты для комментариев и предложений по улучшению, да!

ОБНОВЛЕНИЕ 2: если у вас возникли проблемы с отображением шрифта Google в рабочих настройках (например, в приложении React), переместите @import для шрифта из noscript.css в ваш app.css или куда угодно, особенно если вы используете другие шрифты Google для стандартного приложения. Затем в noscript.css просто измените семейство шрифтов в строке 10 на:

font-family: "New Tegomin", serif !important;