Les URI en CSS : guillemets, apostrophes, ou rien du tout ?

Prenons l’exemple de la propriété CSS background-img, qui attache une image d’arrière-plan à un élément. Il existe trois syntaxes différentes pour en définir la valeur.

/* avec url() */
background-img: url(image.jpg);
 
/* avec url('') */
background-img: url('image.jpg');
 
/* avec url("") */
background-img: url("image.jpg");

J’utilise depuis presque toujours la seconde : url(''). Elle me paraît naturelle, cependant voir régulièrement sur des sites les autres syntaxes m’a amené à me documenter. J’aime les sources de première-main et c’est donc aux portes du Consortium¹ que je suis allé toquer.

Leur documentation m’a beaucoup enrichi, je dois avouer. J’ai ainsi appris que (a) les trois syntaxes sont correctes, et (b) mettre des guillemets ou des apostrophes évite d’avoir à échapper certains caractères spéciaux.

On retiendra

Dans 99% des cas, il est donc préférable de ne mettre ni guillemets ni apostrophes entre les parenthèses, pour ne pas alourdir le fichier inutilement — j’ai ouï dire que l’on aimait les pages légères et rapides par ici.

Pour le 1% restant, c’est à dire le cas ou vous travailleriez avec des URLs moches², libre à vous d’employer l’une ou l’autre des deux alternatives.

1. Avouez que ce mot en jette. ↩
2. Si vous avez des URLs contenant des parenthèses, des virgules, ou des espaces, à mon avis vous avez des problèmes plus graves que la syntaxe de votre CSS. ↩