¿Cuál de las siguientes debo usar en mis hojas de estilo?¿Es realmente necesario indicar el valor de url()?
/* Example #1: */ background-image: url(image.png);
/* Example #2: */ background-image: url("image.png");
/* Example #3: */ background-image: url('image.png');
¿Qué dice el W3C especifica como el forma correcta?
El W3C dice que las citas son opcionales, las tres formas son legales.
Las citas de apertura y cierre solo tienen que ser del mismo carácter.
Si tiene caracteres especiales en su URL, debe usar comillas o escapar de los caracteres (ver a continuación).
El formato de un valor URI es 'url (' seguido de un espacio en blanco opcional seguido de una comilla simple (') o comillas dobles (") seguido por el propio URI, seguido por un carácter de comilla simple opcional (') o comillas dobles (") seguido de un espacio en blanco opcional seguido de') '. Los dos personajes de cita deben ser iguales.
Escapar caracteres especiales:
algunos personajes que aparecen en un URI sin comillas, como paréntesis, espacios en blanco, comillas simples (') y comillas dobles ("), deben ser escapados con una barra invertida de modo que el valor URI resultante es un contador URI: '\ (', '\)'
Algunos navegadores antiguos pueden tener problemas con las URL citadas, es decir, IE Mac. – mveerman
Como una adición a lo que dijo bic72, algunos navegadores más antiguos también hacen solicitudes dobles cuando se enfrentan con URL citadas en CSS, primero solicitan "myfile.png" y luego miarchivo.png, de ahí la razón por la que evito usarlos. – Pebbl
FWIW parece que se han reescrito las especificaciones que ha enlazado desde que publicó la segunda cita. Ahora las comas no parecen requerir escapatoria. – Ben
Tres maneras son legales de acuerdo con el W3C. Si tiene caracteres especiales en el nombre (como espacio), debe usar el segundo o el tercero.
Ejemplo 2 o 3 son mejores:.
From 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 doble comilla (") seguido del URI en sí, seguido de una comilla simple opcional (') o doble comillas (") 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.
Esto es lo que la especificación W3 CSS 2.1 dice:
El formato de un valor URI es 'url (' seguido de espacio opcional blanco seguido de una comilla simple (') o dobles quote (") character seguido del URI en sí, seguido de por una comilla simple opcional (') o comillas dobles (") carácter seguido de espacio en blanco opcional seguido de') '. Los dos caracteres de comillas deben ser el mismo .
Así que todos los 3 ejemplos que se proponen son correctos, pero la que yo elegiría es el primero porque se utiliza menos caracteres y por lo tanto el archivo CSS resultante será más pequeña, lo que resulta en un menor uso de ancho de banda.
Esto podría parecer que no es importante, pero los sitios web con mucho tráfico prefieren ahorrar ancho de banda y 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 ... Par porque hay sin ventaja al no hacerlo.
Nota: es posible que tenga que 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 para usted ... (pero seguro que necesita saber todo esto si realmente está escribiendo un css optimizador: P)
No sé por qué esto se votó negativamente; para un sitio con mucho tráfico, ideas como esta hacen una gran diferencia en el transcurso de un año. –
↑ Realmente lo dudo. ¿Cuántas URL hay por css? No demasiado. Y usted ahorró 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 necesite usar barras diagonales inversas. Hay formas mucho mejores de reducir el tamaño de la web ... – kralyk
Obviamente, no es mucho ahorro, pero Andrea y Joisey siguen siendo correctos. Como un ejemplo extremo, Google solo necesita eliminar un byte de su página principal para ahorrar bastante ancho de banda;) – Pebbl
Según Google CSS Coding Style
no utilice comillas en los valores de URI (url()).
Excepción: si necesita utilizar la regla @charset, use comillas dobles, no se permiten las comillas simples.
Este documento legalizó muchas de las malas convenciones. –
@ DávidHorváth: No digo que estés equivocado, pero ¿a qué malas convenciones te refieres? –
Es mejor utilizar citas porque es recomendado por el estándar más nuevo y hay menos cajas de borde.
De acuerdo con el más reciente proyecto de CSS Values and Modules Level 3 (18 December 2015)
Una URL del editor es un puntero a un recurso y es una notación funcional denotado por
<url>. La sintaxis de un<url>es:
<url> = url(<string> <url-modifier>*)
La versión no indicada sólo se admite para legado razona y necesita reglas especiales de análisis (para secuencias de escape, etc.), siendo por lo tanto engorroso y no apoyar url-modificadores .
Eso significa que la sintaxis url(...) se supone que 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 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 introdujo para las antiguas reglas de análisis especiales, por lo que no tiene nada que ver con las comillas.
"La versión sin comillas solo es compatible por razones heredadas [..]" ¿Origen? – Semmel
https://drafts.csswg.org/css-values-3/#ref-for-url-value-7 "Nota: Las reglas de análisis especiales para la ** sintaxis ** de marca de presupuesto legacy sin sentido ** significa que ... " – sodatea
Lo leí, pero debo haberme perdido esta parte, ¡gracias! De cualquier manera, un consejo muy valioso. ¡Esta debería ser la respuesta aceptada! – Semmel
tuve:
a.pic{
background-image: url(images/img (1).jpg);
}
Me tomó un tiempo para entender que el nombre del archivo cerrado corsé estaba rompiendo 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.
posible duplicado de [CSS background-image - ¿Cuál es el uso correcto?] (Http://stackoverflow.com/questions/851724/css-background-image-what-is-the-correct-usage) –
Posible duplicado de [CSS background-image - ¿Cuál es el uso correcto?] (http://stackoverflow.com/questions/851724/css-background-image-what-is-the-correct-usage) –