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

Question

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 étant le manière correcte ?

Answer 1

Le W3C indique que les guillemets sont facultatifs, les trois façons de procéder sont légales.

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

Si votre URL contient des caractères spéciaux, 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 URI est 'url(' suivi d'un espace blanc facultatif suivi d'un guillemet simple facultatif (') ou d'un guillemet double facultatif (") suivi de l'URI lui-même, suivi d'un guillemet simple facultatif (') ou d'un guillemet double facultatif (") suivi d'un espace blanc facultatif suivi de ')'. Les deux guillemets doivent être identiques.

Échapper aux caractères spéciaux :

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

Answer 2

Il est préférable d'utiliser les guillemets parce qu'ils sont recommandés par la norme la plus récente et qu'il y a moins de cas limites.

D'après le dernier projet de l'éditeur de Valeurs et modules CSS niveau 3 (18 décembre 2015)

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

La version non cotée n'est prise en charge que pour des raisons d'héritage. et nécessite des règles d'analyse spéciales (pour les séquences d'échappement, etc.), ce qui la rend encombrante et ne permet pas de prendre en charge les modificateurs d'url.

En d'autres termes, le url(...) est censée être une notation fonctionnelle, qui prend en paramètre une chaîne de caractères et un modificateur d'url. L'utilisation de la notation "quote" (qui produit une chaîne de caractères) serait plus conforme aux normes et introduirait moins de complexité.

Le commentaire de @SimonMourier dans la réponse du haut est erroné, parce qu'il a cherché la mauvaise spécification. La réponse de @SimonMourier url-token n'est introduit que pour les anciennes règles d'analyse spéciale, c'est pourquoi il n'a rien à voir avec les guillemets.

Answer 3

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

Le format d'un URI suivi d'un espace blanc facultatif suivi d'un guillemet simple (') ou d'un guillemet double (") facultatif suivi de l'URI lui-même, suivi d'un guillemet simple (') ou d'un guillemet double (") facultatif, suivi de l'URI lui-même, suivi ou de guillemets doubles (") suivis de d'un espace blanc facultatif suivi de ')'. Les deux guillemets doivent être identiques. identiques.

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

Les trois exemples que vous avez proposés sont donc tous corrects, mais je choisirais le premier parce que vous utilisez moins de caractères et que le fichier CSS résultant sera donc plus petit, ce qui réduira l'utilisation de la bande passante.

Cela peut sembler sans importance, mais les sites web à fort trafic préfèrent économiser de la bande passante et, face à un grand nombre de fichiers css et de références url, il est logique de choisir l'option qui permet de réduire la taille du fichier... Même s'il y a aucun avantage à ne pas le faire .

Remarque : il se peut que vous deviez échapper des caractères si les urls contiennent des parenthèses, des virgules, des caractères d'espacement, des guillemets simples ou doubles. Cela peut rendre l'url plus longue qu'en utilisant simplement des guillemets (qui nécessitent moins d'échappement). C'est pourquoi il peut être utile de servir un fichier Css avec des urls sans guillemets uniquement lorsque l'échappement ne rend pas l'url plus longue que l'utilisation de guillemets (ce qui est très rare).

Cependant, je ne m'attends pas à ce qu'un être humain prenne en compte ces cas particuliers... Un optimiseur Css s'en chargerait pour vous... (mais il est certain que vous devez être au courant de tout cela si vous écrivez un optimiseur Css :P)

Answer 4

Selon le W3C, trois méthodes sont légales. Si le nom contient des caractères spéciaux (comme des espaces), il convient d'utiliser la deuxième ou la troisième méthode.

Answer 5

Mise à jour pour 2021 (la plupart des réponses datent de 2015 et avant).

Les guillemets sont facultatifs, mais certains caractères (s'ils sont utilisés) doivent être échappés.

De MDN :

Un URL, qui est une adresse relative ou absolue, ou un pointeur, vers la ressource web à inclure, ou un URI de données, éventuellement entre guillemets simples ou doubles. Les guillemets sont nécessaires si l'URL comprend des parenthèses, des espaces ou des guillemets, à moins que ces caractères ne soient échappés, ou si l'adresse comprend des caractères de contrôle supérieurs à 0x7e. Les guillemets doubles ne peuvent pas se trouver à l'intérieur de guillemets doubles et les guillemets simples ne peuvent pas se trouver à l'intérieur de guillemets simples à moins d'être échappés. Les caractères suivants sont tous valides et équivalents :

<css_property>: url("https://example.com/image.png")
<css_property>: url('https://example.com/image.png')
<css_property>: url(https://example.com/image.png)

Si vous choisissez d'écrire l'URL sans guillemets, utilisez une barre oblique inverse () avant les parenthèses, les caractères d'espacement, les guillemets simples ( ' ) et les guillemets doubles ( " ) qui font partie de l'URL.

Source : [https://developer.mozilla.org/en-US/docs/Web/CSS/url()](https://developer.mozilla.org/en-US/docs/Web/CSS/url())