Inspector de variables CSS y valores alternativos

Pega el CSS para analizar las referencias como texto. La revisión no resuelve ámbitos de selectores, herencia ni cascada.

Se ejecuta localmente en tu navegador
Esta herramienta procesa todos los datos localmente en tu navegador.
Código CSSLas definiciones y referencias se analizan como texto; ninguna hoja de estilo se aplica a esta página.

Cómo revisar las definiciones y las referencias var() de una hoja de estilo

Pega una hoja de estilo y la página la lee como texto: enumera las propiedades personalizadas que se definen, las que se usan mediante var() y las diferencias entre ambas: una referencia sin definición ni valor alternativo utilizable, o una definición que nada usa en el texto pegado.

Los comentarios y las cadenas entre comillas se ignoran, así que una regla comentada o un "var(--x)" dentro de content no cuentan como uso real, y la última declaración de un bloque se lee aunque le falte el punto y coma.

  1. Pega CSS en el cuadro de la izquierda o pulsa Cargar ejemplo para ver una hoja con un token sin definir, un token sin usar y un valor alternativo.
  2. Pulsa Inspeccionar variables: el mapa de propiedades personalizadas se llena con una tarjeta por token y el informe lista cada token con sus valores y su número de usos.
  3. Lee la lista de hallazgos: una referencia sin definir necesita una definición o un valor alternativo, una definición sin usar puede ser un resto y un token definido dos veces puede ser una sobrescritura intencionada.
  4. Usa Copiar para llevarte el informe o Descargar para guardarlo como css-variables-report.txt.
  5. Pulsa Limpiar para vaciar de una vez la entrada, el mapa y el informe.

Qué cuentan el informe y las métricas, qué hallazgos aparecen y qué no puede ver un análisis de texto

Qué cuenta como definición y como referencia

Una propiedad personalizada es una declaración cuyo nombre empieza por dos guiones, esté donde esté: en :root, en una clase o dentro de una media query. El valor llega hasta el primer punto y coma o hasta la llave de cierre, así que la última declaración de un bloque se lee aunque falte el punto y coma, y un valor con paréntesis como rgb(0, 0, 0) se conserva entero.

Las referencias son llamadas var() y el nombre del token distingue mayúsculas de minúsculas: --Brand y --brand son dos tokens distintos, igual que en el navegador. El nombre de la función no distingue, así que VAR(--x) también cuenta, y un var() escrito dentro del valor alternativo de otra llamada aparece por separado. Un valor alternativo solo cuenta si tiene contenido: var(--x,) deja la declaración inválida cuando falta --x, por eso se trata como una llamada sin alternativa.

Cómo leer los hallazgos y las métricas

Las métricas cuentan definiciones, referencias y los elementos a revisar; el mapa muestra por token cuántas veces se define, cuántas llamadas var() lo usan y cuántas de ellas llevan un valor alternativo utilizable, en forma de proporción. Un token definido pero no referenciado en el texto pegado se marca como no usado, y uno declarado en dos bloques se señala como posible sobrescritura; en ambos casos el mensaje indica que el alcance es el texto pegado.

Una referencia sin definición ni valor alternativo es el único hallazgo que siempre falla en el navegador, y el único que se marca como error. Un CSS sin ninguna propiedad personalizada tampoco se da por bueno: la página dice que no se encontró ninguna en lugar de afirmar que todo está cubierto.

Qué no puede ver el análisis de texto y qué queda en tu equipo

El análisis es textual a propósito: no resuelve el ámbito de los selectores, la herencia ni la cascada, y no calcula lo que usaría el navegador en tiempo de ejecución. Un token definido en otra hoja, inyectado por JavaScript o distribuido por un sistema de diseño aparecerá aquí como no definido, y no usado significa no usado en este texto, no en todo el proyecto.

Todo se ejecuta en el navegador; el CSS pegado no se sube y no se pide nada por él, y la herramienta sigue funcionando sin conexión. Copiar y Descargar permanecen inactivos hasta que existe un informe, para que un portapapeles vacío o un archivo de cero bytes no pasen por resultado.

Herramientas recientes: