Discussion :

[Rolf-IV]

Bonjour à tous,

dans le cadre de mon stage, j'aimerais réaliser un script qui puisse:

1> factoriser le nombre de règles CSS au maximum,
2> supprimer les règles redondantes (la dernière prévaut),
3> simplifier les sélecteurs (div#section deviendra #section par exemple),
4> ignorer les règles mal formées,

afin de minimiser le calcul de positionnement par le navigateur.

Un exemple simple

En entrée:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
h1, h2, h3 { font-weight: normal; }
a strong { font-weight: normal !important; }
strong { font-style: italic; font-weight: normal; }
#nav { font-style: italic; }
.note { font-style: italic; }

En sortie:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
h1, h2, h3, strong { font-weight: normal; }
a strong { font-weight: normal !important; }
strong, #nav, .note { font-style: italic; }

Le problème est bien délimité, en revanche, je sèche quant à la stratégie à adopter (pr la première contrainte évidemment, les autres sont relativement triviales).

Quelles sont les limitations (les cas limites, je veux dire) ? Ce genre de problème appartient-il à une famille de problèmes connue ?


Merci d'avance !
Rolf IV

[pseudocode]

En présentant le problème sous forme de matrice de couverture, il y a peut-être moyen de simplifier les choses:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
                            | h1 | h2 | h3 | a strong | strong | #nav | .note |
-------------------------------------------------------------------------------
fstyle: italic;             |    |    |    |          |    X   |   X  |   X   |
-------------------------------------------------------------------------------
fweight: normal;            |  X |  X |  X |          |    X   |      |       |
-------------------------------------------------------------------------------
fweight: normal !important; |    |    |    |    X     |        |      |       |
-------------------------------------------------------------------------------

[Rolf-IV]

Bonjour,

merci beaucoup ! Je commence à déjà y voir plus clair.
Du coup, je commence à penser à un "algorithme" du genre:

0> Je parse le fichier CSS et crée la matrice.
Tant que la matrice n'est pas vide
1> Je sélectionne le regroupement le plus grand (par élément ou par règle) ;
2> J'ajoute la règle qui correspond à ce regroupement à l'ensemble des règles ;
3> Je retire les "x" de la matrice.
Fin Tant que

Ces étapes vous paraissent-elles correctes ?
Si oui, comment réaliser efficacement l'étape 1 ?

[pseudocode]

Ces étapes vous paraissent-elles correctes ?

Oui. C'est ce qu'on appelle un algorithme glouton (greedy type algorithm). Il y a des cas ou cet algorithme n'est pas "optimum", mais pour commencer c'est un excellent début.

Si oui, comment réaliser efficacement l'étape 1 ?

Aucune idée, il faut faire des essais. Regrouper par élément, ou par règle, ou par le meilleur des 2 à chaque étape...