Как назначать стили в зависимости от того, включен JavaScript или нет

Совсем недавно случайно нашел замечательное решение одной небольшой проблемы, которая давно мозолила глаза. Причем решение из разряда таких, о которых думаешь: “Как это я раньше о таком не догадался…”.

Итак суть проблемы – на странице имеется панель (на подобие этой), которая открывается/закрывается при щелчке на её заголовке. Причем при загрузке страницы, то есть в самом начале, она должна быть в закрытом состоянии. Проблема в том, что нельзя просто так взять, и спрятать панель стилями, установив для неё display:hidden, ибо если у пользователя в браузере отключен JavaScript, то он вообще не увидит содержимого этой панели (не забываем, что скрипт должен быть ненавязчивым). А если же прятать содержимое при помощи JavaScript (например так: $(’#panel’).hide() ), то всякий раз при загрузке страницы будет происходить мелькание – то есть во время загрузки панель открыта, а как только страница загружена, она закрывается (кстати такой “баг” можно наблюдать на главной странице sape.ru под цифрами в центре страницы). Я также создал страницу где можно это посмотреть (конечно же вы не увидите мелькание если у вас супер быстрый интернет :) ).

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

document.getElementsByTagName('html')[0].className = 'JS';

Улавливаете суть? Если в браузере включен JavaScript, то для элемента html будет установлено имя класса JS, а значит мы сможем назначать стили элементам страницы в зависимости от того, включен ли JavaScript или нет. Итак, прячем (закрываем) панель:

.JS #panel {display:none}

Панель закрывается и открывается путем назначения ей стиля display, поэтому начальным положением ставим значение none. Созданный мною пример теперь будет работать так: смотреть пример.

Вот и все… Теперь неприятное мерцание не будет никого раздражать. Конечно, такие недостатки, как мелькание при загрузке страниц, нельзя назвать серьезной проблемой – это скорее мелочь, однако внимание к мелочам бывает очень даже полезным :)

Maklay.com - Большой каталог товаров для спорта и активного отдыха
  • http://miracle.rpz.name MiRacLe

    #panel {display: none}

    #panel {display: block}

  • http://miracle.rpz.name MiRacLe

    <tyle> #panel {display: none}</style>

    <noscript>
    <style> #panel {display: block}</style>
    </noscript>

    P.S. попытка намбер фри

  • admin

    По-моему, noscript использовать неудобно. Его можно добавлять только в html документ.

  • http://miracle.rpz.name MiRacLe

    По-моему советовать использовать DOM ДО domready это вредительство. Вы вероятно не в курсе, что IE на такие фокусы частенько откликается ошибкой вида “страница не может быть загружена” без особого объяснения причин. Но надеюсь вы в курсе, что средняя плотность пользователей IE пока ещё настолько велика, что количество проклятий от оных в ваш адрес превысит количество шпал под рельсами на транссибирской магистрали…

  • admin

    Ну это смотря как испольовать DOM. Я ведь обращаюсь к html, а насколько я знаю, элемент является частью DOM как только пропарсен открывающий тег.
    Кроме того, я сделал демо, и как видите, оно чудесно работает в IE, не так ли?

  • http://miracle.rpz.name MiRacLe

    Не так ли.

    Microsoft Internet Explorer
    Не удалось открыть узел http://www.jstoolbox.com/demo/jsflashing-fixed.php.
    Операция прервана.

  • admin

    Да уж, но у меня работает в IE7. Когда будет возможность, посмотрю как оно в шестом…

  • http://miracle.rpz.name MiRacLe

    “Явление” от версии IE зависит слабо, проявляется нерегулярно (все попытки классифицировать случаи проявления были провальными – ни версия ie, ни ширина интернет-канала, ни загрузка ram/cpu машины однозначно не определяли проблемное место) и традиционно лечится методом “не делайте так”…

  • http://getopts.blogspot.com redbaron

    Неужели даже с domready будет мелькание? понимаю что при onload будет, не ready то уже сработает, когда страница только появляется.

  • admin

    @redbaron
    Думаю это зависит от размера и содержания страницы. Ведь содержимое страницы все таки не всё сразу появляется, а по мере загрузки, даже если учитывать что изображения будут загружаться после события domready.

  • http://www.infotext.ru/ Контент Иваныч

    нечего не получается, все время прерывается операция.

  • http://www.yakako.ru/ lewile

    У меня тоже ничего не получается!Уже все перепробовал!

  • http://webstroy.ru igor

    да :) пришел к этому сам неделю назад, первый сайт где я задумался об аксесибилити. только у меня у потом где document.body.className = ’script’. мне кажется это наиболее гибким. ну и стили все в и никакого мелькания :)

JSToolbox создан на основе WordPress