CSS が偽の要素でも機能するのはなぜですか?

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

  •  25-08-2022
  •  | 
  •  

質問

授業中に遊んでいて、CSS が作成された要素で機能することを知りました。

例：

imsocool {
    color:blue;
}
<imsocool>HELLO</imsocool>

私がこれを使用しているのを初めて見た教授は、構成要素が機能することに少し驚き、構成要素をすべて ID 付きの段落に変更するだけだと勧めました。

なぜ教授は私に創作要素を使用することを望まないのですか?それらは効果的に機能します。

また、作成された要素が存在し、CSS で動作することをなぜ彼は知らなかったのでしょう。それは珍しいことでしょうか？

役に立ちましたか？

解決

なぜCSSは偽の要素で動作するのですか？

（ほとんどの）ブラウザは、（ある程度）将来のHTMLへの追加と互換性があるように設計されています。認識されていない要素はDOMに解析されますが、それらに関連付けられたセマンティクスまたは専門的なデフォルトのレンダリングはありません。

新しい要素が仕様に追加されると、CSS、JavaScript、およびARIAを使用して古いブラウザで同じ機能を提供できる場合があります（そして、それらの言語を操作してその機能を追加できるようにするために、要素がDOMに表示されなければなりません。 ）。

（の仕様があります カスタム要素, 、しかし、それらには特定の命名要件があり、JavaScriptを使用して登録する必要があります。）

なぜ私の教授は私に作り上げられた要素を使ってほしくないのですか？

  • HTML仕様では許可されていません
  • 彼らは同じ名前の将来の標準要素と矛盾するかもしれません
  • おそらく、タスクにより適した既存のHTML要素があります

また;なぜ彼は、構成された要素が存在し、CSSと協力したことを知らなかったのです。彼らは珍しいですか？

はい。上記の問題があるため、人々はそれらを使用しません。

他のヒント

tl; dr

  • HTMLではカスタムタグが無効です。これは、レンダリングの問題につながる可能性があります。
  • コードはポータブルではないため、将来の開発をより困難にします。
  • 有効なHTMLは、SEO、スピード、プロフェッショナリズムなど、多くの利点を提供します。

長い答え

がある いくつかの議論 カスタムタグを使用したそのコードはより使いやすいです。

ただし、HTMLが無効になります。あなたのサイトには良くありません。

有効なCSS/HTML |のポイントスタックオーバーフロー

  • Googleはそれを好むので、SEOに適しています。
  • テストしていないブラウザでWebページが機能する可能性が高くなります。
  • それはあなたがよりプロフェッショナルに見えるようにします（少なくとも一部の開発者にとって）
  • 準拠したブラウザは[有効なHTMLを高速にする]レンダリングを行うことができます
  • それは、おそらく見逃したものの、おそらくあなたがページのコードページや言語セットなどをテストしていないことに影響を与える可能性のあるあいまいなバグの束を指摘しています。

検証する理由| W3C

  • デバッグツールとしての検証
  • 将来の耐性品質チェックとしての検証
  • 検証によりメンテナンスが容易になります
  • 検証は、良い実践を教えるのに役立ちます
  • 検証はプロフェッショナリズムの兆候です

ヤダ（さらに別の（異なる）答え）

編集：タイプvsタグ対要素に関する以下のBoltclockのコメントをご覧ください。私は通常、セマンティクスについて心配しませんが、彼のコメントは非常に適切で有益です。

すでにたくさんの良い返信がありますが、あなたはあなたが 教授 この質問を投稿するように促しました。 学校で. 。 CSSだけでなく、 力学 Webブラウザの。によると ウィキペディア, 、「CSSは、説明するために使用されるスタイルシート言語です...で書かれたドキュメント a （マークアップ言語。」（「A」に重点を置いた）htmlで書かれていない「htmlで書かれていない」と言わないHTMLの特定のバージョンではありません。CSSは、HTML、XHTML、XML、SGML、XAMLなどで使用できます。 。もちろん、あなたはそうするものが必要です 与える スタイリングも適用するこれらのドキュメントタイプのそれぞれ。定義上、CSSはそうではありません 知っている /理解 /気をつけます 特定のマークアップ言語タグ。したがって、HTMLに関する限り、タグは「無効」になる可能性がありますが、CSSには「有効な」タグ/要素/タイプの概念はありません。

