noscript を使用した追加のスタイルの埋め込み

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

  •  03-07-2019
  •  | 
  •  

質問

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

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

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

エド:

単純なテストケースでは、次の検証エラーが発生します。 ここでは、ドキュメント タイプでは要素「style」を使用できません。これは、noscript 要素内に style 要素を持つ空の XHTML Strict ドキュメントを使用しています。noscript はボディ内にあります。

役に立ちましたか？

解決

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

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

他のヒント

頭の

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 年のものであることに気づいてこの記事を書きました

私も同様の問題を抱えていたので、現在の回答で回答を続けようと思いました。

私の実際の答え

ボビー・ジャックが言ったように、 style 本文内にタグを含めることはできません。私自身、それに関してあなた（ジョシュア）と全く同じことをしました。しかし、ジャックの「漸進的強化」により、私は非抽象的な解決策を得ることができませんでしたが、その後、このスレッドで答えが見つからない解決策に気づきました。

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

私の提案は、次のようなものを単純に使用することです modernizr を頭の最初に追加し、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 の HTML5 ボイラープレートを参照し、必要に応じて 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 が最初に含まれています

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 テスト。

1つ目は js ただし、Modernizr が実行されなかった場合 (JavaScript がない場合)、 no-js そこに留まるだろう。

3.CSS には要素 (.hide-me） と display:none 適切な場所に

...残りはご存知でしょう:)

どのような検証エラーが発生しますか？ <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を使用する場合、2つのCSSファイルを使用するのがコツです。 1つのグローバルなものと1つのjs-oneは、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妥当性のヒント。 CodingForums によるcreateElementNSのヒント。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top