Comprobar el alcance de propiedades personalizadas CSS

Este comprobador compara el selector que define una variable con el selector que la utiliza. Valida ambas cadenas, admite listas de selectores e indica si cada rama de uso está cubierta estructuralmente por alguna rama de definición. El resultado permite detectar tokens de diseño ausentes antes de depurar estilos calculados en el navegador.

Indique los puntos de definición y uso

Introduzca en el campo de definición el selector de la regla que declara la propiedad personalizada y, en el campo de uso, el selector de la regla que llama a <code>var()</code>. Por ejemplo, un token definido en <code>.theme-dark .card</code> está disponible para un uso en <code>.theme-dark .card &gt; .title</code>, porque el título se selecciona bajo la tarjeta que recibe la declaración. Una definición en <code>:root</code> se considera global, ya que el elemento raíz es antecesor del contenido del documento. Ambos campos admiten listas de selectores separadas por comas. El comprobador evalúa por separado cada rama de uso y exige que todas estén cubiertas para que la respuesta general sea verdadera. Además, indica qué rama de definición coincide con cada uso cubierto, lo que simplifica la revisión de listas largas. Esta prueba estudia la relación entre selectores; no hace falta pegar una hoja de estilos, un bloque de declaraciones, el nombre de la propiedad ni su valor. Al proporcionar solo los dos selectores pertinentes, el resultado se centra en el alcance de la cascada y no en el orden de origen o la sintaxis del valor.

Interprete la decisión de alcance estructural

El comprobador modela la parte de la disponibilidad de una propiedad personalizada que puede deducirse únicamente de los selectores. Determina si el selector de definición puede identificar el mismo elemento que el selector de uso o uno de sus antecesores. Se respetan los requisitos compuestos: no se presupone que una definición en <code>.card.featured</code> cubra un uso que solo menciona <code>.card</code>. Los combinadores de hijo deben conservar esa relación, mientras que una relación de descendiente puede abarcar compuestos adicionales en el selector de uso. Las listas actúan como alternativas en la definición y como obligaciones en el uso. Este criterio deliberadamente prudente evita afirmar que una variable está disponible cuando la relación no aparece en el texto de los selectores. Los datos de ejecución todavía pueden alterar la cascada real. El orden de origen, las reglas condicionales, los límites de Shadow DOM, los estilos en línea, las capas, la especificidad, los restablecimientos explícitos y el árbol real del documento quedan fuera de esta entrada de dos selectores. Considere un resultado verdadero como confirmación de contención estructural y consulte los estilos calculados del navegador para demostrar el valor final en un documento renderizado concreto.

Corrija entradas ambiguas mediante los errores de validación

Cada selector se analiza antes de compararlo. Las ramas vacías de una lista, los corchetes o paréntesis sin pareja, los combinadores incompletos, la puntuación propia de declaraciones, los tokens de clase, ID o pseudoselector incompletos y otras formas incorrectas producen un error de entrada en vez de un resultado supuesto. Esta diferencia es importante en la automatización: falso significa que los selectores proporcionados son válidos pero el uso solicitado no está cubierto estructuralmente; un error significa que no se ha llegado a ninguna conclusión. Mantenga en los campos únicamente selectores. No incluya llaves, puntos y coma, una declaración de propiedad personalizada ni una regla CSS completa. Los caracteres escapados, los valores de atributo entre comillas, los selectores de atributo y las pseudoclases funcionales se mantienen agrupados durante la tokenización para que sus comas y combinadores no se confundan con sintaxis de nivel superior. El algoritmo es determinista, no solicita recursos de red y aplica un límite fijo de longitud. Puede incorporarlo a una fase de lint, una revisión de cambios o una migración de tokens y obtener siempre el mismo resultado para el mismo par. Si un selector relacional avanzado depende de un DOM activo, interprete con cautela un resultado no cubierto y contrástelo con el marcado de destino.