モダン ビジュアルブラウザはモノリシックプログラムではありません。それらは、特定の仕事を持つさまざまな「エンジン」のアマルガムです。で 最低 3つのエンジン、レンダリングエンジン、CSSエンジン、JavaScriptエンジン/VMを考えることができます。パーサーがレンダリングエンジンの一部である（またはその逆）かどうか、またはそれが別のエンジンであるかどうかはわかりませんが、アイデアが得られます。

a ビジュアル ブラウザ（他の人はすでにその画面の事実に対処しています 読者 無効なタグを扱う他の課題があるかもしれません）フォーマットを適用すると、パーサーがドキュメントに「無効な」タグを残すかどうか、およびレンダリングエンジンがそのタグにスタイルを適用するかどうかによって異なります。開発/保守がより困難になるため、CSSエンジンはに書かれていません 理解する 「これはHTMLドキュメントであるため、有効なタグ /要素 /タイプのリストを以下に示します。」 CSSエンジンは単純に見つかります タグ /要素 /タイプ そして、レンダリングエンジンに「ここに適用すべきスタイルがあります」と伝えます。レンダリングエンジンが実際にスタイルを適用することを決定したかどうかは、それがアップされています。

これが簡単に考える方法です 基本 エンジンからエンジンへのフロー：パーサー - > css->レンダリング。現実には、それははるかに複雑ですが、これは手始めに十分です。

この答えはすでに長すぎるので、私はそこで終わります。

未知の要素はとして扱われます divs最新のブラウザによる。それが彼らが働く理由です。これは、新しい要素を追加できるモジュラー構造を導入する、近づいてくるHTML5標準の一部です。

古いブラウザ（IE7-）では、JavaScript-Trickを適用でき、その後も機能します。

がここにあります 関連する質問 例を探しているときに見つかりました。

がここにあります JavaScriptの修正に関する質問. 。これらの要素を箱から出してサポートしていないのは、実際にIE7であることがわかりました。

また;なぜ彼は、構成されたタグが存在し、CSSで働いたことを知らなかったのですか。彼らは珍しいですか？

はい、かなり。しかし、特に：彼らは追加の目的を果たしていません。そして、それらはHTML5にとって新しいものです。 HTMLの以前のバージョンでは、未知のタグが無効でした。

また、教師は時々、知識にギャップを持っているようです。これは、彼らが学生に特定の主題に関する基本を教える必要があるという事実に起因する可能性があり、すべての内外を知るために本当に報われず、本当に最新の状態であることはありません。先生がウイルスをプログラムしたと思ったので、私はかつて拘留されました。 play GWBasicのコマンド。 （実話、そしてはい、ずっと前）。しかし、理由が何であれ、私は偶然の要素を使用しないというアドバイスは健全なものだと思います。

実際、カスタム要素を使用できます。これがこの主題のW3C仕様です。

http://w3c.github.io/webcomponents/spec/custom/

そして、ここにそれらの使用方法を説明するチュートリアルがあります：

http://www.html5rocks.com/en/tutorials/webcomponents/customelements/

@Quentinが指摘したように、これは開発の初期のドラフト仕様であり、要素名が何であるかに制限を課すことです。

他の答えについては、フレーズが不十分であるか、おそらく少し間違っていることがいくつかあります。

false（ish）：非標準のHTML要素は「許可されていない」、「違法」、または「無効」です。

必ずしも。彼らはそうです 「不適合」. 。違いは何ですか？ 何かが「適合しない」ことがあり、それでも「許可される」ことができます。 W3Cは、HTML警察をあなたの家に送り、あなたを運ぶつもりはありません。

W3Cは理由でこのように物事を残しました。適合と仕様は、コミュニティによって定義されます。より具体的な目的のためにHTMLを消費する小さなコミュニティがたまたま、彼らが物事をより簡単にするために必要ないくつかの新しい要素に同意した場合、彼らはW3Cが次のように言及するものを持つことができます 「その他の該当する仕様」. 。 （これは明らかに単純化よりもひどいですが、あなたはアイデアを得ることができます）

