HTML と CSS ファイルが与えられた場合、ノードに適用されるスタイルをどのように計算できますか? スタイルは、直接 (#bar など) または間接的に (#foo li など) 適用できます。
2 に答える
適用される CSS はツリー内のノードの位置に依存するため (たとえば #foo > li は、タグ名が li の #foo の直系の子孫にのみ適用されます)、まず CSS の各ルールを DOM に一致させる必要があります。各ノードは、各セレクターの重みを考慮して、結果の CSS を計算します。CSS の重みを計算するための正確な式はわかりませんが、
number of #id selectors
* 100 + number of .class selectors
* 10 +のようなものnumber of tag selectors
です。もちろん、インライン スタイルと ! 重要事項も。
CSS を DOM ノードにマッピングするには、phpQueryやphp-selectorなどのクエリ エンジンを使用できます。
最初のステップ (CSS を各ルールの影響を受ける DOM ノードにマッピングする) を示す概念実証スクリプトphp-effective-cssを作成しました。
それらを計算する代わりに、計算されたスタイルを実際に読み取ることができます。これは Javascript で簡単に実行できます。PHP では、phantomJSを使用できます。すべての要素の計算されたスタイルをダンプするためのすぐに使用できる coffeescript は次のとおりです: https://gist.github.com/AndrewO/1841191
コマンドラインでphantomJSを実行するためのPHPラッパーもすでにあります
https://github.com/jonnnnyw/php-phantomjs
お役に立てれば。