Подтвердить что ты не робот

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

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

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

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

Ed:

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

noscript в заголовке допустим 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>

Ответ 3

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

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

Ответ 4

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

Я написал это сообщение после того, как понял, что он был с 2008 года.

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

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

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

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

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

Короче говоря

  • В теге Html есть атрибуты class с no-js
  • Главный тег включает первый javascript modernizr в качестве первого
  • CSS имеет элемент (.hide-me) с display:none на своем собственном месте
  • Затем .no-js .hide-me { display:block }

Подробнее

См. Paul Irish 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. Главный тег включает первый javascript modernizr в качестве первого

Выполнение 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 в нужном месте

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

Ответ 5

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

Ответ 6

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

style.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 tip CodingForums.

Ответ 7

UPDATE для 2016:

Из w3school:

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

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

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

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

В XHTML тег <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 отключен или не существует.