とはいえ、厳格なバリッターは、標準以外の要素が「無効」であると宣言します。しかし、それはバリデーターの仕事は、検証している仕様に適合していることを確保することであり、「合法性」を確保することではありません。 ブラウザ または 使用する.

false（ish）：非標準のHTML要素 意思 その結果、レンダリングの問題が発生します

おそらく、しかしありそうもない。 （「will」を「might」に置き換えます）これがレンダリングの問題をもたらす唯一の方法は、カスタム要素がHTML仕様の変更や同じシステム内で尊重される別の仕様（ SVG、数学、または何か習慣）。

実際には、 CSSが非標準タグをスタイリングできる理由 HTML仕様のためです 明らかに述べています それ：

ユーザーエージェントは、意味的に中立として理解していない要素と属性を扱う必要があります。それらをDOM（DOMプロセッサ用）に残し、CSS（CSSプロセッサ用）に従ってスタイリングしますが、それらからの意味を推測しません

ノート： カスタムタグを使用する場合は、後でHTML仕様の変更がスタイリングを吹き飛ばす可能性があることを覚えておいてください。準備してください。 W3Cが実装する可能性は低いです <imsocool> ただし、タグ。

非標準タグとJavaScript（dom経由）

JavaScriptを使用してカスタム要素にアクセスして変更できる理由は、 仕様では、それらがどのようにdomで処理されるべきかについてさえ語っています, 、これは、ページ上の要素を操作できる（本当に恐ろしい）APIです。

HTMLUNKNOUNTELEMENTインターフェイスは、この仕様（またはその他の該当する仕様）で定義されていないHTML要素に使用する必要があります。

TL; DR：仕様に準拠することは、コミュニケーションと安全のために行われます。不適合は、a以外のすべてによってまだ許可されています バリデーター, 、その唯一の目的は適合性を強制することですが、その使用はオプションです。

例えば：

var wee = document.createElement('wee');
console.log(wee.toString()); //[object HTMLUnknownElement]

（これは炎を引き出すと確信していますが、私の2セントがあります）

仕様によると：

CSS

a タイプセレクター CSS資格のある名前の構文を使用して書かれたドキュメント言語要素タイプの名前です

私はこれが呼ばれていると思いました エレメント セレクターですが、どうやらそれは実際にです タイプ セレクタ。スペックは話し続けます CSS qualified names 名前が実際に何であるかに制限はありません。つまり、タイプセレクターがCSS適格名構文と一致する限り、技術的に正しいCSSであり、ドキュメントの要素と一致することです。特定の仕様（HTMLまたはその他）に存在しない要素にCSS固有の制限はありません。

HTML

必要なドキュメントにタグを含めることには公式の制限はありません。ただし、ドキュメントには言います

著者は、適切な意図されたセマンティック目的以外の目的で要素、属性、または属性値を使用してはなりません。

そして、それは後で言います

著者は、この仕様またはその他の適用される仕様で許可されていない要素、属性、または属性値を使用してはなりません。そうすることで、言語が将来拡張されることが非常に難しくなります。

具体的には、スペックが核の要素があると言っているのかどうかはわかりません 許可された, 、しかし、それはについて話します htmlunknownelement 認識されていない要素のインターフェイス。一部のブラウザは、現在の仕様にある要素を認識していない場合があります（IE8が思い浮かびます）。

があります カスタム要素のドラフト, しかし、しかし、私はそれがまだどこにでも実装されているとは思わない。

これはHTML5で可能ですが、古いブラウザーを考慮する必要があります。

それらを使用することにした場合は、必ずHTMLをコメントしてください!!一部の人々は、それが何であるかを理解するのに苦労するかもしれません。

このようなもの、

<!-- Custom tags in use, refer to their CSS for aid -->

独自のカスタムタグ/要素を作成すると、古いブラウザは、それがhtml5要素のようなものであることを知りません。 nav/section.

このコンセプトに興味がある場合は、正しい方法で行うことをお勧めします。

入門

