web-dev-qa-db-ja.com

noscriptで余分なスタイルを埋め込む

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

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

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

Ed：

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

cssxhtml
23
Joshua

検証の問題を解決するには：noscriptはbody要素でのみ許可され、styleはheadでのみ許可されます。したがって、後者は前者内では許可されていません。

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

13
Bobby Jack

頭の中の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>
67
bup

scriptのheadブロックを使用して、style要素をdocument.write：

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

私の答えについてのメモ

私はそれが2008年からのものであることに気づいた後にこの投稿を書きました

同様の問題があったので、現在の回答で回答を続けることを考えました。

私の実際の答え

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

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

私の提案は、頭の最初にmodernizrのようなものをわかりやすく使用し、PaulIrishのHTML5Boilerplateの推奨事項を使用することです。

短編小説

  1. Htmlタグには、no-jsを持つclass属性があります
  2. ヘッドタグには、最初のモダニズ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.ヘッドタグには、最初のモダニズ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）があります

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

10
renoirb

[〜＃〜] update [〜＃〜]for2016：

から w3school ：

HTML 4.01とHTML5の違い

HTML 4.01では、<noscript>タグは<body>要素内でのみ使用できます。

HTML5では、<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が無効であるかどうかにかかわらず、メニューを拡張しました存在します。

0
mtb

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

0
Greg

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

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>

tutorials.de による主なアイデア。 Estelle Weylのブログ によるXHTMLの有効性のヒント。 createElementNSのヒント CodingForums 。

0
koppor