Compacter ses CSS grâce aux propriétés sténographiques (shorthands)

Publié le 6 octobre 2009 - Webdesign. Tags :

Outre le fait de séparer le fond de la forme, l’un des principaux avantages des CSS concerne la reduction importante du temps de chargement d’une page. Mais pour que cela soit optimal, il convient également d’optimiser sa feuille de style. Je ne parle pas ici des compresseurs (de type Clean CSS), mais d’optimisation sténographique manuelle (certains outils de compressions proposent cette option avec plus ou moins de résussite) . Rien de neuf donc, mais cette astuce assez souvent ignorée mérite une petite piqure de rappel .

Voici les propriétés CSS qu’il est possible de compacter, précédées de la propriété sténo correspondante à appeler, et suivies d’un exemple pratique :

  • Font : font-style, font-variant, font-weight, font-size, line-height, font-family
    (ex: font: italic bold 1.5em/2 arial, Helvetica, sans-serif;)
  • Background : background-color, background-image, background-repeat, background-attachment, background-position
    (ex: background:#fff url(images/bg.png) no-repeat top left;
  • List-style : list-style-type, list-style-position, list-style-image
    (ex: list-style : square inside url(image/puce.png);
  • Margin : margin-top, margin-right, margin-bottom, margin-left
    (ex: margin: 5px 2px 10px 5px;)
  • Padding : padding-top, padding-right, padding-bottom, padding-left
    (ex: padding : 2px 5px 8px 3px;)
  • Border : border-width, border-style, border-color
    (ex: border: 1px dashed #eee;

Non seulement c’est plus simple à écrire, mais en plus c’est plus rapide à charger, et surtout beaucoup plus facile à maintenir (plus de lisibilité).

En complément, voici la liste des propriétés CSS 2.1 majoritairement utilisées à ce jour (l’avènement cross-browser des CSS3 n’étant pas encore pour tout de suite, même si on y arrive) :
Liste des propriétés CSS 2.1


Articles sur ce thème :