セレクターで同一の単一プロパティを発見し、それらをグループ化するCSSオプティマイザーはありますか?
-
22-09-2019 - |
質問
これが私が期待することの例です:
入力:
a {
background: red;
}
p {
background: red;
}
strong {
background: red;
color: green;
}
出力:
strong{color:green;}
a,p,strong{background:red;}
ほとんどのオプティマイザーは次のようなものを出力します:
strong{background:red;color:green;}
a,p{background:red;}
それがその事実を取り上げていないことに注意してください strong
, 、含まれていますが color: green;
, 、含まれています background: red;
したがって、それは他の人とグループ化できますか?
あなたが提供できる支援は大歓迎です
ではごきげんよう
iain
解決 2
さて、私が存在していなかったか、やってくるのが非常に難しいように思えたので、私は自分の特定の問題を解決するスクリプトを書きました。誰かがいつかそれが役に立つと思うかもしれないことを期待して、私はここでそれを貼り付けています。
<?php
$css = file_get_contents('test.css');
//Strip comments and whitespace. Tabs to spaces
$css = preg_replace("/\s{2,}/e", ' ', $css);
$css = preg_replace("/\/\*.*?\*\//", '', $css);
$css = str_replace("\t", " ", $css);
$css = str_replace(": ", ":", $css);
$css = str_replace(" }", "}", $css);
$css = str_replace("{", "{", $css);
$css = str_replace(";}", "}", $css);
//Break each rule out onto a new line
$css = preg_replace("/}\s*/", "}\r\n", $css);
//Break @ rules out onto new lines
$css = preg_replace('/(@.*?;\s*)/', '\0'."\r\n", $css);
//Parse CSS Rules
$parsed = array();
$css = explode("\r\n", $css);
foreach($css as $line => $rule){
if (preg_match('/(.*?)\{(.*?)\}/i', $rule, $regs)) {
$clean_selectors = preg_replace('/\s*,\s*/', ',', $regs[1]);
$clean_selectors = preg_replace('/,\s*$|\s$/', '', $clean_selectors);
$parsed[$line]['selectors'] = explode(',', $clean_selectors);
$parsed[$line]['properties'] = explode(';', $regs[2]);
} elseif(trim($rule) != '') {
$parsed[$line] = $rule;
}
}
//Group CSS by property
$groups = array();
foreach($parsed as $line => $css){
if(is_array($css)){
foreach($css['properties'] as $pline => $property){
if(isset($groups[$property])){
$groups[$property] = array_merge($groups[$property], $css['selectors']);
} else {
$groups[$property] = $css['selectors'];
}
}
} else {
$groups[$line] = $css;
}
}
//Output CSS sorted by property
foreach($groups as $property => $selectors){
if(is_array($selectors)){
asort($selectors);
echo implode(",\r\n", $selectors)." {\r\n\t".trim($property).";\r\n}\r\n\r\n";
} else {
echo $selectors."\r\n\r\n";
}
}
?>
今、いくつかのキャベット。
いいえ、これは世界で最も美しいコードではありません。私がかつて抱えていた特定の問題を解決するために迅速に行われ、私が仕事に与えられたCSSにかなり調整されています。とはいえ、あなたが投げるほとんどのCSSで作業するのに十分な一般的なものでなければなりません。
最終文書のレンダリングにとってルールが表示される順序が時々重要な場合があるのは、CSSの性質です。このスクリプトを介してすべてのCSSを実行するだけで、予想通りにページがレンダリングされない可能性があります。このスクリプトを使用して、レイアウト制御がないWebアプリケーションでページ固有のCSSをグループ化しています。各ルールは特定のページの特定の要素に適用されるため、このようにグループ化すると、膨大な量の危険を期待していません。CSSをより保守しやすくするだけです。
所属していません StackOverflow