La citazione del valore di url () è davvero necessaria?

Quale delle seguenti dovrei usare nei miei fogli di stile?

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

Cosa specifica il W3C come corretto ?

Il W3C afferma che le virgolette sono opzionali, tutti e tre i modi sono legali.

La citazione di apertura e chiusura deve solo essere lo stesso personaggio.

Se hai caratteri speciali nel tuo URL, dovresti usare le virgolette o sfuggire ai caratteri (vedi sotto).

Sintassi e tipi di dati di base

Il formato di un valore URI è 'url (' seguito da uno spazio bianco facoltativo seguito da un carattere di virgoletta singola opzionale (') o virgoletta doppia (") seguito dall'URI stesso, seguito da una virgoletta singola opzionale (') o virgoletta doppia (") carattere seguito da uno spazio bianco opzionale seguito da") ". I due caratteri di citazione devono essere uguali.

Fuga di caratteri speciali:

Alcuni caratteri che compaiono in un URI non quotato, come parentesi, caratteri di spazi bianchi, virgolette singole (') e virgolette doppie ("), devono essere sottoposti a escape con una barra rovesciata in modo che il valore URI risultante sia un token URI:' \ (', '\)'.

Meglio usare le virgolette perché è raccomandato dal nuovo standard e ci sono meno casi limite.

Secondo la più recente bozza del redattore di valori e moduli CSS livello 3 (18 dicembre 2015)

Un URL è un puntatore a una risorsa ed è una notazione funzionale indicata da <url>. La sintassi di a <url>è:
<url> = url( <string> <url-modifier>* )

La versione non quotata è supportata solo per motivi legacy e necessita di regole di analisi speciali (per sequenze di escape, ecc.), Pertanto è ingombrante e non supporta i modificatori di URL.

Ciò significa che la url(...)sintassi dovrebbe essere una notazione funzionale, che accetta una stringa e un modificatore url come parametri. Utilizzare la notazione delle virgolette (che produce un token stringa) sarebbe più conforme agli standard e introdurrebbe una minore complessità.

Il commento di SimonMourier nella risposta in alto è sbagliato, perché ha cercato le specifiche sbagliate. Il url-tokentipo viene introdotto solo per le regole di analisi speciali legacy, quindi è per questo che non ha nulla a che fare con le virgolette.

Ecco cosa dice la specifica W3 CSS 2.1:

Il formato di un valore URI è 'url (' seguito da uno spazio bianco facoltativo seguito da un carattere di virgoletta singola opzionale (') o virgoletta doppia (") seguito dall'URI stesso, seguito da una virgoletta singola opzionale (') o virgoletta doppia (") carattere seguito da uno spazio bianco opzionale seguito da") ". I due caratteri di citazione devono essere uguali.

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

Quindi tutti e 3 gli esempi che hai proposto sono corretti, ma quello che sceglierei è il primo perché usi meno caratteri e quindi il file CSS risultante sarà più piccolo, con un conseguente minor utilizzo della larghezza di banda.

Questo potrebbe non sembrare importante, ma i siti Web ad alto traffico preferiscono risparmiare larghezza di banda e su molti file CSS, e riferimenti url in essi hanno senso scegliere l'opzione che rende il file più piccolo ... Anche perché non ci sono vantaggi nel non farlo .

Nota: potrebbe essere necessario sfuggire ai caratteri se gli URL contengono parentesi, virgole, caratteri di spazi bianchi, virgolette singole o virgolette doppie. Questo potrebbe rendere l'URL più lungo del semplice utilizzo delle virgolette (che richiedono meno escape). Quindi potresti voler servire un file Css con URL senza virgolette solo quando l'overhead dell'escaping non rende l'url più lungo del semplice utilizzo di virgolette (che è molto raro).

Tuttavia, non mi aspetto che nessun essere umano prenda in considerazione questi casi limite ... Un ottimizzatore Css lo gestirà per te ... (ma sicuramente devi sapere tutto questo se stai effettivamente scrivendo un ottimizzatore css: P)

Tre modi sono legali secondo il W3C. Se hai nomi speciali nel nome (come spazio), dovresti usare il secondo o il terzo.

Gli esempi 2 o 3 sono i migliori:

Dal W3C: il formato di un valore URI è 'url (' seguito da uno spazio bianco facoltativo seguito da un carattere di virgoletta singola opzionale (') o di virgoletta doppia (") seguito dall'URI stesso, seguito da una virgoletta singola opzionale (') o il carattere di virgoletta doppia (") seguito da uno spazio bianco facoltativo seguito da") ". I due caratteri di citazione devono essere uguali.

Nota dalla stessa spiegazione, l'esempio 1 è accettabile, se i caratteri appropriati sono sfuggiti.

Avevo:

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

Mi ci è voluto un po 'di tempo per capire che la parentesi graffa del nome file stava infrangendo la regola.

Quindi non è obbligatorio ma, anche se la citazione non è così ben compresa dai browser più vecchi, potrebbe farti venire il mal di testa in pagine generate dinamicamente abbastanza complesse.

Secondo lo stile di codifica CSS di Google

Non utilizzare le virgolette nei valori URI (url ()).

Eccezione: se è necessario utilizzare la regola @charset, utilizzare le virgolette doppie: le virgolette singole non sono consentite.