Error Valor url() vacío
Qué pasa cuando una función url() de CSS se deja vacía, y por qué generalmente es un sobrante de una plantilla o un paso de build.
El validador marca url(), url('') o url("") — una función url() sin nada (o solo comillas vacías) dentro.
Ejemplo
/* Incorrecto: no apunta a nada */
.hero { background-image: url(); }
/* Correcto */
.hero { background-image: url("/imagenes/hero.jpg"); }Por qué importa
Un url() vacío no apunta a ningún recurso, así que el navegador no tiene nada que solicitar — para background-image simplemente no renderiza ningún fondo, y para otras propiedades que aceptan url() (src de @font-face, cursor, mask y similares) el comportamiento es el mismo: en silencio no pasa nada, sin ningún error en la consola en la mayoría de los navegadores. Esto rara vez se escribe a mano — casi siempre es el resultado de una variable de plantilla que se resolvió como una cadena vacía (un campo de CMS dejado en blanco, una ruta de asset en tiempo de build que no se resolvió) y se interpoló directamente en la hoja de estilos sin verificar si estaba vacía.
Frequently asked questions
¿Un url() vacío lanza un error de CSS?
No — es CSS sintácticamente válido (url() acepta una cadena vacía), así que se analiza sin problema y simplemente se resuelve a ningún recurso. Precisamente por eso es fácil de pasar por alto: no hay ningún error de parseo que lo señale, solo un fondo o una fuente faltante que hay que notar visualmente.
¿Es el mismo problema que una URL de imagen rota o con 404?
No — una URL que da 404 es una referencia real (aunque incorrecta) que el navegador intenta obtener, y ese fallo típicamente aparece en la pestaña de red de las herramientas de desarrollador. Un url() vacío nunca intenta ninguna solicitud en absoluto.