css - tag - 用noscript嵌入額外的樣式




noscript用法 (5)

你得到什麼驗證錯誤? 應該在XHTML中允許<noscript> ,但它是塊級別的,所以確保它不在<p><span>等中

https://code.i-harness.com

我有一個XHTML嚴格頁面,有一個由Javascript控制的不可見div。 該div被設置為透明,並通過腳本和一個mouseover事件可見,以使懸停的div不透明。

當有人使用瀏覽器(或無腳本的Firefox)沒有JavaScript的div只是保持隱身。 這個問題是我不希望內容無法訪問。 我也不想讓div可見,然後使用腳本使其透明,因為div位於文檔的底部,並且每當頁面加載時它都會引起明顯的閃爍。

我已經嘗試使用noscript標籤來嵌入一個額外的樣式表,只為沒有Javascript豪華的人加載,但是這不符合XHTML嚴格的驗證。 有沒有其他方法可以在XHTML有效的無腳本塊中包含額外的樣式信息?

艾德:

用一個簡單的測試用例,我得到一個驗證錯誤: 文檔類型不允許元素“風格”在這裡。 這是一個空的XHTML Strict文檔,在noscript元素中有一個樣式元素。 無腳本在身體內部。


要清除驗證問題: noscript只能在body元素中使用, style只允許在head 。 所以後者在前者是不允許的。

在一般問題上:你會想讓默認的div元素可見,然後通過CSS + javascript隱藏它。 這是“漸進式增強”模式。 我注意到你說你“不想做這個,因為閃爍”,但我不確定究竟是什麼原因造成的 - 你有可能修復它,所以也許你應該把作為一個問題。


請注意我的答案

我意識到這是從2008年開始寫這篇文章

由於我有類似的問題,我想繼續回答當前的答案。

我的實際答案

就像Boby Jack所說, style標籤在身體上是不允許的。 就像你(約書亞)那樣,我自己做了一件確切的事情。 但傑克的“漸進增強”使我沒有非抽象的解決方案,但後來我意識到一個解決方案,我沒有在這個線程上找到答案。

這一切都取決於你的造型結構。

我的建議是在開頭部分簡單地使用像modernizr這樣的東西,並使用Paul Irish的HTML5加厚板建議。

長話短說

  1. Html標籤具有no-jsclass屬性
  2. 頭標記包括第一個現代化的JavaScript作為第一個
  3. CSS的元素( .hide-medisplay:none在適當的位置
  4. 然後.no-js .hide-me { display:block }

詳細

請參閱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引用

頭標記包括第一個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-medisplay:none在適當的位置

...你知道其他:)


在頭部的腳本是有效的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>

如果使用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的博客 。 通過編碼論壇 createElementNS提示。







xhtml