È necessario quotare il valore di url()?

Question

Quale dei 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'); 

Che cosa significa il W3C specifica come il modo corretto?

Answer 1

Il W3C dice che le virgolette sono opzionali, tutte e tre le vie sono legali.

Il preventivo di apertura e chiusura deve essere lo stesso.

Se si dispone di caratteri speciali nel proprio URL, è necessario utilizzare le virgolette o sfuggire ai caratteri (vedere di seguito).

Syntax and basic data types

Il formato di un valore di URI è 'url (' seguito da uno spazio bianco opzionale seguito da un apostrofo (') o doppie virgolette (") seguito dalla URI stesso, seguita con un carattere opzionale di virgoletta singola (') o doppia citazione (") seguito da uno spazio bianco opzionale seguito da') '. I due caratteri di citazione devono essere uguali.

Escaping caratteri speciali:

alcuni personaggi che compaiono in un URI non quotati, come ad esempio parentesi, spazi vuoti, virgolette singole (') e le doppie virgolette ("), devono essere scappati con un backslash in modo che il valore URI risultante è un token URI: '\ (', '\)'

Answer 2

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

Answer 3

Esempio 2 o 3 sono migliori.

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

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

Answer 4

Ecco cosa le specifiche W3 CSS 2.1 dice:

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

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

Quindi tutti i 3 esempi proposti sono corrette, ma quello che avrei scelto è il primo, perché si utilizzano meno caratteri e quindi il file CSS risultante sarà più piccolo, con conseguente minor utilizzo della larghezza di banda.

Questo potrebbe non essere importante, ma i siti Web ad alto traffico preferiscono risparmiare larghezza di banda e molti file CSS e riferimenti URL in essi ha senso scegliere l'opzione che rende il file più piccolo ... Even perché non c'è il vantaggio di nel non farlo.

Nota: potrebbe essere necessario caratteri di escape se gli URL contengono parentesi, virgole, caratteri di spazio vuoto, apici singoli o doppi apici. Questo potrebbe rendere l'url più lungo delle semplici virgolette (che richiedono meno escape). Quindi si potrebbe desiderare di servire un file CSS con gli URL senza le virgolette solo quando il sovraccarico di fuga non rende l'url più di un semplice utilizzando citazioni (che è molto raro).

Tuttavia non mi aspetto che nessun essere umano consideri questi casi limite ... Un ottimizzatore Css gestirà questo per voi ... (ma sicuramente dovete sapere tutto di questo se in realtà state scrivendo un css ottimizzatore: P)

Answer 5

Secondo Google CSS Coding Style

non utilizzare le virgolette nei valori di URI (url()).

Eccezione: Se si ha bisogno di usare la regola @charset, uso non sono consentiti doppie virgolette-singole virgolette.

Answer 6

Utilizzare le virgolette perché è raccomandato dallo standard più recente e ci sono meno casi limite.

Secondo il più recente progetto del redattore di CSS Values and Modules Level 3 (18 December 2015)

Un URL è un puntatore ad una risorsa ed è una notazione funzionale, indicato con <url>. La sintassi di un <url> è:
<url> = url(<string> <url-modifier>*)

la versione non menzionata è supportato solo per ragioni legacy e necessita regole speciali parsing (per sequenze di escape, ecc), essendo così ingombrante e non sostenere url modificatori .

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

@ Il commento di SimonMourier nella risposta principale è errato, perché ha cercato la specifica sbagliata. Il tipo url-token viene introdotto solo per le regole di analisi speciali legacy, quindi è per questo che non ha nulla a che fare con le virgolette.

Answer 7

ho avuto:

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

Mi c'è voluto un po 'per capire che il nome del file chiusa parentesi graffa stava rompendo la regola.

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