¿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 forma correcta ?
El W3C dice que las cotizaciones son opcionales, las tres formas son legales.
La cita de apertura y de cierre solo debe tener el mismo carácter.
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 una comilla simple (') o doble (") opcional, seguido del propio URI, seguido de una comilla simple (') o doble opcional (") seguido de un espacio en blanco opcional seguido de ')'. Los dos caracteres de comillas deben ser iguales.
Escapar de caracteres especiales:
Algunos caracteres que aparecen en un URI sin comillas, como paréntesis, espacios en blanco, comillas simples (') y comillas dobles ("), deben tener como carácter de escape una barra invertida para que el valor del URI resultante sea un token de URI: '\(', '\)'.
Es mejor utilizar comillas porque lo recomienda el estándar más nuevo y hay menos casos extremos.
Según el borrador más reciente 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 indicada por
<url>
. La sintaxis de a<url>
es:
<url> = url( <string> <url-modifier>* )
La versión sin comillas solo se admite por razones heredadas 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 url(...)
se supone que la 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 los estándares e introduciría menos complejidad.
El comentario de @SimonMourier en la respuesta principal es incorrecto porque buscó la especificación incorrecta. El url-token
tipo solo se introduce para las reglas de análisis especiales heredadas, por eso no tiene nada que ver con las comillas.