15

ご挨拶: 私は何日もかけて、ブラウザーによって計算された各 CSS ルールの正確な CSS 特異性番号を表示するツールを見つけようとしました。CSS の特異性を確認するためのツールを含む多くのオンライン リソースを既に見てきました。そこにあるリンクは、オーバーライドされたクラスなどについて説明していますが、特定の CSS ルールを適用するときにブラウザーによって計算および使用される正確な特異性の数値を確認したいと考えています。

正確な CSS 特異性の計算を確認する必要があるのはなぜですか?
ブラウザが要素へのルールの近接性に基づいて CSS ルールを使用しているという特定の問題を克服できませんが、その前に、ブラウザによって適用されるルールよりも高い特異性を持つ別のルールが定義されています。jsfiddle を使用してデモンストレーションするために使用できる単純なコードがなく、デバッグしようとしているコードが複雑すぎてフィドルに含めることができません。

ほぼすべての検索で、ある種の「CSS 固有性ルール」または「CSS 固有性を理解する」リンクが示されています。CSS の特異性がどのように機能するかを理解し、Firebug と Chrome 開発者ツールを幅広く使用し、特異性のルールを理解するためのリンクをよく知っています。私の探求は、ある CSS ルールを別の CSS ルールに適用するときに、ブラウザ エンジンがどのようなことを考えているのかを調べてみることです! そして、どのルールが他のルールをオーバーライドするかを決定するためにこの情報をすでに計算しているので、何らかの方法でアクセス可能な情報になるはずですが、どうすればよいでしょうか?

私が直面している問題の非常に基本的な例:

.testClass1 .title, .testClass2 .testClass1 .title { corresponding CSS styles }
.testClass2 .title, .testClass1 .testClass2 .title { corresponding CSS styles }

または、次のようにコーディングすることもできます.... (最終結果に違いはありません。)

.testClass1 .title { corresponding CSS styles }     --- call it Rule 1
.testClass2 .testClass1 .title { corresponding CSS styles } --- call it Rule 2
.testClass2 .title { corresponding CSS styles }  --- call it Rule 3
.testClass1 .testClass2 .title { corresponding CSS styles }  --- call it Rule 4

そして、HTML構造は次のようになります...

<!-- delivers intended results -->
<div class="testClass1">
   <div class="title">Some Title</div>
</div>

<!-- Does not deliver intended results. 
  - I expected Rule 1 or Rule 2 to take effect, but Rule 3 gets
    applied because of its proximity to the actual HTML element. 
    i.e. rule 3 is defined later in CSS then rule 1 and 2. -->
<div class="testClass2">
  <div class="testClass1">
    <div class="title">Some Title</div>
  </div>
</div>

この問題をデバッグする最善の方法は、特定のルールを想定して毎回手動で計算するのではなく、ブラウザーの CSS 固有性の計算を確認することだと思いました。また、ブラウザーは適用中に既にこれを計算しているため、これらの特異性ルールのブラウザー計算を覗くツールを探していましたが、Firebug または Chrome インスペクターでそれを行う方法が見つかりません。

他の誰かがこれについて知っていて、誰かが存在する可能性のあるツールを教えてくれますか? 大変お世話になりました。ありがとうございました！

編集： 「私が苦労しているもののようなもの」を再現して実証できるかどうかを確認するために、フィドルをまとめようとしました。私は運が良かったと思います - http://jsfiddle.net/smallworld/abvHC/1/を見てください。このフィドルの問題はまだ単純すぎますが、クラスが動的に割り当てられるという私の課題を代表しているため、正確な順序を予測する方法がありません。フィドルの例 3 は、計算された特異性を確認する必要があった理由の代表的なケースです。いずれにせよ、計算した数値とブラウザの計算を比較できるようになれば素晴らしいと思います。

別の編集: 特定の要素に対するブラウザーの特異性スコアをのぞき見するという私の探求に対する答えはまだありませんが、Faust や他の人が、私が直面していた元の問題に対する可能な解決策に私を導いたと思います。以下のコメントスレッドを参照してください。その質問がブラウザの特異性スコアを表示できるかどうかに関するものであることを考えると、この質問は開いたままにしておくこともできます.現在、それを行うためのツールが利用できないという答えになる可能性が非常に高いです.

4

2 に答える 2