是否有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;
因此,它可以与其他人分组?
您可以提供的任何帮助将不胜感激
一切顺利
伊恩
解决方案 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