Des CSS plus efficaces grâce aux raccourcis

Par Roger Johansson

Je reçois beaucoup de questions sur les CSS, venant de personnes qui ne sont pas assez dingues pour avoir passé autant de milliers d'heures que moi à travailler dessus.

Elles me demandent parfois de jeter un œil à ce sur quoi elles travaillent, pour voir si je peux comprendre pourquoi ça ne fonctionne pas comme prévu. Quand je regarde leurs CSS, je les trouve souvent à la fois surchargées et désorganisées.

L'une des raisons pour lesquelles on utilise les CSS pour traiter l'aspect des sites Web, c'est que cela permet de réduire la quantité de code HTML envoyé aux visiteurs du site. Pour éviter de ne faire que transférer la surcharge de l'HTML vers les CSS, vous devriez essayer de maîtriser également la taille de vos CSS. Je vais vous aider à y parvenir grâce à mon astuce préférée pour rendre les CSS plus efficaces : les propriétés raccourcies. La plupart des gens connaissent et utilisent certains raccourcis, mais la plupart n'utilisent pas au mieux ces propriétés qui permettent de gagner de l'espace.

Quelques bases

Les propriétés raccourcies peuvent être employées pour indiquer plusieurs propriétés d'un seul coup, dans une déclaration unique, au lieu d'utiliser une déclaration séparée pour chaque propriété. Comme vous allez le voir, cela peut faire gagner beaucoup de place dans votre fichier CSS.

On dispose de toute une quantité de propriétés raccourcies ; pour les détails je vous renvoie aux règles CSS du W3C pour les propriétés background, border, border-color, border-style, pour les côtés de bordure (border-top, border-right, border-bottom, border-left), border-width, font, list-style, margin, outline, et padding.

Couleurs

La façon la plus courante d'attribuer des couleurs en CSS est d'utiliser la notation hexadécimale : un signe dièse (#) suivi de six chiffres. On peut aussi utiliser des mots-clés et la notation RVB, mais pour ma part j'utilise toujours l'hexadécimal. Il existe un raccourci très intéressant et peu connu : lorsqu'une couleur est constituée de trois paires de chiffres hexadécimaux, vous pouvez enlever un chiffre de chaque paire.

#000000 devient #000, #336699 devient #369.

Dimensions des boîtes

Les propriétés affectant les dimensions des boîtes ont une syntaxe commune : la propriété raccourcie suivie d'une à quatre valeurs séparées par des espaces.

Quels côtés de la boîte seront affectés par les valeurs ? Cela dépend du nombre de valeurs que vous indiquerez. Voici comment :

Pensez à un cadran d'horloge, c'est un bon moyen de vous souvenir quel côté concerne quelle valeur. Démarrez à 12h (top), puis 3h (right), 6h (bottom), et 9h (left). Vous pouvez aussi vous dire en anglais : «I'm in TRouBLe» (J'ai un problème !), où les consonnes du mot TRouBLe révèlent le bon ordre, soit top right bottom left. J'ai vu ce moyen mnémotechnique dans l'excellent livre d'Eric Meyer sur les CSS Eric Meyer on CSS.

Marges et espacement

L'emploi de raccourcis pour ces propriétés peut faire gagner beaucoup de place. Par exemple, pour indiquer les tailles des marges de tous les côtés d'une boîte, vous pourriez utiliser ceci :

margin-top:1em;
margin-right:0;
margin-bottom:2em;
margin-left:0.5em;

Mais ce qui suit sera plus efficace :

margin:1em 0 2em 0.5em;

On utilisera la même syntaxe pour la propriété padding.

Bordures

Les bordures sont un peu plus compliquées puisqu'elles peuvent recevoir aussi un style et une couleur. Pour appliquer une bordure noire continue et d'un pixel de large aux quatre côtés d'un élément, vous pouvez utiliser le code suivant :


border-width:1px;
border-style:solid;
border-color:#000;

Une méthode plus rapide consisterait à utiliser le raccourci border :

border:1px solid #000;

J'indique toujours les valeurs des bordures dans l'ordre suivant : largeur, style, couleur. La plupart des navigateurs ne s'en soucient aucunement, ce qui correspond tout à fait aux indications de la norme du W3C, mais pourquoi ne pas utiliser le même ordre que ce qui est indiqué dans la norme en question ? Il y a toujours le risque de se retrouver avec un navigateur qui suive à la lettre l'ordre de ces valeurs raccourcies.

La même syntaxe peut être utilisée avec les propriétés raccourcies border-top, border-right, border-bottom et border-left pour définir la bordure d'un seul côté d'une boîte.

Il n'est pas nécessaire d'indiquer les trois valeurs. Toutes les valeurs que vous n'aurez pas citées seront mises par défaut. Les valeurs de départ sont medium (moyen) pour width, none (aucun) pour style, et pour color ce sera la même valeur que le color attribué à l'élément lui-même.

Quant à l'épaisseur d'une bordure moyenne, cela dépend de l'agent utilisateur.

À noter : puisque la valeur par défaut pour style est none (aucun), il est obligatoire de préciser un style si vous voulez que la bordure soit visible.

Les propriétés border-width, border-style, et border-color utilisées dans le premier exemple de bordure plus haut sont en elles-mêmes des propriétés raccourcies. Les propriétés non abrégées sont très rarement utilisées, mais elles existent :

border-width:1px 2px 3px 4px;

...est en réalité le raccourci de...

border-top-width:1px;
border-right-width:2px;
border-bottom-width:3px;
border-left-width:4px;

Les raccourcis de border-style et de border-color utilisent la même syntaxe que border-width, c'est-à-dire la syntaxe des dimensions de boîte décrite plus haut.

