CSS 使用 noscript 嵌入额外的样式

Question

提问by Joshua

I have an XHTML strict page that has an invisible div that is controlled by Javascript. The div is set to transparent and visible by the script and a mouseover event to make the div opaque on hover.

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

When someone using a browser (or firefox with noscript) without javascript the div simply remains invisible. The problem with this is that I do not want the content to be inaccessible. I also do not want to leave the div visible then use the script to make it transparent as the div is located at the bottom of the document and it causes a noticeable flicker whenever a page loads.

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

I have tried using noscript tags to embed an additional style sheet that is only loaded for people without the luxury of Javascript but this fails the XHTML strict validation. Is there any other way to include extra styling information inside a noscript block that is XHTML valid?

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

Ed:

埃德：

With a simple test case I get a validation error of: document type does not allow element "style" here.This is with an empty XHTML Strict document with a style element inside a noscript element. The noscript is inside the body.

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

Answer 1

采纳答案by Bobby Hyman

To clear up the validation issue: noscriptis only allowed in the bodyelement, styleonly allowed in the head. Therefore, the latter is not allowed within the former.

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

On the general issue: you'll want to make the divelement visible by default, then hide it via CSS + javascript. This is the 'progressive enhancement' model. I notice you say you "don't want to do this because of the flicker", but I'm not sure exactly what's causing this - chances are you can fix it, so maybe you should post thatas a question.

关于一般问题：您希望div默认情况下使元素可见，然后通过 CSS + javascript 隐藏它。这就是“渐进增强”模型。我注意到你说你“因为闪烁而不想这样做”，但我不确定到底是什么导致了这个 - 你可能可以解决它，所以也许你应该把它作为一个问题发布。

Answer 2

回答by

noscript in head is valid HTML5. It wasn't valid before. I just tested it, it works in current Firefox, Safari, Chrome, Opera and IE.

head 中的 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>

Answer 3

回答by Andrew Duffy

Use a scriptblock in the headto add a styleelement with document.write:

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

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

Answer 4

回答by rentheitroadb

Note about my answer

注意我的回答

I wrote this post after realizing it was dating from 2008

我在意识到它是从 2008 年开始写这篇文章后写的

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

由于我有类似的问题，我想继续用当前的答案来回答。

My actual answer

我的实际回答

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

就像 Boby Hyman 所说的，style身体中不允许有标签。我自己做了和你（约书亚）完全一样的事情。但是Hyman的“渐进式增强”让我没有非抽象的解决方案，但后来我意识到一个解决方案，我没有在这个线程上找到答案。

It all depends of your styling structure.

这一切都取决于你的造型结构。

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

我的建议是直接使用类似modernizr开头的内容，并使用 Paul Irish 的 HTML5Boilerplate 建议。

Long story short

长话短说

Html tag has a classattributes with no-js
Head tag includes a first modernizr javascript as the first
CSS has the element (.hide-me) with display:noneon its proper place
Then .no-js .hide-me { display:block }

Html 标签有一个class属性no-js
Head 标签包含第一个 Modernizr javascript 作为第一个
CSS 元素 ( .hide-me)display:none位于其适当的位置
然后 .no-js .hide-me { display:block }

In detail

详细

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

请参阅 Paul Irish 的 HTML5boilerplate，并根据需要将其调整为 XHTML :)

1. Html has a class attributes with `.no-js`

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

quoting from html5boilerplate.com

引用自 html5boilerplate.com

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

2. Head标签包含第一个modernizr javascript作为第一个

Modernizr execution will build htmlattributes with what's supported.

Modernizr 执行将html使用支持的内容构建属性。

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

Notethis is from Google Chrome modernizrtests.

请注意，这是来自 Google Chromemodernizr测试。

The first is jsbut if Modernizr did not run (no javascript) the no-jswould stay there.

第一个是js但如果 Modernizr 没有运行（没有 javascript），no-js它将留在那里。

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

3. CSS 元素 ( `.hide-me`)`display:none`位于其适当的位置

... you know the rest :)

...你知道其余的:)

Answer 5

回答by koppor

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.

如果使用 XHTML，诀窍是使用两个 CSS 文件。一个全局一个，一个 js-一个为支持 JavaScript 的浏览器调整全局一个。

style.css:

样式.css：

.hidden {
  visibility:hidden;
}

style-js.css:

样式js.css：

.hidden {
  visibility:visible;
}

test.html:

测试.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.

tutorials.de 的主要思想。来自Estelle Weyl 的博客的XHTML 有效性提示。CodingForums 的createElementNS 技巧。

Answer 6

回答by mtb

UPDATEfor 2016:

更新为2016：

From w3school:

来自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.

HTML 4.01 和 HTML5 之间的差异
在 HTML 4.01 中，<noscript>标签只能在<body>元素内部使用。
在 HTML5 中，<noscript>标签可以在内部<head>和 <body>.
HTML 和 XHTML 之间的差异
在 XHTML 中，<noscript>不支持该标记。

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.cssI set the selectors that I wanted to

在x_no_script.css我设置我想要的选择器

max-height: 9999px;
overflow: visible;

In this way, I have expanded menus when JavaScriptis disabledor not exists.

通过这种方式，当JavaScript被禁用或不存在时，我扩展了菜单。

Answer 7

回答by Greg

What validation error do you get? <noscript>should be allowed in XHTML but it's block level, so make sure it's not in a <p>, <span>, etc

你得到什么验证错误？ <noscript>应在XHTML被允许，但它的块级，所以一定要确保它不是一个<p>，<span>等

CSS 使用 noscript 嵌入额外的样式

提问by Joshua

采纳答案by Bobby Hyman

回答by

回答by Andrew Duffy

回答by rentheitroadb

Note about my answer

注意我的回答

My actual answer

我的实际回答

Long story short

长话短说

In detail

详细

1. Html has a class attributes with `.no-js`

1. Html 有一个类属性 `.no-js`

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

2. Head标签包含第一个modernizr javascript作为第一个

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

3. CSS 元素 ( `.hide-me`)`display:none`位于其适当的位置

回答by koppor

回答by mtb

回答by Greg

相关推荐

最近更新

标签

CSS 使用 noscript 嵌入额外的样式

提问by Joshua

采纳答案by Bobby Hyman

回答by

回答by Andrew Duffy

回答by rentheitroadb

Note about my answer

注意我的回答

My actual answer

我的实际回答

Long story short

长话短说

In detail

详细

1. Html has a class attributes with .no-js

1. Html 有一个类属性 .no-js

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

2. Head标签包含第一个modernizr javascript作为第一个

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

3. CSS 元素 ( .hide-me)display:none位于其适当的位置

回答by koppor

回答by mtb

回答by Greg

相关推荐

CSS 表格列格式

CSS 选择器（id 包含部分文本）

为什么我不能在 Firebug 中保存 CSS 更改？

CSS 如何垂直居中对齐位置：相对元素？

相关推荐

最近更新

标签

1. Html has a class attributes with `.no-js`

1. Html 有一个类属性 `.no-js`

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

3. CSS 元素 ( `.hide-me`)`display:none`位于其适当的位置