[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.

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

Ok, merci. Je vois mieux le sushi !

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.

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 ) (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)