Blackotine

Quel ordre pour les valeurs de la propriété background ?

La propriété background

La propriété raccourcie background est très utile. Elle permet de définir en une ligne toutes les propriétés d’arrière-plan d’un élément (background-color, background-image, background-repeat, background-attachment, et background-position)

Un peu d’ordre !

Est-ce que l’ordre dans lequel on place les valeurs de cette propriété a une importance ?
Normalement non. Mais, des navigateurs obsolètes ou pointilleux, peuvent mal interpréter ces valeurs si elles ne respectent pas l’ordre indiqué par le W3C, soit :

background:color image repeat attachment position;

On peut cependant s’attarder sur la propriété background-position qui accepte deux valeurs et que l’on voit écrit un peu dans tous les sens. Une valeur correspond à la position horizontale et l’autre à la position verticale. Je les appellerai respectivement X et Y dans la suite de l’article.

Le W3C indique :

« If at least one value is not a keyword, then the first value represents the horizontal position and the second represents the vertical position. »

Que l’on pourrait traduire par : Si au moins une valeur n’est pas un mot-clé, alors la première valeur représente la position horizontale et le deuxième représente la position verticale.
Les mots-clé étant (left, top, right, bottom et center).

Le bon ordre est donc « X Y », valeur horizontale puis verticale, même si, dans le cas d’utilisation de mots-clé, l’ordre n’a finalement pas d’importance.

Cependant il me semble assez logique de toujours garder le même ordre quelque soit les valeurs utilisés, sinon on risque fortement de ce mélanger les pinceaux. D’accord, peut être pas sur le coup, mais en revenant des mois plus tard ou bien si une autre personne doit modifier votre feuille de style…

Pour conclure voici quelques exemples de propriétés background aux valeurs correctement ordonnées :

background:#000 url(image.gif) no-repeat;
background:#ff0000 url(image.gif) no-repeat left top;
background:transparent url(image.gif) no-repeat fixed 10px 5px;
background:url(image.gif) no-repeat scroll 1% 50%;
background:#DDD url(image.gif) no-repeat 2em .2em;
background:#CCC url(image.gif) repeat-x left 20%;
background:url(image.gif) repeat-y right 0;
background:#000;

• Publié dans : CSS
• Aucun commentaire »