web-dev-qa-db-ja.com

<script>タグを表示する必要があるのはなぜですか？

display:blockとしてスタイル設定されたscript要素が表示されます。なぜそれが可能であり、それが望まれる実際のユースケースがありますか？

td > * {
  display: block;
}
<table>
  <tr>
    <td>
      <script type="text/javascript">
        var test = 1;
      </script>von 1
    </td>
  </tr>
</table>
htmlcssscript-tag
141
wutzebaer

HTML5仕様 スタイルシートの定義 ユーザーエージェント（ブラウザーなど）が使用することが期待されています。 セクション10.3.1 「非表示要素」のスタイルをリストします。

@namespace url(http://www.w3.org/1999/xhtml);

[hidden], area, base, basefont, datalist, head, link,
meta, noembed, noframes, param, rp, script, source, style, template, track, title {
  display: none;
}

embed[hidden] { display: inline; height: 0; width: 0; }

ご覧のとおり、display: none;をscriptに適用します。

これは、ユーザーと非表示のscript要素との間の唯一の「障壁」です。それは完全に問題なく、作成者スタイルシート内（およびもちろんユーザースタイルシート内）のユーザーエージェントスタイルシート。

なぜ誰かがそれを使いたいのでしょうか？ユースケースの1つは、 </>などの文字をエスケープすることなくコンテンツを表示する です。これは、古いxmp要素と同様です。 script要素は、スクリプトだけでなく、 データブロックにも （つまり、MIMEタイプを持つもの）に使用できます。

103
unor

なぜ<script>タグが表示されますか？

これらは他のHTML要素と同様であり、CSSがそれらに適用されないようにするために、HTML仕様に特別なケースルール（複雑さを追加する）を記述する理由がないためです。

どの要素にもスタイルを設定できます。例：

head { display: block; }
title { display: block; }
meta { display: block; }
meta[charset]:after { display: block; content: attr(charset); }
meta[content]:after { display: block; content: attr(content); }

必要なユースケースはありますか？

確かに一般的なルールはありませんが、一般的なルールはeverythingあなたがcanを適用する場合に意味をなさないように設計されています。それらは一般的なケース向けに設計されています。

71
Quentin

別の（一般的ではない）ユースケース：

私は時々<script>スタイルガイドの簡単なHTMLコード例のタグ。そうすれば、HTMLタグや特殊文字をエスケープする必要がなくなります。また、テキストエディタータグのオートコンプリートと構文の強調表示は引き続き機能します。しかし、ブラウザーに構文の強調表示を追加する簡単な方法はありません。

script[type="text/example"] {
    background-color: #33373c;
    border: 1px solid #ccc;
    color: #aed9ef;
    display: block;
    font-family: monospace;
    overflow: auto;
    padding: 2px 10px 16px;
    white-space: pre-wrap;
    Word-break: break-all;
    Word-wrap: break-Word;
}
<p>Here comes a code example:</p>
<script type="text/example">
  <div class="cool-component">
     Some code example
  </div>
</script>
36
jfrej

可能なユースケース：デバッグ目的。

たとえば、ドキュメントレベルでクラスを適用できます。 <body class="debugscript">、次にCSSを使用します。

body.debugscript script {
    display: block;
    background: #fcc;
    border: 1px solid red;
    padding: 2px;
}
body.debugscript script:before {
    content: 'Script:';
    display: block;
    font-weight: bold;
}
body.debugscript script[src]:before {
    content: 'Script: ' attr(src);
}
14
Niet the Dark Absol

スクリプトタグは、display:none;を使用してデフォルトで非表示になっています。 Unor1 基礎となる言語仕様について説明します。ただし、それらはまだDOMの一部であり、それに応じてスタイル設定できます。

とはいえ、スクリプトタグが何をしているのかを正確に覚えておくことが重要です。以前は型と言語を伴っていましたが、それはもはや必要ありません。 JavaScriptがそこにあると想定されており、その結果、ブラウザーはこれらのタグからスクリプトが検出（ロード）されると、スクリプトを解釈して実行します。

スクリプトが実行されると、タグのコンテンツはページ上のテキスト（多くの場合非表示）のみです。このテキストは表示できますが、単にテキストであるため、削除することもできます。

ページの一番下の</html>タグを閉じる直前に、これらのタグとテキストを簡単に削除でき、ページに変更はありません。

例えば：

(function(){
    var scripts = document.querySelectorAll("script");
    for(var i = 0; i < scripts.length; i++){
        scripts[i].parentNode.removeChild(scripts[i]);
    }
})()

ページの状態はすでに変更されており、現在のグローバル実行コンテキストに反映されているため、これにより機能が削除されることはありません。たとえば、ページにjQueryなどのライブラリが読み込まれている場合、タグを削除しても、jQueryはページのランタイム環境に既に追加されているため、jQueryが公開されなくなるわけではありません。基本的には、DOM検査ツールにスクリプト要素を表示させないだけですが、一度実行されたスクリプト要素は実際にはテキストのみであることを強調しています。

1. unor、2016年7月7日、wutzebaer、「タグを表示するタイミングとその理由」7月1日10:53、 https://stackoverflow.com/a/38147398/1026459 =

1
Travis J