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

¿Cuál de los siguientes debería 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 citas son opcionales, las tres formas son legales.

Las citas de apertura y cierre solo necesitan ser del mismo personaje.

Si tiene caracteres especiales en su URL, debe usar comillas o escapar de los caracteres (ver a continuación).

Sintaxis y tipos de datos básicos

El formato de un valor de URI es ‘url (‘ seguido de espacio en blanco opcional seguido de un carácter de comilla simple opcional (‘) o doble comilla (“) seguido por el URI mismo, seguido de una comilla simple opcional (‘) o doble comilla (“) carácter seguido de espacio en blanco opcional seguido de ‘)’. Los dos personajes de cita deben ser iguales.

Escapar personajes especiales:

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

Es mejor usar comillas porque está recomendado por el estándar más nuevo y hay menos casos extremos.

De acuerdo con el último borrador del Editor de valores y módulos de CSS Nivel 3 (18 de diciembre de 2015)

Una URL es un puntero a un recurso y es una notación funcional indicada por . La syntax de un es:
= url( * )

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

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

El comentario de @ SimonMourier en la respuesta principal es incorrecto, porque buscó la especificación incorrecta. El tipo url-token solo se introduce para las antiguas reglas de análisis especiales, 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 espacio en blanco opcional seguido de un carácter de comilla simple opcional (‘) o doble comilla (“) seguido por el URI mismo, seguido de una comilla simple opcional (‘) o doble comilla (“) carácter seguido de espacio en blanco opcional seguido de ‘)’. Los dos personajes de cita deben ser iguales.

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

Entonces, todos los 3 ejemplos que ha propuesto son correctos, pero el que yo elegiría es el primero porque usa menos caracteres y, por lo tanto, el archivo CSS resultante será más pequeño, lo que resultará en 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 sobre muchos archivos css, y las referencias url en ellos tiene sentido elegir la opción que hace que el archivo sea más pequeño … Incluso porque no hay ventaja al no hacerlo

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

Sin embargo, no esperaría que ningún ser humano siquiera considere estos casos extremos … Un optimizador de CSS manejaría esto por usted … (pero seguro que necesita saber todo esto si 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.

El ejemplo 2 o 3 son los mejores:

Desde W3C: el formato de un valor de URI es ‘url (‘ seguido de espacio en blanco opcional seguido de un carácter de comilla simple opcional (‘) o comillas dobles (“) seguido del URI mismo, seguido de una comilla simple opcional (‘) o comillas dobles (“) carácter seguido de espacio en blanco opcional seguido de ‘)’. Los dos personajes de cita deben ser iguales.

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

De acuerdo con el estilo de encoding CSS de Google

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

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

Tuve:

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

Me tomó un tiempo entender que el nombre del archivo cerrado era romper la regla.

Por lo tanto, no es obligatorio, pero incluso si las citas no son tan bien entendidas por navegadores antiguos, podría ahorrarte un dolor de cabeza en páginas bastante complejas generadas dinámicamente.