1 ottobre 2026
Specificità CSS in DevTools: da Chrome 151 la vedi al volo (e smetti di “fare i conti” a mente)
Un tooltip nel pannello Styles mostra la specificità calcolata: più velocità nel debug e meno ricorso a !important.
Con Chrome 151, DevTools calcola automaticamente la specificità dei selettori CSS. Basta passare il mouse su un selettore nel pannello Styles per vedere un tooltip con il valore di specificità. Una piccola feature che cambia il modo in cui debuggare conflitti di stile: meno tentativi alla cieca, più controllo sul peso dei selettori e meno necessità di usare !important.
La specificità CSS è uno di quei temi che tutti conoscono… finché non ti trovi davanti a uno stile che “non passa” e inizi a contare ID, classi e tag come se stessi risolvendo un enigma.
Da Chrome 151 c’è una scorciatoia molto concreta: DevTools ti mostra automaticamente la specificità di un selettore direttamente nel pannello Styles, senza dover fare la matematica a mano.
La novità: tooltip con specificità nel pannello Styles
Quando sei in Elements → Styles, ti basta:
- individuare una regola CSS;
- passare il mouse sul selettore.
DevTools visualizza un tooltip con la specificità calcolata per quel selettore.
Non è un “giocattolo”: è un supporto immediato mentre stai facendo debug, soprattutto quando hai più regole in competizione tra loro (CSS legacy, utility class, componenti, override in cascata, ecc.).
Perché è utile (davvero) nel debug quotidiano
Quando uno stile non viene applicato, nella pratica i motivi ricorrenti sono:
- una regola successiva lo sovrascrive (ordine in cascata);
- una regola concorrente ha specificità più alta;
- stai perdendo contro un
!important.
Avere il valore di specificità sotto al cursore riduce drasticamente il tempo di diagnosi: capisci subito se il problema è “peso” del selettore o semplice ordine/struttura.
Meno !important, più selettori “tarati”
Il beneficio editoriale più importante è culturale: invece di reagire d’istinto con !important, puoi aggiustare il selettore con intenzione.
Esempi di strategie sane (a seconda del contesto):
- rendere il selettore leggermente più specifico, ma senza arrivare a catene fragili di discendenti;
- preferire classi mirate a ID (di solito più gestibili e riusabili);
- rivedere la struttura della cascata (layer, ordine dei fogli, scoping) se stai combattendo “troppo spesso” con l’override.
La specificità “visibile” aiuta a fare questa scelta in modo informato, evitando escalation inutili che poi rendono il CSS difficile da mantenere.
Sintesi
Con Chrome 151, DevTools aggiunge un dettaglio piccolo ma ad alto impatto: la specificità CSS calcolata on-hover nel pannello Styles. È una funzione che accelera il debug, rende più trasparenti i conflitti tra regole e spinge verso una pratica più pulita: risolvere con selettori ben calibrati, non con una pioggia di !important.
Se ti capita spesso di “perdere” una regola e non capire subito perché, questa è una di quelle feature che, una volta notata, diventa parte del flusso quotidiano.