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

私のクラスで、私は遊んでいて、CSSが構成要素で動作することを発見しました。

例：

imsocool {
    color:blue;
}

<imsocool>HELLO</imsocool>

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

なぜ私の教授は私が作り上げた要素を使用することを望んでいないのですか？彼らは効果的に働きます。

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

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

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

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

（カスタム要素でHTMLを拡張する手段を定義する作業が進行中であることに注意してください。ただし、この作業は現在開発の初期段階にあるため、成熟するまで回避する必要があります。）

なぜ私の教授は私が作り上げた要素を使用することを望んでいないのですか？

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

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

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

TL; DR

• カスタムタグはHTMLでは無効です。これにより、レンダリングの問題が発生する可能性があります。
• コードは移植できないため、将来の開発がより困難になります。
• 有効なHTMLには、SEO、速度、プロ意識など、多くの利点があります。

長い答え

いくつかの議論がありますカスタムタグ付きのコードがより使いやすいという。

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

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

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

検証する理由| W3C

• デバッグツールとしての検証
• 将来を見据えた品質チェックとしての検証
• 検証によりメンテナンスが容易になります
• 検証は良い実践を教えるのに役立ちます
• 検証はプロ意識の表れです

YADA（まだ別の（異なる）答え）

編集：タイプとタグと要素については、下記のBoltClockからのコメントを参照してください。私は通常、意味論については心配しませんが、彼のコメントは非常に適切で有益です。

すでに良い返信がたくさんありますが、あなたは教授がこの質問を投稿するように促したので、あなたは（正式には）学校にいるようです。CSSだけでなく、Webブラウザーのメカニズムについても、もう少し詳しく説明したいと思いました。ウィキペディアによれば、「CSSは、マークアップ言語で記述されたドキュメントの記述に使用されるスタイルシート言語です。」（私は "a"に重点を追加しました）特定のバージョンのHTMLではなく、 "HTMLで書かれた"とは言っていないことに注意してください。CSSはHTML、XHTML、XML、SGML、XAMLなどで使用できます。もちろん、レンダリングできるものが必要ですスタイル設定も適用するこれらの各ドキュメントタイプ。定義上、CSSは特定のマークアップ言語タグを認識/理解/注意しません。したがって、HTMLに関する限り、タグは「無効」である可能性がありますが、CSSには「有効な」タグ/要素/タイプの概念はありません。

最新のビジュアルブラウザーは、一体型のプログラムではありません。それらは、特定の仕事を行うさまざまな「エンジン」の集まりです。で、最低限私は3つのエンジン、レンダリングエンジン、CSSエンジン、およびJavaScriptエンジン/ VMと考えることができます。パーサーがレンダリングエンジンの一部であるか（またはその逆か）、または別個のエンジンであるかは不明ですが、あなたはそのアイデアを理解しています。

かどうかは、ビジュアルブラウザ（他の人がすでにスクリーンという事実に対処している読者は、無効なタグを扱う他の課題を持っているかもしれませんが）の書式設定を適用すると、レンダリングエンジンは、スタイルを適用するかどうか、ドキュメントで「無効」タグパーサの葉かどうかに依存し、そのタグに。開発/保守が難しくなるため、CSSエンジンは「これはHTMLドキュメントなので、有効なタグ/要素/タイプのリストです」と理解するように書かれていません。CSSエンジンは単にタグ/要素/タイプを見つけて、レンダリングエンジンに「ここに適用すべきスタイルがあります」と伝えます。レンダリングエンジンが実際にスタイルを適用するかどうかを決定するかどうかは、問題です。

エンジンからエンジンへの基本的な流れを考える簡単な方法は次のとおりです：パーサー-> CSS->レンダリング。実際にははるかに複雑ですが、これは初心者には十分です。

この回答はすでに長すぎるため、ここで終了します。

不明な要素はdiv、最新のブラウザではとして扱われます。それが彼らが機能する理由です。これは、新しい要素を追加できるモジュール構造を導入する次のHTML5標準の一部です。

古いブラウザ（IE7-だと思います）では、JavaScriptトリックを適用できます。

例を探しているときに見つけた関連する質問は次のとおりです。

ここでJavascriptの修正についての質問が。実際、これらの要素をそのままではサポートしていないのはIE7です。

また; なぜ彼は、メイクアップタグが存在し、CSSで動作することを知らなかったのですか。彼らは珍しいですか？

はい、結構です。しかし、特に：それらは追加の目的を果たしません。そして、それらはhtml5の新機能です。以前のバージョンのHTMLでは、不明なタグは無効でした。

