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

235

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 ?

Poru
la source
5
doublon possible de l' image d'arrière-plan CSS - Quelle est la bonne utilisation?
Robert MacLean

Réponses:

243

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:' \ (', '\)'.

Pekka
la source
9
Certains navigateurs plus anciens peuvent avoir des problèmes avec les URL citées, à savoir IE Mac.
mveerman
5
En plus de ce que dit bic72, certains navigateurs plus anciens font également des demandes doubles lorsqu'ils sont confrontés à des URL citées en CSS, d'abord ils demandent "myfile.png" puis myfile.png - d'où la raison pour laquelle j'évite de les utiliser.
Pebbl
FWIW La spécification à laquelle vous créez un lien semble avoir été réécrite depuis que vous avez publié le deuxième devis. Maintenant, les virgules ne semblent pas nécessiter de s'échapper.
Ben
@pebbl - Vous avez raison, et les anciens navigateurs incluent la dernière version de Chrome sur mac.
Daniel Beardsley
7
Le dernier projet de rédaction de CSS 3 (mai 2015) ne semble plus autoriser les citations: dev.w3.org/csswg/css-syntax (vérifier le url-tokenschéma du chemin de fer) tandis que la recommandation actuelle du candidat (février 2014) le permet: w3.org/TR / css-syntax-3 Je suppose qu'ils veulent promouvoir l'utilisation de la séquence d'échappement au lieu des guillemets
Simon Mourier
34

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.

sodatea
la source
"La version non citée n'est prise en charge que pour des raisons héritées [..]" Source?
Semmel
5
drafts.csswg.org/css-values-3/#ref-for-url-value-7 "Remarque: Les règles d'analyse spéciales pour la syntaxe héritée sans guillemet <url> signifient que…"
sodatea
Je l'ai lu mais j'ai dû manquer cette partie - merci! Quoi qu'il en soit - des conseils très précieux. À mon humble avis, cela devrait être la réponse acceptée!
Semmel
La version 2020 du document référencé ne semble plus mentionner `` la version non citée n'est prise en charge que pour des raisons héritées ''.
Jahmic
11

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)

Andrea Zilio
la source
5
Je ne sais pas pourquoi cela a été rejeté; pour un site à fort trafic, des idées comme celle-ci font une grande différence au cours d'une année.
Joisey Mike
7
↑ J'en doute vraiment. Combien d'URL y a-t-il par css? Pas trop. Et vous venez d'épargner DEUX octets (en ascii ou utf-8) dans chacun. De plus, vous pouvez réellement allonger l'URL, car vous devrez peut-être utiliser des barres obliques inverses. Il existe de bien meilleures façons de réduire la taille du Web ...
kralyk
1
Évidemment, ce n'est pas beaucoup d'économies, mais Andrea et Joisey ont toujours raison. À titre d'exemple extrême, Google n'a besoin que de supprimer un octet de sa page d'accueil pour économiser un peu de bande passante;)
Pebbl
2
@kralyk ... Par conséquent, la meilleure chose à faire est de ne pas utiliser de guillemets lorsqu'ils ne sont pas nécessaires ... Il est donc préférable d'utiliser des guillemets lorsque vous avez une URL avec plus de deux parenthèses, virgules, caractères blancs, guillemets simples ou guillemets doubles . Ce que je n'ai jamais rencontré dans un fichier Css ... Et je suis sûr que je ne le ferai jamais :) (mise à jour de la réponse)
Andrea Zilio
18
Les programmeurs qui se préoccupent de l'optimisation de caractères individuels à partir de leurs codes source, manquent complètement le bateau - ils n'optimiseront presque jamais rien du tout. Quoi qu'il en soit, j'utilise toujours des guillemets doubles. Je suis un homme cohérent.
ChaseMoskal
6

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.

Y. Shoham
la source
3

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.

Nick Craver
la source
1

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.

TechNyquist
la source
0

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.

Junhao
la source
2
@ DávidHorváth: Je ne dis pas que vous vous trompez, mais quelles mauvaises conventions voulez-vous dire?
Sam Dutton