27

Javascript によって制御される目に見えない div を持つ XHTML の厳格なページがあります。div は、スクリプトとマウスオーバー イベントによって透明で表示されるように設定され、ホバー時に div が不透明になります。

JavaScript を使用せずにブラウザー (または noscript を使用する firefox) を使用している場合、div は単に非表示のままです。これの問題は、コンテンツにアクセスできないようにしたくないということです。また、div を表示したままにしたくないので、スクリプトを使用して透明にします。これは、div がドキュメントの下部にあり、ページが読み込まれるたびにちらつきが目立つためです。

noscript タグを使用して、Javascript の贅沢を持たない人々のためにのみ読み込まれる追加のスタイル シートを埋め込もうとしましたが、これは XHTML の厳密な検証に失敗します。XHTML が有効な noscript ブロック内に追加のスタイル情報を含める方法は他にありますか?

エド:

簡単なテスト ケースでは、次の検証エラーが発生します。ドキュメント タイプでは要素「スタイル」が許可されていません。 これは、noscript 要素内に style 要素を持つ空の XHTML Strict ドキュメントです。ノスクリプトは体の中にあります。

4

7 に答える 7

76

頭の中の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>
于 2009-08-26T02:23:15.727 に答える
16

検証の問題を解決するには:noscriptはbody要素でstyleのみ許可され、でのみ許可されますhead。したがって、前者の中で後者を使用することはできません。

一般的な問題:div要素をデフォルトで表示し、CSS + JavaScript で非表示にする必要があります。これが「プログレッシブ エンハンスメント」モデルです。「ちらつきのためにこれをやりたくない」と言っていることに気づきましたが、何が原因なのか正確にはわかりません.修正できる可能性があるので、質問として投稿する必要があります.

于 2008-10-20T15:53:11.800 に答える
12

私の答えについてのメモ

2008年にさかのぼることに気付いた後、この投稿を書きました

私は同様の問題を抱えていたので、現在の回答で回答を続けることを考えました。

私の実際の答え

ボビー・ジャックが言ったように、styleタグは本文では許可されていません。私自身、あなた（ジョシュア）とまったく同じことをしました。しかし、ジャックの「プログレッシブエンハンスメント」により、抽象的ではない解決策がなくなりましたが、このスレッドで答えが見つからないという解決策に気付きました。

それはすべて、スタイリング構造に依存します。

私の提案はmodernizr、head の最初の部分のようなものを明白に使用し、Paul Irish の HTML5Boilerplate の推奨事項を使用することです。

簡単に言えば

  1. HTMLタグには次のclass属性がありますno-js
  2. head タグには、最初の modernizr javascript が最初に含まれています。
  3. CSS には要素 ( .hide-me) がdisplay: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

2. head タグには、最初の modernizr javascript が最初に含まれています。

Modernizrhtmlの実行により、サポートされている属性が構築されます。

これに似たものを構築します：

<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 Chromemodernizrのテストによるものであることに注意してください。

1 つ目はjs、Modernizr が実行されなかった場合 (javascript が実行されなかった場合)、no-jsそこにとどまることです。

3. CSS には要素 ( .hide-me) がdisplay:none適切な場所にある

...あなたは残りを知っています:)

于 2011-11-21T05:02:23.567 に答える
11

scriptでブロックを使用して、次の要素headを追加します。styledocument.write

<head>
...
 <script type="text/javascript">
 //<![CDATA[
  document.write('<style type="text/css">.noscript{display:none}</style>');
 //]]>
 </script>
...
</head>
于 2008-12-03T16:59:54.283 に答える
0

XHTML を使用する場合の秘訣は、2 つの CSS ファイルを使用することです。1 つのグローバルなものと 1 つの js-one が、JavaScript 対応ブラウザー用にグローバルなものを微調整します。

スタイル.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 有効性のヒント。CodingForums によるcreateElementNSのヒント。

于 2012-11-19T19:41:19.967 に答える
0

どのような検証エラーが発生しますか? <noscript>XHTML で許可する必要がありますが、ブロック レベルであるため<p>、<span>、 などではないことを確認してください

于 2008-10-20T11:59:38.387 に答える