カスタム要素により、Web開発者は新しいタイプのHTML要素を定義できます。スペックは、Webコンポーネントの傘下に着陸するいくつかの新しいAPIプリミティブの1つですが、おそらく最も重要なことです。 Webコンポーネントは、カスタム要素によってロック解除された機能なしでは存在しません。

新しいHTML/DOM要素の定義他の要素から拡張する要素を作成します。

あなたがそれでできることはたくさんあります、そして、それはあなたのスクリプトを美しくします、この記事はそれを言うのが好きです。 HTMLの新しい要素を定義するカスタム要素.

要約しましょう、

プロ

  • とてもエレガントで読みやすい。

  • そんなに多く見ないのはいいことです divs. 。 ：p

  • コードにユニークな感触を可能にします

短所

  • 古いブラウザのサポートは、考慮すべき強力なものです。

  • 他の開発者は、カスタムタグについて知らない場合、何をすべきかわからない場合があります。 （それらに説明するか、コメントを追加して通知します）

  • 最後に考慮すべきことの1つですが、私は確信が持てませんが、ブロックとインラインの要素です。カスタムタグを使用することにより、カスタムタグにはデフォルトの側面がないため、より多くのCSSを作成することになります。

選択は完全にあなた次第であり、あなたはそれをプロジェクトが求めているものに基づいているべきです。

2014年1月2日更新

これが私が見つけた非常に役立つ記事です。 カスタム要素.

技術を学ぶ理由はカスタム要素ですか？カスタム要素は、著者が独自の要素を定義できるようにします。著者は、JavaScriptコードをカスタムタグ名に関連付け、標準タグのようにそれらのカスタムタグ名を使用します。

たとえば、スーパーボタンと呼ばれる特別な種類のボタンを登録した後、このようにスーパーボタンを使用してください。

カスタム要素はまだ要素です。標準や今日と同じくらい簡単に作成、使用、操作、作成できます。

これは非常に良いライブラリのように思えますが、ウィンドウのビルドステータスを通過しなかったことに気付きました。これはまた、私が信じている前のアルファにあるので、私はそれが発展している間、これに目を光らせていると思います。

なぜ彼はあなたにそれらを使用してほしくないのですか？それらは一般的でも、HTML5標準の一部でもありません。技術的には、それらは許可されていません。彼らはハックです。

しかし、私は彼ら自身が好きです。 XHTML5に興味があるかもしれません。独自のタグを定義し、標準の一部として使用することができます。

また、他の人が指摘しているように、彼らは無効であり、したがって携帯性はありません。

なぜ彼は彼らが存在することを知らなかったのですか？それらが一般的ではないことを除いて、私は知りません。おそらく彼はあなたができることを知らなかっただけだった。

メイクアップタグは、現在のすべてのブラウザや将来のすべてのブラウザで確実に機能する可能性は低いため、ほとんど使用されていません。

ブラウザは、HTMLコードを知っている要素に解析する必要があります。メイクアップタグは、ドキュメントオブジェクトモデル（DOM）に収まるように他のものに変換されます。 Web標準では、標準の外側にあるすべてのものを処理する方法をカバーしていないため、Webブラウザーはさまざまな方法で非スタンダーコードを処理する傾向があります。

Web開発は、不確実性の別の要素を追加することなく、独自の癖を持つさまざまなブラウザの束で十分に注意が必要です。実際に標準にあるものに固執することが最善の策です。それは、ブラウザベンダーが従おうとするものであるため、実際に機能する最高のチャンスがあります。

MADEUPタグは、IDSを使用したP（一般的にテキストの一部のブロック）よりも、潜在的に混乱を招くか、不明瞭だと思います。私たちは皆、IDを持つAPが段落であることを知っていますが、誰が何を意図しているかを誰が知っていますか？少なくともそれは私の考えです。 :)したがって、これは機能の1つよりもスタイル /明確な問題のようなものです。

他の人は優れたポイントを挙げていますが、そのようなフレームワークを見ると注目に値します Angularjs, 、カスタム要素と属性には非常に有効なケースがあります。これらは、XMLに対してより良いセマンティックな意味を伝えるだけでなく、Webページに行動、外観、感触を提供することもできます。

