Встраивание дополнительных стилей с помощью noscript

StackOverflow https://stackoverflow.com/questions/218162

  •  03-07-2019
  •  | 
  •  

Вопрос

У меня есть строгая страница XHTML, на которой есть невидимый div, управляемый Javascript.Div устанавливается прозрачным и видимым с помощью скрипта и события наведения курсора мыши, чтобы сделать div непрозрачным при наведении курсора мыши.

Когда кто-то использует браузер (или Firefox с noscript) без javascript, div просто остается невидимым.Проблема с этим заключается в том, что я не хочу, чтобы контент был недоступен.Я также не хочу оставлять div видимым, тогда используйте скрипт, чтобы сделать его прозрачным, поскольку div расположен в нижней части документа и вызывает заметное мерцание при загрузке страницы.

Я пытался использовать теги noscript для встраивания дополнительной таблицы стилей, которая загружается только для людей, не обладающих роскошью Javascript, но это приводит к сбою строгой проверки XHTML.Есть ли какой-либо другой способ включить дополнительную информацию о стиле внутри блока noscript, который является допустимым для XHTML?

Эд:

С помощью простого тестового примера я получаю ошибку проверки: тип документа здесь не допускает элемента "стиль". Это касается пустого документа XHTML Strict с элементом style внутри элемента noscript.noscript находится внутри тела.

Это было полезно?

Решение

Чтобы устранить проблему с проверкой: noscript допускается только в body элемент, style разрешено только в head.Следовательно, последнее не допускается в рамках первого.

По общему вопросу:вы захотите сделать div элемент виден по умолчанию, затем скройте его с помощью CSS + javascript.Это модель "прогрессивного улучшения".Я заметил, что вы говорите, что "не хотите этого делать из-за мерцания", но я не уверен точно, что является причиной этого - скорее всего, вы можете это исправить, поэтому, возможно, вам следует опубликовать это как вопрос.

Другие советы

noscript в head является допустимым HTML5.Раньше это было недействительно.Я только что протестировал его, он работает в текущих версиях Firefox, Safari, Chrome, Opera и IE.

<!doctype html>
<html>
    <head>
        <noscript>
            <style>body{background:red}</style>
        </noscript>
    </head>
    <body>
        <p>is this red? it should <script>document.writeln("not");</script> be. <noscript>indeed.</noscript></p>
    </body>
</html>

Используйте script блок в head чтобы добавить style элемент с document.write:

<head>
...
 <script type="text/javascript">
 //<![CDATA[
  document.write('<style type="text/css">.noscript{display:none}</style>');
 //]]>
 </script>
...
</head>

Обратите внимание на мой ответ

Я написал этот пост после того, как понял, что он датирован 2008 годом

Поскольку у меня была похожая проблема, я подумал продолжить отвечать текущим ответом.

Мой фактический ответ

Как сказал Боби Джек, style тег не разрешен в теле.Я сам поступил точно так же, как ты (Джошуа) по этому поводу.Но "прогрессивное улучшение" Джека лишило меня неабстрактного решения, но затем я понял решение, на которое я не нашел ответов в этой теме.

Все зависит от вашей структуры укладки.

Мое предложение состоит в том, чтобы просто использовать что-то вроде modernizr в самом начале главы и используйте рекомендации Пола Айриша по HTML5Boilerplate.

Короче говоря, длинная история

  1. Html-тег содержит class атрибуты с no-js
  2. Тег Head включает в себя первый modernizr javascript в качестве первого
  3. CSS содержит элемент (.hide-me) с display:none на своем надлежащем месте
  4. Тогда .no-js .hide-me { display:block }

В деталях

Посмотрите HTML5Boilerplate Пола Айриша и адаптируйте его к XHTML, если хотите :)

1.Html имеет атрибуты класса с .no-js

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

цитирую из html5boilerplate.com

2.Тег Head включает в себя первый modernizr javascript в качестве первого

Выполнение Modernizr приведет к html атрибуты с тем, что поддерживается.

Построит что-то похожее на это:

<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" lang="en">

Примечание это из Google Chrome modernizr тесты.

Первый - это js но если Modernizr не был запущен (нет javascript), то no-js остался бы там.

3.CSS содержит элемент (.hide-me) с display:none на своем надлежащем месте

...остальное вы знаете :)

Какую ошибку проверки вы получаете? <noscript> должно быть разрешено в XHTML, но это уровень блока, поэтому убедитесь, что это не в <p>, <span>, и т. д

Обновить для 2016:

От школа w3school:

Различия между HTML 4.01 и HTML5

В HTML 4.01, <noscript> тег может быть использован только внутри <body> элемент.

В HTML5 <noscript> тег может быть использован как внутри <head> и <body>.

Различия между HTML и XHTML

В XHTML, the <noscript> тег не поддерживается.

Мое решение для расширения меню (списков и т.д.)

Я поместил заголовок следующим образом

<header>
    <noscript>
        <link rel="stylesheet" href="assets/css/x_no_script.css">
    </noscript>
</header>

В x_no_script.css Я установил селекторы, которые я хотел 

max-height: 9999px;
overflow: visible;

Таким образом, я расширил меню, когда JavaScript является отключенный или не существует.

В случае использования XHTML хитрость заключается в использовании двух CSS-файлов.Один глобальный и один js-один, изменяющий глобальный для браузеров с поддержкой JavaScript.

стиль.css:

.hidden {
  visibility:hidden;
}

стиль-js.css:

.hidden {
  visibility:visible;
}

test.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
  <title>Test page</title>
  <link href='css/style.css' rel='stylesheet' type='text/css' />
  <script type="text/javascript">
  //<![CDATA[
    //document.write("<link href='css/style-js.css' rel='styleSheet' type='text/css' />"); 
    //is not legal in XHTML, we do the long way:
    var l=document.createElementNS("http://www.w3.org/1999/xhtml","link");
    l.setAttribute("rel", "stylesheet");
    l.setAttribute("type", "text/css");
    l.setAttribute("href", "/css/style-js.css");
    document.getElementsByTagName("head")[0].appendChild(l);
  //]]>
  </script>
</head>
<body>
  <div class="hidden">
    <p>Only displayed at JavaScript enabled browsers</p>
  </div>
</body>
</html>

Основная идея по tutorials.de.Совет по валидности XHTML от Блог Эстель Вейл.Подсказка createElementNS с помощью Форумы кодирования.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top