また、教師は時々知識にギャップがあるようです。これは、特定の主題に関する基本事項を生徒に教える必要があるためである可能性があり、すべての情報を把握して最新の状態にすることは、実際には効果がありません。playGWBasic のコマンドを使用してコンピューターに音楽を再生させることができたからといって、先生がウイルスをプログラムしたと思ったため、私はかつて拘留されました。（本当の話、そしてずっと前に）。しかし、理由が何であれ、カスタム要素を使用しないというアドバイスは健全なものだと思います。

実際には、カスタム要素を使用できます。このテーマに関する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、Math、または何かカスタム）。

実際、CSSが非標準タグのスタイルを設定できるのは、HTML仕様に明確に記載されているためですようにいるです。

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

注意：カスタムタグを使用する場合は、後でHTML仕様を変更するとスタイルが崩れる可能性があるので、準備してください。<imsocool>ただし、W3Cがタグを実装することはほとんどありません。

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

JavaScriptを使用してカスタム要素にアクセスして変更できるのは、仕様でDOMでの処理方法についても説明されているためです。これは、ページ上の要素を操作できる（本当に恐ろしい）APIです。

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

TL; DR：仕様への準拠は、通信と安全のために行われます。不適合は、バリデータ以外はすべて許可されます。バリデータの唯一の目的は適合を強制することですが、その使用はオプションです。

例えば：

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

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

仕様によると：

CSS

タイプセレクタは、 CSS修飾名の構文を使用して書かれた文書言語の要素型の名前です。

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

HTML

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

作成者は、適切な意図された意味上の目的以外の目的で要素、属性、または属性値を使用しないでください。使用すると、ソフトウェアがページを正しく処理できなくなります。

そしてそれは後で言う

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

仕様に不明な要素が許可されていると記載されているかどうかは明確にはわかりませんが、認識されていない要素のHTMLUnknownElementインターフェイスについては説明しています。一部のブラウザーは、現在の仕様にある要素さえ認識しない場合があります（IE8が思い浮かびます）。

ただし、カスタム要素のドラフトはありますが、まだ実装されていないようです。

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

それらを使用することにした場合は、必ずHTMLをコメントしてください。一部の人々はそれが何であるかを理解するのにいくつかの問題を抱えているかもしれないので、コメントは彼らに膨大な時間を節約できます。

このようなもの、

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

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

この概念に興味があるなら、私はそれを正しい方法で行うことをお勧めします。

入門

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

新しいHTML / DOM要素を定義する他の要素から拡張する要素を作成するカスタム機能を論理的に1つのタグにまとめる既存のDOM要素のAPIを拡張する

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

要約すると、

長所

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

• あまり見ないのはうれしい divs。：p

• コードにユニークな感触を与えます

短所

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

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

• 最後に考慮すべきことの1つは、ブロック要素とインライン要素です。カスタムタグを使用すると、カスタムタグにはデフォルトのサイドがないため、最終的にはより多くのcssを書き込むことになります。

選択は完全にあなた次第であり、プロジェクトが何を求めているかに基づいて選択する必要があります。

2014年1月2日更新

これが私が見つけて共有しようと思った非常に役立つ記事、カスタム要素です。

カスタムエレメントを選ぶ理由 カスタム要素を使用すると、作成者は独自の要素を定義できます。作成者は、JavaScriptコードをカスタムタグ名に関連付け、標準タグと同じようにそれらのカスタムタグ名を使用します。

たとえば、スーパーボタンと呼ばれる特別な種類のボタンを登録した後、次のようにスーパーボタンを使用します。

カスタム要素はまだ要素です。私たちは、標準または今日と同じくらい簡単に、それらを作成、使用、操作、および構成できます。

これは使用するのに非常に良いライブラリのようですが、ウィンドウのビルドステータスを渡さないことに気づきました。これは私が信じているプレアルファ版でもあるので、開発中はこれに注目します。

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

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

また、他の人が指摘したように、それらは無効であり、したがって移植性がありません。

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

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

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

Web開発は、不確実性の要素を追加することなく、独自の癖があるさまざまなブラウザーの束で十分にトリッキーです。実際に標準にあるものに固執するのが最善の策です。それは、ブラウザーベンダーが従おうとしていることなので、実際に機能する可能性が最も高くなります。

メイクアップタグは、IDを持つp（一般的にテキストのブロック）よりも、混乱を招く可能性が高い、または不明確であると思います。IDのあるapが段落であることは誰もが知っていますが、誰が作ったタグが意図されているのか誰が知っていますか？少なくともそれは私の考えです。:)したがって、これは機能の1つよりもスタイル/明確さの問題の多くです。