CSSは、（x）HTMLドキュメントだけでなく、XMLドキュメントを提示するために使用できるスタイルシート言語です。構成されたタグを使用したスニペットは、法的なXMLドキュメントの一部である可能性があります。単一のルート要素で囲む場合は1つです。おそらくあなたはすでに持っています <html> ...</html> その周りに？現在のブラウザはXMLドキュメントを表示できます。

もちろん、それは非常に優れたXMLドキュメントではなく、文法とXML宣言がありません。代わりにHTML宣言ヘッダー（おそらく正しいMIMEタイプを送信するサーバー構成）を使用する場合、代わりに違法なHTMLになります。

（x）要素には、Webページのプレゼンテーションのコンテキストで有用な意味的な意味があるため、HTMLにはプレーンXMLよりも利点があります。ツールはこのセマンティクスで動作することができ、他の開発者は意味を知っています。エラーが発生しやすく、読みやすくなります。

ただし、他のコンテキストでは、XMLおよび/またはXSLTを搭載したCSSを使用してプレゼンテーションを行うことをお勧めします。これがあなたがしたことです。これはあなたの仕事ではなかったので、あなたはあなたが何をしているのか分からなかったので、HTML/CSSはあなたのシナリオでそれに固執する必要があるほとんどの時間に行くためのより良い方法です。

（x）HTMLヘッダーをドキュメントに追加する必要があります。これにより、ツールが意味のあるエラーメッセージを提供できるようにする必要があります。

...私は単にすべての作成タグをIDを使用して段落に変更するだけです。

私は実際にそれを適切に行う方法についての彼の提案に問題を抱えています。

  1. a <p> タグは段落用です。私は人々がDivの代わりに常にそれを使用しているのを見ます - 単に間隔の目的のために、またはそれが穏やかに思えるからです。段落ではない場合は、使用しないでください。

  2. 具体的にターゲットにする必要がない限り、すべてを必要としない、またはすべてに固執する必要はありません（たとえば、JavaScriptを使用します）。クラスまたは単なるまっすぐなdivを使用します。

初期からCSSはマークアップ不可知論的になるように設計されていたため、任意のマークアップ言語を生成する任意のマークアップ言語で使用できます。準拠するタグ name token 生産はCSSで完全に有効です。したがって、あなたの質問は、CSS自体よりもHTMLに関するものです。

カスタムタグを備えた要素は、HTML5仕様によってサポートされています。 HTML5は、不明な要素をDOMで解析する方法を標準化します。したがって、HTML5は、厳密に言えば、カスタム要素を有効にする最初のHTML仕様です。 HTML5 Doctypeを使用するだけです <!DOCTYPE html> あなたのドキュメントで。

カスタムタグ名自体のように...

このドキュメント http://www.w3.org/tr/custom-elements/ 少なくとも1つの ' - '（dash）シンボルを含めるように選択したカスタムタグをお勧めします。これにより、将来のHTML要素と矛盾することはありません。したがって、ドキュメントをこのようなものに変更する方が良いでしょう。

<style>
so-cool {
    color:blue;
}
</style>

<body>
    <so-cool>HELLO</so-cool>
</body>

驚いたことに、アクセシビリティについて言及した人は（過去の私も含めて）誰もいませんでした。カスタム タグの代わりに有効なタグを使用するもう 1 つの理由は、スクリーン リーダーやアクセシビリティ目的で必要なその他のツールなど、ほとんどのソフトウェアとの互換性のためです。さらに、WAI のようなアクセシビリティ法 必要とする Web サイトをアクセシブルにすることは、一般に有効なマークアップの使用を要求することを意味します。

どうやら誰もそれについて言及しなかったので、私が言及します。

これは副産物です ブラウザ戦争.

インターネットが初めて主流になり始めた 1990 年代、ブラウザ市場では競争が激化しました。競争力を維持し、ユーザーを引き付けるために、一部のブラウザー (特に Internet Explorer) は、どのページ デザイナーがどのようなページ デザイナーを使用しているかを把握することで、便利で「ユーザー フレンドリー」になろうとしました。 意味 そのため、間違ったマークアップが許可されてしまいます (例: <b><i>foobar</b></i> 太字斜体として正しく表示されます)。

