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


235

¿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 ?


Respuestas:


243

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:' \ (', '\)'.


99
Algunos navegadores antiguos pueden tener problemas con las URL citadas, a saber, IE Mac.
mveerman

55
Además de lo que dice bic72, algunos navegadores antiguos también realizan solicitudes duales cuando se enfrentan a URL citadas en CSS, primero solicitan "myfile.png" y luego myfile.png, de ahí la razón por la que evito usarlos.
Pebbl

FWIW la especificación a la que enlaza parece haber sido reescrita desde que publicó la segunda cita. Ahora las comas no parecen requerir escapar.
Ben

@pebbl: tienes razón, y los navegadores más antiguos incluyen la versión más reciente de Chrome en Mac.
Daniel Beardsley

77
El último borrador del editor de CSS 3 (mayo de 2015) ya no parece permitir citas: dev.w3.org/csswg/css-syntax (verifique el url-tokenesquema del ferrocarril) mientras que la recomendación del candidato actual (febrero de 2014) sí: w3.org/TR / css-syntax-3 Supongo que quieren promover el uso de la secuencia de escape en lugar de citas
Simon Mourier

34

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.


"La versión sin comillas solo es compatible por motivos heredados [..]" ¿Fuente?
Semmel

55
drafts.csswg.org/css-values-3/#ref-for-url-value-7 "Nota: Las reglas de análisis especiales para la sintaxis heredada entre comillas-menos <url> significa que ..."
sodatea

Lo leí pero debí haberme perdido esta parte. ¡Gracias! De cualquier manera, un consejo muy valioso. ¡En mi opinión, esta debería ser la respuesta aceptada!
Semmel

La versión 2020 del documento referenciado ya no parece mencionar 'la versión no citada solo es compatible por razones heredadas'.
Jahmic

11

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)


55
No sé por qué esto fue rechazado; Para un sitio de alto tráfico, ideas como esta hacen una gran diferencia en el transcurso de un año.
Joisey Mike

77
↑ Realmente lo dudo. ¿Cuántas URL hay por css? No demasiado. Y acabas de ahorrar DOS bytes (en ascii o utf-8) en cada uno. Además, en realidad podría hacer que la URL sea más larga, ya que es posible que deba usar barras invertidas. Hay formas mucho mejores de reducir el tamaño de la web ...
kralyk

1
Obviamente no es un gran ahorro, pero Andrea y Joisey todavía tienen razón. Como ejemplo extremo, Google solo necesita eliminar un byte de su página de inicio para ahorrar bastante ancho de banda;)
Pebbl

2
@kralyk ... Por lo tanto, lo mejor que puede hacer es no usar comillas cuando no sea necesario ... Por lo tanto, es mejor usar comillas cuando tiene una URL con más de dos paréntesis, comas, espacios en blanco, comillas simples o comillas dobles . Sin embargo, lo que nunca encontré en un archivo Css ... Y estoy bastante seguro de que nunca lo haré :) (actualizó la respuesta)
Andrea Zilio

18
Los programadores que se preocupan por la optimización de caracteres individuales a partir de sus códigos fuente, se están perdiendo el barco por completo: casi nunca optimizarán nada en absoluto. De todos modos, siempre uso comillas dobles. Soy un hombre de consistencia.
ChaseMoskal

6

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


3

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.


1

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.


0

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.


2
@ DávidHorváth: No digo que te equivoques, pero ¿a qué malas convenciones te refieres?
Sam Dutton
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.