18041 sujets

Questions générales et questions de débutants

[Résolu] Avoir des propriétés raccourcies CSS avec un outil ?

Bonsoir,

Je voudrais faire maigrir ma feuille de style principale en recourant aux propriétés raccourcies. Est-ce qu’un tool existe, ou un module dans VSCode ?

Je ne voudrais pas me faire ça à la main car je ne vais pas gagner grand chose en le faisant, j’imagine.

Mais peut-être qu’il n’y a pas besoin, j’utilise YUI Compressor dans mon CMS, mais je ne sais pas trop ce qu’il fait, ou pas.

Merci les pros.
Bonjour,

Ce serait une mauvaise idée car selon le contexte d'utilisation (leur place dans le code) les propriétés raccourcies ne sont pas toujours équivalentes aux propriétés à définition unique. Pour cette raison, à ma connaissance, il n'existe pas d'outil développé dans ce sens.

Il faut mieux se contenter de minifier le code CSS et c'est déjà énorme (jusqu'à 40% du poids du fichier). Ensuite, au niveau du serveur, on pourra encore y gagner en servant le fichier de manière compressée. La mise en cache fera le reste pour les visites suivantes.
Modérateur
Salut,

Tout a fait comme Olivier. Par exemple :
.defaut {
    border-width: 2px;
    border-style: dashed;
    border-color: red;
}
.specifique {
    border-color: blue;
}

Serait transformé en :

.defaut {
    border: 2px dashed red;
}.specifique {
    border: blue;
}

et
border: blue;

est egal à
border: medium none blue;

donc pas de border Smiley murf
Il existe plusieurs outils en ligne et des modules pour VSCode qui permettent de compresser tes fichiers CSS en utilisant les propriétés raccourcies. Voici quelques options :

CSS Nano : c'est un outil de compression CSS en ligne qui utilise des techniques d'optimisation pour compresser votre CSS et le rendre plus léger. Il prend en charge les propriétés raccourcies et peut être utilisé directement en ligne ou intégré à ton flux de travail avec des outils de construction tels que Grunt ou Gulp.

PostCSS : c'est un outil qui permet d'optimiser votre CSS en utilisant des plugins pour effectuer différentes tâches telles que la compression, la préfixation de navigateur et l'utilisation de propriétés raccourcies. Il peut être utilisé avec VSCode via des plugins tels que PostCSS Language Support ou AutoPrefixer.

VSCode Extension "CSS minifier" : cette extension permet de compresser les CSS en utilisant les propriétés raccourcies, ainsi que d'autres techniques d'optimisation.
Administrateur
Bonjour,

Pour savoir si l'outil actuel fait le job, il faut regarder le résultat.
Pour tester, la 1ère règle de _laurent est parfaite : est-ce qu'YUI la remplace par la propriété raccourcie, est-ce qu'on voit ça dans les Devtools du navigateur ?

Sur l'utilité, est-ce que vous utilisez les propriétés individuelles ? Il est déjà rare d'utiliser border-(color|width|style) seul alors les 3 à la fois plutôt que border... margin et padding idem.
Il n'y a que background-* je pense et bon le temps d'IE6-8 est pas mal révolu donc il y a peu de background-repeat dans nos CSS de nos jours.

Lighthouse dans les Devtools de Chrome est un outil qui permet d'auditer beaucoup de sujets de performance web (trop quand on voit pour la 1ère fois tous les retours Smiley biggol ) (s'il parle encore de Critical CSS, faut pas faire attention. 50x trop compliqué à mettre en place).
Un sujet de gain de poids qui me vient à l'esprit avec des CSS anciennes : virer les dizaines de propriétés préfixées genre -moz-border-radius, -ms-flex-truc, etc et Autoprefixer est l'outil parfait pour ça (il ajoute les préfixes ET les supprime si pas nécessaire) ; compter le nombre d'occurences de -moz-, -ms ou -o-, voir dans MDN (le tableau en bas de chaque propriété issu de Caniuse) et si c'est utile vérifier que le CMS passe un coup d'Autoprefixer.
Modifié par Felipe (14 May 2023 - 14:58)
Modérateur
Ola !

Par curiosité j'ai regardé un peu les outils de JENCAL (merci au passage j'en découvre) et effectivements ils gèrent bien ça. Si une propriété manque ils ne vont pas la réduire pour ne pas risquer de tout écraser donc c'est assez bien automatisé en fait. Et comme le dit très bien Felipe
Felipe a écrit :
Sur l'utilité, est-ce que vous utilisez les propriétés individuelles ? Il est déjà rare d'utiliser border-(color|width|style) seul alors les 3 à la fois plutôt que border... margin et padding idem.

Je pense clairement que les cas ou ca va se produire sont extrêmement rare et qu'il vaut mieux se pencher sur toutes les autres solutions proposées si l'objectif est vraiment la performance et l'allègement du code.

Bonne soirée tout le monde !
JENCAL a effectivement raison, il existe bien des outils qui retouchent le code CSS et modifient certaines propriétés.

Cependant, à la suite de certains experts du CSS, je ne pense pas qu'un outil de minification - ni même un pré-processeur - devrait aller au-delà de la simple suppression des espaces blancs et des sauts de lignes. Transformer directement le code est une mauvaise pratique qui, si elle existe encore, est en passe d'être révolue.

Parce que, oui, si l'on reste sur une cohérence interne aux styles ça peut marcher. Mais si l'on avait prévu dès le départ des interactions avec JavaScript ? Dans certains cas de figure, cela peut être problématique.

Par exemple, pour gagner deux ou trois malheureux caractères (et peut-être aussi pour une raison de rétrocompatibilité), la plupart des pré-processeurs convertiront les couleurs HSL en couleurs hexadécimales. Et si derrière j'avais prévu de manipuler mes couleurs ainsi définies via JavaScript ? Et bien ça va quand même être possible, mais je ne ferais pas l'économie d'une étape supplémentaire pour convertir à nouveau mes couleurs dans l'autre sens. C'est ballot Smiley ohwell

Bref, #neTouchePasAMonCode
Modifié par Olivier C (19 May 2023 - 07:41)
Prévenir un modérateur
Répondre au sujet
Aller à