Est-il vraiment nécessaire de citer la valeur de url ()?

Lequel des éléments suivants dois-je utiliser dans mes feuilles de style?

/* Example #1: */ background-image: url(image.png);
/* Example #2: */ background-image: url("image.png");
/* Example #3: */ background-image: url('image.png');

Qu'est-ce que le W3C spécifie comme la bonne façon ?

Le W3C dit que les citations sont facultatives, vos trois voies sont légales.

Les devis d'ouverture et de fermeture doivent simplement être du même caractère.

Si vous avez des caractères spéciaux dans votre URL, vous devez utiliser des guillemets ou échapper les caractères (voir ci-dessous).

Syntaxe et types de données de base

Le format d'une valeur d'URI est 'url (' suivi d'un espace blanc facultatif suivi d'un caractère de guillemet simple (') ou de guillemet double (") facultatif suivi de l'URI lui-même, suivi d'un guillemet simple (') ou de guillemet double facultatif (") caractère suivi d'un espace blanc facultatif suivi de") ". Les deux guillemets doivent être identiques.

Échapper les caractères spéciaux:

Certains caractères apparaissant dans un URI sans guillemets, tels que les parenthèses, les espaces blancs, les guillemets simples (') et les guillemets doubles ("), doivent être échappés avec une barre oblique inverse afin que la valeur d'URI résultante soit un jeton d'URI:' \ (', '\)'.

Mieux utiliser les guillemets car il est recommandé par la norme la plus récente et il y a moins de cas marginaux.

Selon la dernière version de l'éditeur des valeurs et modules CSS niveau 3 (18 décembre 2015)

Une URL est un pointeur vers une ressource et est une notation fonctionnelle désignée par <url>. La syntaxe de a <url>est:
<url> = url( <string> <url-modifier>* )

La version non citée n'est prise en charge que pour des raisons héritées et nécessite des règles d'analyse spéciales (pour les séquences d'échappement, etc.), ce qui est encombrant et ne prend pas en charge les modificateurs d'URL.

Cela signifie que la url(...)syntaxe est censée être une notation fonctionnelle, qui prend une chaîne et un modificateur d'URL comme paramètres. Utiliser la notation de citation (qui produit un jeton de chaîne) serait plus conforme aux normes et introduirait moins de complexité.

@ Le commentaire de SimonMourier dans la réponse du haut est faux, car il a cherché la mauvaise spécification. Le url-tokentype n'est introduit que pour les règles d'analyse spéciales héritées, c'est pourquoi il n'a rien à voir avec les guillemets.

Voici ce que dit la spécification W3 CSS 2.1:

Le format d'une valeur d'URI est 'url (' suivi d'un espace blanc facultatif suivi d'un caractère de guillemet simple (') ou de guillemet double (") facultatif suivi de l'URI lui-même, suivi d'un guillemet simple (') ou de guillemet double facultatif (") caractère suivi d'un espace blanc facultatif suivi de") ". Les deux guillemets doivent être identiques.

Source: http://www.w3.org/TR/CSS21/syndata.html#uri

Donc, les 3 exemples que vous proposez sont corrects, mais celui que je choisirais est le premier car vous utilisez moins de caractères et donc le fichier CSS résultant sera plus petit, ce qui entraînera une utilisation moindre de la bande passante.

Cela peut ne pas sembler important, mais les sites Web à fort trafic préfèrent économiser de la bande passante et plus de nombreux fichiers CSS, et les références d'URL dedans, il est logique de choisir l'option qui rend le fichier plus petit ... Même parce qu'il n'y a aucun avantage en ne le faisant pas .

Remarque: vous devrez peut-être échapper des caractères si les URL contiennent des parenthèses, des virgules, des espaces blancs, des guillemets simples ou des guillemets doubles. Cela pourrait rendre l'URL plus longue que l'utilisation de guillemets (qui nécessitent moins d'échappement). Par conséquent, vous souhaiterez peut-être servir un fichier Css avec des URL sans guillemets uniquement lorsque la surcharge de l'échappement ne rend pas l'URL plus longue que l'utilisation de guillemets (ce qui est très rare).

Cependant, je ne m'attendrais pas à ce qu'un être humain considère même ces cas de bord ... Un optimiseur Css s'en occuperait pour vous ... (mais vous devez certainement savoir tout cela si vous écrivez réellement un optimiseur css: P)

Trois façons sont légales selon le W3C. Si vous avez des caractères spéciaux dans le nom (sous forme d'espace), vous devez utiliser le deuxième ou le troisième.

Les exemples 2 ou 3 sont les meilleurs:

Du W3C: Le format d'une valeur d'URI est 'url (' suivi d'un espace blanc facultatif suivi d'un caractère de guillemet simple facultatif (') ou de guillemet double (") suivi de l'URI lui-même, suivi d'un guillemet simple facultatif (') ou des guillemets doubles (") suivis d'un espace blanc facultatif suivi de") ". Les deux guillemets doivent être identiques.

Notez à partir de la même explication, l'exemple 1 est acceptable, si les caractères appropriés sont échappés.

J'ai eu:

a.pic{
    background-image: url(images/img (1).jpg);
}

Il m'a fallu un certain temps pour comprendre que l'accolade fermée du nom de fichier violait la règle.

Ce n'est donc pas obligatoire mais, même si la citation n'est pas si bien comprise par les anciens navigateurs, cela pourrait vous éviter des maux de tête dans des pages générées dynamiquement assez complexes.

Selon Google CSS Coding Style

N'utilisez pas de guillemets dans les valeurs URI (url ()).

Exception: si vous devez utiliser la règle @charset, utilisez des guillemets doubles - les guillemets simples ne sont pas autorisés.