27

我有一个 XHTML 严格页面，它有一个由 Javascript 控制的不可见 div。div 被脚本和 mouseover 事件设置为透明和可见，以使 div 在悬停时不透明。

当有人在没有 javascript 的情况下使用浏览器（或带有 noscript 的 firefox）时，div 将保持不可见。这样做的问题是我不希望内容无法访问。我也不想让 div 可见，然后使用脚本使其透明，因为 div 位于文档的底部，并且每当页面加载时都会导致明显的闪烁。

我曾尝试使用 noscript 标签嵌入一个额外的样式表，该样式表只为没有 Javascript 的奢侈的人加载，但这未通过 XHTML 严格验证。有没有其他方法可以在 XHTML 有效的 noscript 块中包含额外的样式信息？

编辑：

通过一个简单的测试用例，我得到一个验证错误：文档类型不允许元素“样式”在这里。 这是一个空的 XHTML Strict 文档，在 noscript 元素内有一个 style 元素。noscript 在体内。

4

7 回答 7

76

头中的 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>
于 2009-08-26T02:23:15.727 回答
16

清除验证问题：noscript只允许在body元素中，style只允许在head. 因此，后者不允许在前者之内。

在一般问题上：您希望div默认情况下使元素可见，然后通过 CSS + javascript 将其隐藏。这是“渐进增强”模型。我注意到您说您“因为闪烁而不想这样做”，但我不确定是什么原因造成的 - 您可能可以修复它，所以也许您应该将其作为问题发布。

于 2008-10-20T15:53:11.800 回答
12

Note about my answer

I wrote this post after realizing it was dating from 2008

Since I had a similar problem, I thought continuing answering with a current answer.

My actual answer

Like Boby Jack said, style tag is not allowed in body. I myself did the exact thing as you (Joshua) about it. But Jack's "progressive enhancement" made me without non-abstract solution but then I realized a solution that I did not find answers on this thread.

It all depends of your styling structure.

My suggestion is to plainly use something like modernizr in the very begining of the head and use Paul Irish's HTML5Boilerplate recommendations.

Long story short

  1. Html tag has a class attributes with no-js
  2. Head tag includes a first modernizr javascript as the first
  3. CSS has the element (.hide-me) with display:none on its proper place
  4. Then .no-js .hide-me { display:block }

In detail

See Paul Irish's HTML5boilerplate, and adapt it to XHTML if you want :)

1. Html has a class attributes with .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]-->

quoting from html5boilerplate.com

2. Head tag includes a first modernizr javascript as the first

Modernizr execution will build html attributes with what's supported.

Will build something similar to this:

<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">

Note this is from Google Chrome modernizr tests.

The first is js but if Modernizr did not run (no javascript) the no-js would stay there.

3. CSS has the element (.hide-me) with display:none on its proper place

... you know the rest :)

于 2011-11-21T05:02:23.567 回答
11

在 中使用script块head添加style元素document.write：

<head>
...
 <script type="text/javascript">
 //<![CDATA[
  document.write('<style type="text/css">.noscript{display:none}</style>');
 //]]>
 </script>
...
</head>
于 2008-12-03T16:59:54.283 回答
2

UPDATE for 2016:

From w3school:

Differences Between HTML 4.01 and HTML5

In HTML 4.01, <noscript> tag can only be used inside the <body> element.

In HTML5, the <noscript> tag can be used both inside <head> and <body>.

Differences Between HTML and XHTML

In XHTML, the <noscript> tag is not supported.

My solution for having expanded menus (lists, etc..)

I've put in the header like this

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

In the x_no_script.css I set the selectors that I wanted to

max-height: 9999px;
overflow: visible;

In this way, I have expanded menus when JavaScript is disabled or not exists.

于 2016-07-15T12:04:34.753 回答
0

你得到什么验证错误？ <noscript>在 XHTML 中应该允许，但它是块级的，所以请确保它不在 a <p>,<span>等中

于 2008-10-20T11:59:38.387 回答
0

In case XHTML is used, the trick is to use two CSS files. One global one and one js-one tweaking the global one for JavaScript-enabled browsers.

style.css:

.hidden {
  visibility:hidden;
}

style-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>

Main idea by tutorials.de. XHTML validity tip by Estelle Weyl's Blog. createElementNS tip by CodingForums.

于 2012-11-19T19:41:19.967 回答