发表新帖
发表新帖

Embedding extra styles with noscript

前端 未结
关注
7 1716
盖世英雄少女心
盖世英雄少女心 2020-12-08 05:18

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

相关标签:
7条回答
  • 你的背包
    2020-12-08 05:27

    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.

    0 讨论(0)
  • 没有蜡笔的小新
    2020-12-08 05:28

    To clear up the validation issue: noscript is only allowed in the body element, style only allowed in the head. Therefore, the latter is not allowed within the former.

    On the general issue: you'll want to make the div element 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 that as a question.

    0 讨论(0)
  • 不要未来只要你来
    2020-12-08 05:29

    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.

    0 讨论(0)
  • 我寻月下人不归
    2020-12-08 05:30

    Use a script block in the head to add a style element with document.write:

    <head>
...
 <script type="text/javascript">
 //<![CDATA[
  document.write('<style type="text/css">.noscript{display:none}</style>');
 //]]>
 </script>
...
</head>
    0 讨论(0)
  • 终归单人心
    2020-12-08 05:31

    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.

    <!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>
    0 讨论(0)
  • 慢半拍i
    2020-12-08 05:39

    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

    0 讨论(0)
 看不清?
提交回复
热议问题