L'usage des différents raccourcis pour les bordures peut aussi vous économiser du code quand vous souhaitez donner aux bordures d'un élément différentes propriétés sur différents côtés. Les déclarations suivantes vont donner à un élément des bordures à droite et en bas, qui seront continues, noires, et d'un pixel d'épaisseur :

border-right:1px solid #000;
border-bottom:1px solid #000;

De même que celles-ci :

border:1px solid #000;
border-width:0 1px 1px 0;

D'abord, les bordures sur toutes les faces reçoivent un style identique, et ensuite on leur attribue des épaisseurs différentes.

Les arrière-plans

Voici une autre propriété raccourcie très utile : background. Au lieu d'utiliser background-color, background-image, background-repeat, background-attachment, et background-position pour déterminer l'aspect de l'arrière-plan d'un élément, vous pouvez utiliser tout simplement background.

background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;

...peut être réduit en...

background:#f00 url(background.gif) no-repeat fixed 0 0;

Comme pour les raccourcis des bordures, en principe l'ordre dans lequel on place les valeurs n'a pas d'importance. Mais j'ai appris que sur les premières versions de Safari, il y avait des problèmes lorsque les valeurs ne respectaient pas l'ordre indiqué dans la norme du W3C, soit :

background:color image repeat attachment position;

N'oubliez pas que si vous donnez deux valeurs pour la position, elles doivent être présentées ensemble. Si vous utilisez des valeurs en longueur ou en pourcentage, mettez d'abord la valeur horizontale.

Comme pour les propriétés de border et des côtés de bordures, il n'est pas nécessaire de préciser toutes les valeurs. Si une valeur est omise, elle prendra sa valeur par défaut. Les valeurs par défaut pour les propriétés individuelles de l'arrière-plan (background) sont les suivantes :

Cela signifie qu'il est inutile d'appliquer les raccourcis pour background si on n'attribue pas de valeur à color ou à image, car cela rendrait notre arrière-plan transparent.

J'utilise presque toujours le raccourci background pour indiquer les couleurs de fond de mes éléments, puisque background:#f00; revient au même que background-color:#f00;.

N'oubliez pas que cette commande enlèvera toute autre image d'arrière-plan qui aurait pu être indiquée dans une règle précédente. Regardez les règles suivantes :

p {
background:#f00 url(image.gif) no-repeat;
}
div p {
background:#0f0;
}

Tous les paragraphes qui ne font pas partie d'un élément div auront une image de fond, ou bien seront en rouge là où l'image ne couvre pas l'arrière-plan. Mais tous les paragraphes qui font partie d'une div auront un fond vert, et aucune image d'arrière-plan.

Polices de caractères

Comme pour la propriété background, font peut s'employer pour combiner des propriétés individuelles :

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;

On peut associer tout cela :

font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

Encore une fois, je vous recommande de suivre l’ordre établi par le W3C pour déclarer vos valeurs, c'est plus sûr.

Quand vous utilisez le raccourci font, vous pouvez omettre toutes les valeurs sauf font-size et font-family : il est nécessaire de toujours leur attribuer des valeurs, et dans cet ordre-là. Les valeurs par défaut pour les propriétés individuelles de polices sont :

font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: medium;
line-height: normal;
font-family: (cela dépend de l'agent utilisateur.);

Les listes

La propriété raccourcie pour les listes numérotées ou à puce est list-style. Personnellement, je ne l'utilise que pour donner la valeur none à la propriété list-style-type, ce qui retire aux listes toutes les puces ou les numéros.

list-style:none;

au lieu de :

list-style-type:none;

Vous pouvez aussi l'utiliser pour indiquer les valeurs des propriétés list-style-position et list-style-image. Donc, pour préciser qu’un marqueur s’affichera à l’intérieur de chaque item de la liste non ordonnée, que ce marqueur sera une image, et qu’un carré devra remplacer l’image si celle-ci n’est pas disponible, on pourrait utiliser la règle ci-dessous :

list-style:square inside url(image.gif);

est le raccourci de :

list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);

Les contours

La propriété outline (contour) est très rarement utilisée, d'abord parce qu'elle est actuellement très peu reconnue par les navigateurs : à ma connaissance, seuls Safari, OmniWeb et Opera la reconnaissent aujourd'hui [NDLR : Firefox et Chrome gèrent eux aussi les contours]. Néanmoins, en utilisant les propriétés individuelles on peut définir ainsi un contour :

outline-color:#f00;
outline-style:solid;
outline-width:2px;

...ou bien comme ceci :

outline:#f00 solid 2px;

Les contours ont certaines caractéristiques qui les rendent utiles : contrairement aux bordures, ils n'occupent pas d'espace et sont toujours tracés au-dessus d'une boîte. Ainsi, le fait d'afficher ou non les contours n'influence en rien la position ou la taille de l'élément auquel ils sont attribués, ni d'aucune autre boîte. De plus, les contours peuvent être non-rectangulaires.

Réductions des tailles de fichiers, maintenance plus simple

Voilà donc les propriétés raccourcies disponibles pour CSS 2. Si vous comparez un fichier CSS d'un site de taille conséquente avec et sans raccourcis, vous verrez une énorme différence dans la taille des fichiers. C'est déjà une bonne raison d'utiliser les raccourcis. Autre bonne raison, les fichiers réduits sont plus faciles à maintenir ; c’est en tout cas ce que j’ai remarqué.


http://www.456bereastreet.com/archive/200502/efficient_css_with_shorthand_properties/

Fiche technique

À propos de l'auteur

Roger Johansson vit en Suède, ou il travaille dans le web comme développeur/designer/rédacteur occasionnel depuis 1994.

Articles du même auteur

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

Intermédiaire

CSS

© 2001-2024 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site