Verifica dell'ambito delle proprietà personalizzate CSS

Questo strumento confronta il selettore che definisce una variabile con quello che la utilizza. Convalida entrambe le stringhe, gestisce gli elenchi di selettori e indica se ogni ramo di utilizzo è strutturalmente coperto da almeno un ramo di definizione. Il risultato consente di individuare una causa frequente di token di design mancanti prima di esaminare gli stili calcolati nel browser.

Indichi i punti di definizione e utilizzo

Inserisca nel campo di definizione il selettore della regola che dichiara la proprietà personalizzata, quindi nel campo di utilizzo quello della regola che richiama <code>var()</code>. Per esempio, un token definito su <code>.theme-dark .card</code> è disponibile per un utilizzo su <code>.theme-dark .card &gt; .title</code>, perché il titolo viene selezionato sotto la scheda che riceve la dichiarazione. Una definizione su <code>:root</code> è considerata globale, poiché l’elemento radice è un antenato del contenuto del documento. Entrambi i campi accettano elenchi di selettori separati da virgole. Lo strumento valuta ogni ramo di utilizzo separatamente e richiede che tutti siano coperti affinché la risposta complessiva sia vera. Indica inoltre quale ramo di definizione corrisponde a ciascun utilizzo coperto, semplificando la verifica di elenchi lunghi. Questa analisi riguarda la relazione tra selettori: non occorre incollare un foglio di stile, un blocco di dichiarazioni, il nome della proprietà o il relativo valore. Fornendo solo i due selettori pertinenti, il risultato resta concentrato sull’ambito della cascata anziché sull’ordine del codice sorgente o sulla sintassi del valore.

Interpreti la decisione sull’ambito strutturale

Lo strumento modella la parte della disponibilità di una proprietà personalizzata che può essere determinata dai soli selettori. Verifica se il selettore di definizione può identificare lo stesso elemento individuato dal selettore di utilizzo oppure un suo antenato. I requisiti composti vengono rispettati: non si presume che una definizione su <code>.card.featured</code> copra un utilizzo che menziona soltanto <code>.card</code>. I combinatori di figlio devono rimanere tali, mentre una relazione di discendenza può attraversare composti aggiuntivi nel selettore di utilizzo. Gli elenchi funzionano come alternative sul lato della definizione e come obblighi sul lato dell’utilizzo. Questo criterio volutamente prudente evita di dichiarare disponibile una variabile quando la relazione non è visibile nel testo. Le condizioni di esecuzione possono comunque modificare la cascata reale. L’ordine del codice, le regole condizionali, i confini dello Shadow DOM, gli stili inline, i livelli, la specificità, i ripristini espliciti e l’albero effettivo del documento non rientrano nell’input. Consideri un risultato vero come conferma del contenimento strutturale e consulti gli stili calcolati del browser quando deve dimostrare il valore finale in uno specifico documento renderizzato.

Corregga gli input ambigui tramite gli errori di convalida

Ogni selettore viene analizzato prima del confronto. Rami vuoti negli elenchi, parentesi quadre o tonde non bilanciate, combinatori incompleti, punteggiatura propria delle dichiarazioni, token incompleti di classe, ID o pseudoselettore e altre forme errate producono un errore di input anziché un risultato ipotetico. La distinzione è importante nell’automazione: falso significa che i selettori forniti sono validi, ma l’utilizzo richiesto non è strutturalmente coperto; un errore indica che non è stata tratta alcuna conclusione sull’ambito. Nei campi inserisca soltanto selettori. Non includa parentesi graffe, punti e virgola, dichiarazioni di proprietà personalizzate o intere regole CSS. Caratteri con escape, valori di attributo tra virgolette, selettori di attributo e pseudoclassi funzionali restano raggruppati durante la tokenizzazione, affinché virgole e combinatori interni non siano scambiati per sintassi di primo livello. L’algoritmo è deterministico, non effettua richieste di rete e applica un limite fisso alla lunghezza dell’input. Può quindi usarlo in una fase di lint, in una revisione delle modifiche o in uno script di migrazione dei token, ottenendo sempre lo stesso risultato per la stessa coppia. Se selettori relazionali avanzati dipendono da un DOM attivo, interpreti prudentemente un risultato non coperto e lo verifichi sul markup di destinazione.