他にも優れた点がありますが、AngularJSなどのフレームワークを見ると、カスタム要素と属性に非常に有効なケースがあることに注意してください。これらは、XMLに意味的な意味をもたらすだけでなく、Webページの動作、ルックアンドフィールを提供することもできます。

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

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

（X）HTMLは、要素がWebページプレゼンテーションのコンテキストで役立つ意味上の意味を持つため、プレーンXMLよりも優れています。ツールはこのセマンティクスで機能し、他の開発者はその意味を知っています。エラーが発生しにくく、読みやすくなります。

しかし、他のコンテキストでは、XMLやXSLT、あるいはその両方でCSSを使用してプレゼンテーションを行う方が適切です。これはあなたがしたことです。これはあなたの仕事ではなかったので、あなたは自分が何をしているのかを知りませんでした。HTML/ CSSは、ほとんどの場合、シナリオでそれに固執する必要があるより良い方法です。

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

...作成したすべてのタグをID付きの段落に変更するだけです。

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

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

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

初期の頃から、CSSはマークアップに依存しないように設計されているため、DOM構造（SVGなど）に似たツリーを生成する任意のマークアップ言語で使用できます。準拠するタグname tokenプロダクションに CSSで完全に有効です。したがって、あなたの質問はCSS自体ではなくHTMLについてです。

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

カスタムタグ名自体について...

このドキュメントhttp://www.w3.org/TR/custom-elements/では、少なくとも1つの「-」（ダッシュ）記号を含めるように選択したカスタムタグを推奨しています。これにより、将来のHTML要素と競合しなくなります。したがって、ドキュメントを次のように変更することをお勧めします。

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

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

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

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

インターネットが最初に主流になり始めた1990年代に戻って、競争はブラウザー市場で激化しました。競争力を維持してユーザーを引き付けるために、一部のブラウザー（特にInternet Explorer）は、ページ設計者が何を意味するのかを理解しようとすることで、役立つ「ユーザーフレンドリー」を試み、誤ったマークアップを許可しました（たとえば、<b><i>foobar</b></i>太字として正しくレンダリングされます）イタリック体）。

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

多くの人がブラウザ戦争は終わったと考えていましたが、Chromeがリリースされてから過去数年間、ブラウザベンダー間の新たな戦争が再燃し、Appleは再び成長し始め、Safariを推進し、IEはその支配を失いました。（ブラウザベンダーによる標準の認識された協力とサポートのため、これを「冷戦」と呼ぶことができます。）したがって、Web標準に厳密に準拠していると思われる現代のブラウザでさえ、実際に「賢い」以前のように利点を得ようとするために、このような標準を破る動作を許可します。

残念ながら、この寛容な行動により、マークアップが不十分なWebページが大幅に（場合によっては癌性とさえ言われることもある）成長しました。IEは最も寛容で人気のあるブラウザーであり、Microsoftの標準の流布が続いていたため、IEは悪いデザインを奨励および促進し、壊れたページを伝播および永続させることで悪名高くなりました。

現時点では、一部のブラウザでそのような癖やエクスプロイトを使用することで問題を回避できる可能性がありますが、時折発生するパズルやゲームなどを除いて、ウェブページやサイトを作成するときは常にウェブ標準に準拠し、正しく表示され、ブラウザの更新でそれらが壊れる（おそらく完全に無視される）のを避けます。

ブラウザは、CSSが有効であるかどうかに関係なく、一般的にCSSをHTMLタグに関連付けますが、絶対にこれを行わないでください。

CSSの観点から見ると、技術的にはこれで問題はありません。ただし、メイクアップタグの使用は、HTMLでは絶対に行わないでください。

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

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

正しいマークアップの重要性について詳しくは、こちらをご覧ください。

編集する

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

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

カスタムタグは標準に関連付けられていないため、代わりにspan / divをクラス/ IDプロパティで使用する必要があります。

Angular JSなど、これには非常に具体的な免除があります

CSSには「タグセレクタ」と呼ばれるものがありますが、実際にはタグが何であるかはわかりません。それは、ドキュメントの言語を定義するために残されます。CSSは、HTMLだけでなくXMLでも使用できるように設計されており、DTDやその他の検証スキームを使用していない場合は、タグはほとんど何でもかまいません。他の言語でも使用できますが、「タグ」や「属性」などに対応するために独自のセマンティクスを考え出す必要があります。

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

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

なぜ私の教授は私が作り上げた要素を使用することを望んでいないのですか？なぜなら、もしその要素が将来仕様によって定義されるなら、あなたの要素は予測できない振る舞いをするからです。

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