Est-il vraiment nécessaire de citer la valeur de url ()?
Lequel des éléments suivants devrais-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 en tant que manière correcte?
Le W3C dit que les citations sont facultatives, vos trois façons de faire sont légales.
Les citations d'ouverture et de fermeture doivent simplement être le même personnage.
Si vous avez des caractères spéciaux dans votre URL, vous devez utiliser des guillemets ou les échapper (voir ci-dessous).
Syntaxe et types de données de base
Le format d'une valeur URI est 'url (' suivi d'un espace facultatif suivi d'un caractère guillemet simple (') ou double guillemet ("), suivi de l'URI lui-même, suivi d'un guillemet simple (') ou d'un guillemet double (") caractère suivi d'un espace facultatif suivi de ')'. Les deux caractères de citation doivent être les mêmes.
Échapper à des caractères spéciaux:
Certains caractères figurant dans un URI non entre guillemets, tels que les parenthèses, les espaces, les guillemets simples (') et les guillemets doubles "", doivent être précédés d'une barre oblique inverse de sorte que la valeur résultante de l'URI soit un jeton URI:'\(', '\)'.
Il vaut mieux utiliser les guillemets car ils sont recommandés par la norme la plus récente et il y a moins de cas Edge.
Selon le dernier brouillon de l'éditeur de valeurs et modules CSS niveau 3 (18 décembre 2015)
Une URL est un pointeur sur une ressource et une notation fonctionnelle désignée par
<url>. La syntaxe de<url>Est la suivante:<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 syntaxiques spéciales (pour les séquences d'échappement, etc.). Elle est donc lourde et ne prend pas en charge les modificateurs d'URL. .
Cela signifie que la syntaxe url(...) est supposée être une notation fonctionnelle, qui prend comme paramètres une chaîne et un modificateur d'URL. Utiliser la notation entre guillemets (qui produit un jeton de chaîne) serait plus conforme aux normes et introduirait moins de complexité.
Le commentaire de @ SimonMourier dans la première réponse est faux, car il a cherché la mauvaise spécification. Le type url-token N'est introduit que pour les règles d'analyse héritées spéciales, 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 facultatif suivi d'un caractère guillemet simple (') ou d'un guillemet double ("), suivi de l'URI lui-même, suivi d'un guillemet simple (') ou d'un guillemet double (") caractère suivi d'un espace facultatif suivi de ')'. Les deux caractères de citation doivent être les mêmes.
Donc, tous les 3 exemples que vous avez proposés sont corrects, mais celui que je choisirais est le premier parce que vous utilisez moins de caractères et que, par conséquent, le fichier CSS résultant sera plus petit, ce qui réduira l'utilisation de la bande passante.
Cela pourrait donner l’impression que ce n’est pas important, mais les sites Web à fort trafic préfèrent économiser la bande passante et de nombreux fichiers CSS, et il est logique de choisir l’option qui rend le fichier plus petit ... Même parce qu’il existe aucun avantage à ne pas le faire .
Remarque: vous devrez peut-être échapper des caractères si les URL contiennent des parenthèses, des virgules, des espaces, des guillemets simples ou des guillemets doubles. Cela pourrait rendre l'URL plus longue que la simple utilisation de guillemets (qui nécessitent moins d'échappements). Par conséquent, vous voudrez peut-être servir un fichier Css avec des URL sans guillemets uniquement lorsque la surcharge liée à l'échappement ne rend pas l'URL plus longue que la simple utilisation de guillemets (ce qui est très rare).
Cependant, je ne m'attendrais pas à ce qu'un être humain prenne en compte ces cas Edge ... Un optimiseur de CSS gérerait cela pour vous ... (mais vous devez absolument savoir tout cela si vous écrivez un optimiseur de CSS: P)
Selon le W3C, trois voies sont légales. Si vous avez des caractères spéciaux dans le nom (comme espace), vous devez utiliser le deuxième ou le troisième.
Exemple 2 ou 3 sont les meilleurs:
Du W3C: Le format d'une valeur URI est 'url (' suivi d'un espace facultatif suivi d'un caractère facultatif guillemet simple (') ou double guillemet (") suivi de l'URI lui-même, suivi de un caractère guillemet simple (') ou un guillemet double (") suivi d'un espace facultatif suivi de') '. Les deux caractères de citation doivent être les mêmes.
Remarque tirée de la même explication: l'exemple 1 est acceptable si les caractères appropriés sont échappés.
J'avais:
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 enfreignait la règle.
Donc, ce n’est pas une obligation, mais même si la citation n’est pas si bien comprise par les navigateurs plus anciens, cela pourrait vous éviter quelques maux de tête dans des pages générées de manière dynamique assez complexes.
Selon style de codage Google CSS
N'utilisez pas de guillemets dans les valeurs d'URI (url ()).
Exception: si vous devez utiliser la règle @charset, utilisez des guillemets doubles. Les guillemets simples ne sont pas autorisés.