Existe-t-il un optimiseur CSS qui découvrira des propriétés uniques identiques dans les sélecteurs et les regroupera ?

StackOverflow https://stackoverflow.com/questions/2332350

Question

Voici un exemple de ce à quoi je m'attendrais :

Saisir:

a {
    background: red;    
}

p {
    background: red;    
}

strong {
    background: red;
    color: green;
}

Sortir:

strong{color:green;}
a,p,strong{background:red;}

La plupart des optimiseurs afficheront quelque chose comme ceci :

strong{background:red;color:green;}
a,p{background:red;}

Remarquez qu'il n'a pas compris le fait que strong, bien qu'il contienne color: green;, contient également background: red; donc on peut le regrouper avec les autres ?

Toute aide que vous pourriez apporter serait grandement appréciée

Tous mes vœux

Iain

Était-ce utile?

La solution 2

D'accord, donc il semble que ce que je cherchais n'existe pas, ou est très difficile à trouver, j'ai donc écrit un script qui permet de résoudre mon problème particulier. Je le coller ici dans l'espoir que quelqu'un pourrait parfois être utile.

<?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"; 
    }
}

?>

Maintenant, quelques cavaets.

  1. Non, ce n'est pas le plus beau code dans le monde, il a été fait rapidement pour résoudre un problème particulier, j'avais une fois et il est adapté assez fortement à la CSS m'a donné de travailler avec. Cela dit, il devrait être suffisamment générique pour travailler avec la plupart CSS vous lancez.

  2. Il est la nature des CSS que, parfois, l'ordre dans lequel une règle apparaît est important pour le rendu du document final. Il est probable que si vous exécutez simplement tous vos CSS grâce à ce script que votre page ne sera pas rendu comme prévu plus. Je suis juste en utilisant ce script spécifique à la page css groupe sur une application web que je n'ai pas le contrôle de la mise en page sur. Chaque règle s'applique à un élément particulier sur une page particulière, je ne suis pas attendre d'énormes quantités de dodgyness quand je groupe de cette façon -. Il va tout simplement rendre le CSS plus maintenable

Autres conseils

Peut être CSSTidy pourrait aider, ici.

Si vous jetez un oeil à ce CSS "avant", vous verrez cette portion de code :

a:hover{
    color: #DD6900;
}

a.admin:hover,a.mod:hover{
    color: #DD6900;
}

Dans dans le CSS "après", tu auras :

a:hover,a.admin:hover,a.mod:hover,a.topictitle:hover {
color:#DD6900
}

Je ne suis pas sûr qu'il traitera tous les cas possibles, mais dans certaines situations, il semble qu'il fasse ce que vous demandez ;-)

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top