Вместо тэга <noscript> стили .script и .noscript в CSS

    Иногда, крайне редко нужно скрыть, либо показать часть тегов в том случае если javascript включён, либо выключен.
    Конечно, есть <noscript> но он реализует только часть логики — он скрывает часть кода если javascript включён. Скрыть часть кода, если javascript выключен стандартной возможности нет.
    Точнее есть возможность добавить некий код при помощи скрипта, но не совсем то.

    Что можно сделать вместо этого?

    Добавить в заголовок код:
    <style type="text/css">.script{display:none;}</style>
    <script type="text/javascript" language="JavaScript">
    document.write('<style type="text/css">.noscript{display:none;} .script{display:inherit;} </style>');
    </script>



    В случае если javascript выключен, будет активен стиль
    .script{display:none;}


    Им можно пометить кнопочки, выполняющие ajax-овые действия и т.п.
    например кнопочку «Обновить комментарии»


    В случае если javascript включён, этот стиль будет перекрыт другим
    .noscript{display:none;}
    .script{display:inherit;}


    стилем noscript можно пометить альтернативные элементы управления.

    Конечно, без всего этого можно легко и обойтись. :)
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 34

    • НЛО прилетело и опубликовало эту надпись здесь
        0
        Я этот подход использую для разделов сайта, на которых обязательна поддержка JavaScript.
        Если javascript выключен — пользователь видит страницу, на которой отражено требование включить javascript а так же рекомендации как это сделать в браузере.
          +1
          Нифига подобного: пользователь видит всё ибо во многих браузерах, не поддерживающих JavaScript, нет и поддержки CSS. Причём речь идёт не только о текстовых браузерах — скажем Netscape до 6й версии реализовывал CSS через JavaScript и если JavaScript был отключён — CSS отключался тоже. Гораздо, гораздо чаще всречается не ситуация когда CSS есть, а JavaScript'а нет, а ситуация когда JavaScript вроде как есть, но, скажем так, специфический. Всякие PSP и Wii, например. Этот подход в такой ситуации помогает мало.

          Я не очень представляю себе где бы этот подход можно было использовать практически…
            0
            На мобильных браузерах — там как раз ситуация {css:1,js:0} очень частая, потому как javascript отключать легко (опыт работы с nokia browser и opera mobile), а css отключить нельзя, да и обычно не сильно надо. Процент таких клиентов явно больше процента странных нестандартных браузеров. )

            Хотя это всё имхо, статистику не изучал.
        +1
        поправьте орфографию, везде слово «вкючён»
          +1
          спасибо
          +4
          Все хорошо, на зачем вы тегу <script> ставите устаревший атрибут «language»?
            0
            ну и document.write () не работает для xhtml
              +2
              Чтобы обойтись без document.write можно просто назначить с помощью javascript класс (например, .with-js) на элемент html и в дальнейшем уже писать стили с селекторами, опирающиеся на него (например, .with-js .script или .with-js .noscript)
                0
                В смысле не работает? Можно по-подробнее?
              0
              например кнопочку «Обновить комментарии»
              В данном случае, ИМХО, корректнее сделать graceful degradation и повесить на эту кнопку простую ссылку.

              Хотя… Тут, возможно, дело вкуса.
                +2
                Конечно, есть <noscript> но он реализует только часть логики — он скрывает часть кода если javascript включён.

                <noscript> «реализует» 100% логики. Нужно начать, просто, с того, что он ничего не призван скрывать. Он наоборот отображает элементы при отключенном JavaScript. Поэтому мне кажется абсолютно нецелесообразной вся эта свистопляска с добавлением классов отображающих или скрывающих элементы.

                  0
                  К этому можно добавить _возможные_ проблемы с поисковыми машинами из-за скрытого текста.
                  то что в noscript поисковые роботы игнорируют, а вот то что в скрытых областях — индексируют. При работе в seo-конкурентных областях такие теги могут стать причиной жалоб модераторам Яндекса.
                    +1
                    а чем плох в таком случаи
                    <noscript>
                    <style type="text/css">.script{display:none;}</style>
                    </noscript>?
                      0
                      название статьи — " ВMЕСТО тэга <noscript>..."
                      ваш случай под такое название не совсем подходит ;-)
                        0
                        «Конечно, есть <noscript> но он реализует только часть логики — он скрывает часть кода если javascript включён. Скрыть часть кода, если javascript выключен стандартной возможности нет.»
                        я предложил пример, где эта часть логики реализовывается :)
                          0
                          Все таки, лично для меня, логику логичнее не скрывать, а открывать (сорри за каламбур), о чем и написал SelenIT немного ниже.
                            0
                            а кто спорит то?, SelenIT совершенно прав, но сейчас ведь мы обсуждаем как скрыть ненужное, а не как показывать нужное :)

                            так вот, мне лично не нравится в подходе автора использование javascript + document.write
                            в результате чего я предложил альтернативный вариант, который реализует ту же логику и ту же схему, только другим путем
                        +3
                        Не валиден :)
                          0
                          аргумент :)
                          0
                          так не пройдёт валидацию. тк в head нельзя использовать noscript.
                          а в остальном то же самое.
                          я так и делал раньше.
                    • НЛО прилетело и опубликовало эту надпись здесь
                        +1
                        Интересная задумка, тока насчет применения не уверен, хотя автор думаю, как раз сталкивался с ситуацией, когда это дейтсвительно нужно.
                          0
                          согласен. Зачем это не понятно, но вот выглядит красиво.
                          +1
                          Разве нужно что-то еще, когда уже все придумано и отлично работает?
                            0
                            Кратко

                            <html id=«nojs»>

                            #nojs .b-blah {
                            display: none;
                            }

                            document.documentElement.id = «js»

                            #js .b-blah {
                            display: block;
                            }

                            company.yandex.ru/experience/css-framework/practice.html
                              0
                              Согласен с вами, так элегантнее.
                            • НЛО прилетело и опубликовало эту надпись здесь
                                0
                                об этом написано в тексте :)
                                «есть возможность добавить некий код при помощи скрипта»
                                0
                                На сколько мне помнится, «inherit» поддерживается не всеми браузерами.
                                  0
                                  Да, вот: reference.sitepoint.com/css/display#compatibilitysection
                                  Осел, как всегда =)
                                  0
                                  Вот правильный, в вашем случае, код:

                                  <style type="text/css">.script{display:none;}</style>
                                  <script type="text/html">
                                   <style type="text/css">.script{display:block;}</style>
                                  </script>
                                  


                                  (Валидно и кроссбраузерно, если что)

                                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                  Самое читаемое