使用noscript嵌入额外的样式

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

  •  03-07-2019
  •  | 
  •  

题

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

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

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

<强>版：

对于一个简单的测试用例，我得到一个验证错误：文档类型不允许元素<！> quot; style <！> quot;这里。 这是一个空的XHTML Strict文档，在noscript元素中有一个样式元素。 noscript在体内。

有帮助吗？

解决方案

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

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

其他提示

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

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

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

注意我的回答

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

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

我的实际答案

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

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

我的建议是明确使用像modernizr这样的东西，并使用Paul Irish的HTML5Boilerplate建议。

长话短说

  1. Html标记具有class属性no-js
  2. 头标记包含第一个modernizr javascript作为第一个
  3. CSS在其正确的位置
    4. 具有元素（.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 js测试。

    第一个是<=>但如果Modernizr没有运行（没有javascript），那么<=>会留在那里。

    3。 CSS在其适当的位置

    具有元素（<=>）和<=>

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

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

2016 的

更新：

来自 w3school ：

  

HTML 4.01和HTML5之间的差异

     

在HTML 4.01中，<noscript>标记只能在<body>中使用   元件。

     

在HTML5中，<head>标签可以在x_no_script.css和内使用   <=>。

     

HTML和XHTML之间的差异

     

在XHTML中，不支持<=>标记。

我有扩展菜单（列表等等）的解决方案

我已经像这样放入了标题

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

在<=>我设置了我想要的选择器

max-height: 9999px;
overflow: visible;

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

如果使用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的主要想法。通过 Estelle Weyl的博客获得XHTML有效性提示。 createElementNS提示由

不隶属于 StackOverflow
scroll top