これはある程度理にかなっています。なぜなら、あるブラウザが構文エラーについて文句を言い続けている一方で、別のブラウザがあなたが投げたものを何でも食べて（多かれ少なかれ）正しい結果を吐き出すとしたら、人々は自然に後者に群がるからです。

ブラウザ戦争は終わったと多くの人が思っていましたが、Chrome がリリースされてからここ数年でブラウザ ベンダー間の新たな戦争が再燃し、Apple は再び成長を始めて Safari を推し始め、IE はその優位性を失いました。(ブラウザ ベンダーによる標準への協力とサポートが認識されているため、これを「冷戦」と呼ぶこともできます。) したがって、最新のブラウザであっても、 おそらく Web 標準に厳密に準拠する人は、実際には「賢く」なろうとしており、以前と同様に優位性を得ようとするために、このような標準に違反する行為を許可します。

残念なことに、この寛容な行動は大規模な (いくつかの 癌のような）マークアップが不十分な Web ページの増加。IE は最も寛容で人気のあるブラウザだったため、また Microsoft が標準を軽視し続けたため、IE は悪いデザインを助長し、助長し、壊れたページを広め、永続させることで悪名高くなりました。

一部のブラウザでは、今のところそのような癖やエクスプロイトの使用を回避できるかもしれませんが、時折パズルやゲームなどを使用する場合を除いて、常に使用する必要があります。 ウェブ標準 Web ページやサイトを作成するときに、それらが正しく表示されることを確認し、ブラウザの更新によって壊れる (おそらく完全に無視される) ことを回避します。

ブラウザは通常、CSSを有効かどうかに関係なくHTMLタグに関連付けますが、絶対にこれを行うべきではありません。

CSSの観点からは、技術的にはこれには何の問題もありません。ただし、作成したタグを使用することは、HTMLでは決してすべきではありません。

HTMLはマークアップ言語です。つまり、各タグは特定のタイプの情報に対応しています。

作成したタグは、いかなる種類の情報にも対応していません。これにより、GoogleなどのWebクローラーから問題が発生します。

の詳細については、 正しいマークアップの重要性.

編集

Divは、ブロック形式で表示することを目的とした複数の関連要素のグループを指し、そのように操作できます。

スパンとは、現在のコンテキストとは異なるスタイルと呼ばれる要素を指し、ブロックとしてではなく、インラインで表示されることを意図しています。例としては、文のいくつかの単語がすべてのキャップである必要がある場合です。

カスタムタグは標準と相関していないため、代わりにクラス/IDプロパティでSPAN/DIVを使用する必要があります。

がある とても これに対する具体的な免除 Angular JS

CSSには「タグセレクター」と呼ばれるものがありますが、実際にはタグが何であるかはわかりません。これにより、ドキュメントの言語が定義されています。 CSSは、HTMLだけでなくXMLでも使用するように設計されています。ここでは（DTDまたはその他の検証スキームを使用していないと仮定すると）、タグは何でもかまいません。他の言語でも使用できますが、「タグ」や「属性」のようなものを正確に考える必要があります。

ブラウザは通常、HTMLの未知のタグにCSSを適用します。これは、完全に壊れるよりも優れていると考えられているためです。少なくとも何かを表示できます。しかし、そうです とても 「偽の」タグを意図的に使用するための悪い練習。この理由の1つは、新しいタグが随時定義されることです。また、偽のタグのように見えるが、まったく機能しないように見える場合、新しいブラウザでサイトに問題を引き起こす可能性があることです。

なぜCSSは偽の要素で動作するのですか？ とにかくそれらを使用することになっていないので、それは誰も傷つけないからです。

なぜ私の教授は私に作り上げられた要素を使ってほしくないのですか？ なぜなら、その要素が将来の仕様によって定義されている場合、あなたの要素は予測不可能な動作をするからです。

また、なぜ彼は、構成された要素が存在し、CSSと連携することを知らなかったのです。彼らは珍しいですか？ 彼は、他のほとんどのWeb開発者と同様に、将来ランダムに壊れる可能性のあるものを使用すべきではないことを理解しているからです。

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