Есть ли оптимизатор 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 через этот сценарий, ваша страница не будет отображаться, как вы ожидаете. Я просто использую этот скрипт для CSS, специфичной для страницы группы, в веб-приложении, которое у меня нет. Поскольку каждое правило применяется к конкретному элементу на определенной странице, я не ожидаю огромного количества хитрости, когда я группирую таким образом - это просто сделает CSS более подлежащим обслуживанию.
Другие советы
Может быть Csstidy мог бы помочь здесь.
Если вы посмотрите на это CSS "раньше", вы увидите эту часть кода:
a:hover{
color: #DD6900;
}
a.admin:hover,a.mod:hover{
color: #DD6900;
}
В CSS "после", ты получишь :
a:hover,a.admin:hover,a.mod:hover,a.topictitle:hover {
color:#DD6900
}
Не уверен, что это будет иметь дело со всеми возможными случаями-но в некоторых ситуациях кажется, что он делает то, что вы спрашиваете ;-)