¿Es realmente necesario citar el valor de url ()?

¿Cuál de los siguientes debo usar en mis hojas de estilo?

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

¿Qué especifica el W3C como la forma correcta ?

El W3C dice que las cotizaciones son opcionales, las tres formas son legales.

La cita de apertura y cierre solo debe ser el mismo personaje.

Si tiene caracteres especiales en su URL, debe usar comillas o escapar de los caracteres (ver más abajo).

Sintaxis y tipos de datos básicos

El formato de un valor de URI es 'url (' seguido de un espacio en blanco opcional seguido de un carácter opcional de comilla simple (') o comilla doble (") seguido del propio URI, seguido de una comilla simple opcional (') o comilla doble (") carácter seguido de un espacio en blanco opcional seguido de ')'. Los dos caracteres de comillas deben ser iguales.

Caracteres especiales de escape:

Algunos caracteres que aparecen en un URI sin comillas, como paréntesis, espacios en blanco, comillas simples (') y comillas dobles ("), deben escaparse con una barra diagonal inversa para que el valor de URI resultante sea un token de URI:' \ (', '\)'.

Utilice mejor las cotizaciones porque lo recomienda el estándar más nuevo y hay menos casos extremos.

Según el nuevo borrador del editor de valores y módulos CSS Nivel 3 (18 de diciembre de 2015)

Una URL es un puntero a un recurso y es una notación funcional denotada por <url>. La sintaxis de a <url>es:
<url> = url( <string> <url-modifier>* )

La versión sin comillas solo es compatible por motivos heredados y necesita reglas de análisis especiales (para secuencias de escape, etc.), por lo que es engorrosa y no admite modificadores de URL.

Eso significa que se supone que la url(...)sintaxis es una notación funcional, que toma una cadena y un modificador de URL como parámetros. Usar la notación de comillas (que produce un token de cadena) sería más compatible con el estándar e introduciría menos complejidad.

El comentario de @ SimonMourier en la respuesta superior es incorrecto, porque buscó la especificación incorrecta. El url-tokentipo solo se introduce para las reglas de análisis especiales heredadas, por lo que no tiene nada que ver con las comillas.

Esto es lo que dice la especificación W3 CSS 2.1:

El formato de un valor de URI es 'url (' seguido de un espacio en blanco opcional seguido de un carácter opcional de comilla simple (') o comilla doble (") seguido del propio URI, seguido de una comilla simple opcional (') o comilla doble (") carácter seguido de un espacio en blanco opcional seguido de ')'. Los dos caracteres de comillas deben ser iguales.

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

Entonces, los 3 ejemplos que propuso son correctos, pero el que elegiría es el primero porque usa menos caracteres y, por lo tanto, el archivo CSS resultante será más pequeño, lo que dará como resultado un menor uso de ancho de banda.

Esto puede parecer que no es importante, pero los sitios web de alto tráfico prefieren ahorrar ancho de banda y muchos archivos css, y las referencias de URL en ellos tienen sentido elegir la opción que hace que el archivo sea más pequeño ... Incluso porque no hay ventaja en no hacerlo .

Nota: es posible que deba escapar de caracteres si las URL contienen paréntesis, comas, espacios en blanco, comillas simples o comillas dobles. Esto puede hacer que la url sea más larga que solo usar comillas (que necesitan menos escape). Por lo tanto, es posible que desee servir un archivo Css con URL sin comillas solo cuando la sobrecarga del escape no hace que la url sea más larga que solo usar comillas (lo cual es muy raro).

Sin embargo, no esperaría que ningún ser humano considerara estos casos extremos ... Un optimizador de CSS se encargaría de esto por usted ... (pero seguro que necesita saber todo esto si realmente está escribiendo un optimizador de CSS: P)

Tres formas son legales según el W3C. Si tiene caracteres especiales en el nombre (como espacio), debe usar el segundo o el tercero.

Los ejemplos 2 o 3 son los mejores:

Desde W3C: El formato de un valor de URI es 'url (' seguido de un espacio en blanco opcional seguido de una comilla simple opcional (') o una comilla doble (") seguida del URI en sí, seguido de una comilla simple opcional (') o comillas dobles (") seguidas de un espacio en blanco opcional seguido de ')'. Los dos caracteres de comillas deben ser iguales.

Nota de la misma explicación, el Ejemplo 1 es aceptable, si se escapan los caracteres apropiados.

Yo tenía:

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

Me tomó un tiempo comprender que el nombre de archivo cerrado entre llaves estaba rompiendo la regla.

Por lo tanto, no es obligatorio pero, incluso si los navegadores más antiguos no entienden muy bien las citas, podría ahorrarle un poco de dolor de cabeza en páginas generadas dinámicamente bastante complejas.

Según el estilo de codificación CSS de Google

No utilice comillas en los valores de URI (url ()).

Excepción: si necesita usar la regla @charset, use comillas dobles; no se permiten comillas simples.