Lenge har man kunnet bruke :focus til å stile hvordan fokus vises synlig på elementer. Dette er en fin måte å synliggjøre hvor man er på siden hvis man driver med for eksempel tastaturnavigasjon og et krav i disse dager med tanke på universell utforming. Ulempen med :focus derimot har vært at den viser fokus selv når man ikke ønsker det, for eksempel at man trykker på en knapp med musepekeren. I teorien har knappen fokus, men man ønsker ikke nødvendigvis å vise de stilene i det tilfellet.

Det er her :focus-visible kommer inn i bildet. Den fungerer på mange måter likt som :focus bare at den bruker litt mer logikk på å bestemme om fokus-stilene skal vises eller ikke. For eksempel viser den fokusstiler om man bruker tastaturet til å navigere og trykke på en knapp, men ikke om man bruker musepekeren.

Dette gjør det litt enklere å lage fine stiler som også tilfredstiller UU-krav, men som ikke vises altfor aggresivt. Mange har tidligere kanskje til og med skrudd av fokusstiler nettopp fordi de var “stygge”, men med :focus-visible kan vi få både pose og sekk! Og det beste av alt er at denne har vært godt støttet siden 2022.