Как использовать элемент <style>в теге <noscript>? - PullRequest
Новая
       54

Как использовать элемент <style>в теге <noscript>?

0 голосов
/ 27 февраля 2019

У меня есть сайт, где у меня есть тег <noscript> ниже моего тега <script> на случай, если JavaScript не загружается.По сути, некоторые значения CSS отключаются для выполнения некоторого JS-кода с плавной прокруткой и предварительного загрузчика.

Однако, когда я запускаю сайт через валидатор HTML w3c, он говорит:

Element style not allowed as child of element noscript in this context. (Suppressing further errors from this subtree.)

Код, который я использую: 

<noscript>
<style type="text/css" media="screen">#main-body {opacity: 1 !important; } .viewport {position: static; overflow: visible;} h1, h2, h3 {opacity: 1} .st-ca-title, .st-ca-sub, .st-co-title, .st-co-sub, .js-client-stagger, .btn, .btn a, .st-ho-title, .st-ho-sub, .st-ho-p {opacity: 1}
</style>
</noscript>

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

Я не могу поместить тег <noscript> в заголовок документа, потому что он должен идти после основного тега сценария js.

Любые предложения приветствуются.

Пол.

Ответы [ 2 ]

0 голосов
/ 27 февраля 2019

Я согласен с @jaasum, не смешивайте их таким образом

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

<!DOCTYPE html>
<html>
    <head>
        <style>
            .danger {
                color: green; font-weight: bold;
            }

            noscript .danger {
                color: red; font-weight: bold;
            }
        </style>

        <script>
            function myStuff() {
                let p = document.createElement('p');
                p.innerHTML = '<p>you seem to have <span class="danger">scripts enabled...</span></p>';
                document.body.appendChild( p);

            }

        </script>

    </head>

    <body onload="myStuff()">
        <noscript>
            <h1>Script</h1>

            <p>you need <span class="danger">scripts enabled</span></p>

        </noscript>

    </body>

</html>
0 голосов
/ 27 февраля 2019

Кажется, нет никаких причин, почему этот код будет считаться недействительным.Элемент <style> является допустимым дочерним элементом элемента <noscript>, и оба являются действительными дочерними элементами либо <head>, либо <body>.

Обычно, хотяВы хотите избежать смешивания разметки с вашими сценариями и стилями.Я бы рекомендовал иметь класс, который применяет ваши стили, а затем удалить этот класс с помощью JavaScript.Таким образом, вы можете хранить свои стили в одном месте, а затем включать логику для удаления этих стилей вместе со своим сценарием, избегая полностью вложенного подхода <noscript> и <style>. 

<!DOCTYPE html>
<html>
  <head>
    <style>
      .no-js {
        /* "no script" styles here */
      }
    </style>
  </head>
  <body class="no-js">
    <script>
      document.querySelector('body').classList.remove('no-js');
    </script>
  </body>
</html>
...