使用noscript嵌入额外的样式

时间：2008-10-20 11:55:06

标签： css xhtml

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

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

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

版：

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

7 个答案:

答案 0 :(得分：61)

头部的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>

答案 1 :(得分：12)

要清除验证问题：noscript仅允许body元素，style仅允许head。因此，前者不允许使用后者。

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

答案 2 :(得分：11)

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

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

答案 3 :(得分：10)

注意我的回答

我在意识到它可以追溯到2008年之后写了这篇文章

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

我的实际答案

就像Boby Jack所说的那样，身体中不允许使用style标签。我自己就像你（约书亚）那样对待它。但杰克的“渐进式增强”让我没有非抽象的解决方案，但后来我意识到了一个解决方案，我没有在这个帖子上找到答案。

这完全取决于你的造型结构。

我的建议是在头脑开始时使用类似modernizr的内容，并使用Paul Irish的HTML5Boilerplate建议。

长话短说

  1. Html标记的class属性为no-js
  2. 头标记包含第一个modernizr javascript作为第一个
  3. CSS在其适当位置具有.hide-me元素（display:none）
  4. 然后.no-js .hide-me { display:block }

    5. 详细

    请参阅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。头标记包括第一个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）

    ......你知道其余的事情：）

答案 4 :(得分：0)

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

答案 5 :(得分：0)

如果使用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有效性提示Estelle Weyl's Blog。 create CodingForums提示创建元素。

答案 6 :(得分：0)

2016 的

更新：

来自w3school：

  

HTML 4.01和HTML5之间的差异

     

在HTML 4.01中，foldr (-) 0 . ( map (uncurry (*)) (coords 5 7) ) 标记只能在<noscript>内使用   元件。

     

在HTML5中，<body>标记可以在<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 禁用或不存在时，我扩展了菜单。

相关问题
最新问题