Как написать запасные варианты CSS для когда Javascript отключен

Question

Как написать запасные варианты CSS для когда Javascript отключен

Я использую jQuery в приведенных ниже примерах, но мой вопрос относится в более общем случае к любой ситуации, когда javascript используется для отображения чего-то, что было бы пропущено, если бы javascript не был включен.

Допустим, я хочу добавить какой-то текст при загрузке страницы:

.fade-in { opacity:0; }

<div class="fade-in">FOOBAR</div>

$('.fade-in').fadeIn();

Но что, если у клиента не включен JavaScript?

Я не хочу, чтобы текст оставался невидимым, поэтому, возможно, я установил CSS в конечное состояние как запасной вариант, а затем UN-установил его с помощью javascript перед анимацией. Таким образом, пользователи без javascript просто видят обычный текст (без fadeIn), а пользователи с JS видят замирание.

.fade-in { opacity:1; }

<div class="fade-in">FOOBAR</div>

$('.fade-in').css('opacity', 0);
$('.fade-in').fadeIn();

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

Есть ли лучшая практика для этого, которая не приводит к мерцанию ИЛИ жертве пользователей без JS?

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

Обновление: я знаю, что такие инструменты, как Modernizr, могут быть использованы для добавления .no-js классы и т.д., но я бы предпочел решение, которое не опирается на эти библиотеки.

4

javascript css progressive-enhancement

Источник

user1141918 05 мар '14 в 16:11

4 ответа

Другие вопросы по тегам javascript css progressive-enhancement

user2533082 05 мар '14 в 16:13 2014-03-05 16:13 · Answer 1 · 2014-03-05 16:13

Если у пользователя не включен JS, создайте для него таблицу стилей:

<head>
scripts
<noscript><link href="no-js.css" /> </noscript>
</head>

9

Источник

user2533082 05 мар '14 в 16:13

user1922258 05 мар '14 в 16:13 2014-03-05 16:13 · Answer 2 · 2014-03-05 16:13

Использование <noscript></noscript> теги

3

Источник

user1922258 05 мар '14 в 16:13

user1141918 05 мар '14 в 16:27 2014-03-05 16:27 · Answer 3 · 2014-03-05 16:27

Интересно, будет ли что-то подобное работать?

<body>

<noscript>
<div class="no-js">
</noscript>

...

<noscript>
</div>
</noscript>

</body>

Идея состоит в том, чтобы сохранить весь CSS в одной таблице стилей путем условной упаковки элементов в .no-js класс не требуя модернизр.

0

Источник

user1141918 05 мар '14 в 16:27

user827168 25 авг '14 в 11:42 2014-08-25 11:42 · Answer 4 · 2014-08-25 11:42

Вот мой лучший выбор для вас: используйте no-js и js занятия на вашем html элемент:

<html class="no-js">
<head>
    <title>...</title>
    <!-- Change "no-js" class to "js" in the html element -->
    <!-- This must appear high in your page to avoid FOUC effect -->
    <script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
</head>
<body>
    ...
</body>
</html>

Таким образом, ваш CSS может выглядеть так:

/* The item first appears with opacity=1, then disappears when the no-js class is removed */
.no-js .fade-in { opacity: 1; }
.fade-in { opacity: 0; }

Это почти то, что делают инструменты типа Modernizr, но здесь все очень просто.

Кредиты достаются Полу Ирландскому: http://www.paulirish.com/2009/avoiding-the-fouc-v3/