css - dinamicas - ¿Es realmente necesario citar el valor de url()?
css php (7)
El W3C dice que las citas son opcionales, las tres formas son legales.
La cita de apertura y cierre solo necesita 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 una comilla simple opcional ('') o un carácter de 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 la cita deben ser iguales.
Escapar de personajes especiales:
Algunos caracteres que aparecen en un URI sin comillas, como paréntesis, caracteres de espacio en blanco, comillas simples ('') y comillas dobles ("), deben escaparse con una barra invertida para que el valor de URI resultante sea un token de URI:'' / ('', ''/)''.
¿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 ?
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 una comilla simple opcional ('') o un carácter de 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 la cita deben ser iguales.
Entonces, todos los 3 ejemplos que propusiste son correctos, pero el que elegiría es el primero porque usas menos caracteres y, por lo tanto, el archivo CSS resultante será más pequeño, lo que resultará en un menor uso del 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 de URL en ellos tienen sentido elegir la opción que hace que el archivo sea más pequeño ... Incluso porque no hay ninguna ventaja en no hacerlo .
Nota: es posible que tenga que escapar los caracteres si las URL contienen paréntesis, comas, caracteres de espacio en blanco, comillas simples o comillas dobles. Esto podría 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 de escape no hace que el URL sea más largo que usar comillas (lo cual es muy raro).
Sin embargo, no esperaría que ningún ser humano considerara estos casos de borde ... Un optimizador de Css manejaría esto por usted ... (pero seguro que necesita saber todo esto si realmente está escribiendo un optimizador de css: P)
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 un carácter de comilla doble (") seguido del propio URI, seguido de una comilla simple opcional ('') o comillas dobles ("), seguido de un espacio en blanco opcional seguido de '')''. Los dos caracteres de la cita deben ser iguales.
Nota de la misma explicación, el Ejemplo 1 es aceptable, si se escapan los caracteres apropiados.
Mejor uso de las cotizaciones porque está recomendado por el estándar más nuevo y hay menos casos de borde.
Según el borrador más reciente 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 denotada por
<url>. La sintaxis de un<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 incómoda y no admite los modificadores de URL.
Eso significa que se supone que la sintaxis url(...) 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 tipo url-token solo se introduce para las reglas de análisis especiales heredadas, por lo que no tiene nada que ver con las comillas.
Según el estilo de codificación de Google CSS
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.
Tres formas son legales según el W3C. Si tiene caracteres especiales en el nombre (como espacio), debe usar el segundo o el tercero.
Tuve:
a.pic{
background-image: url(images/img (1).jpg);
}
Me tomó un tiempo entender que el corchete cerrado del nombre de archivo 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.