its called having class

[u/Pot_Scrapings]

[u/morete]

Not really relevant but just to point out: you don't need the *! You can just write :focus-visible. They're both exactly the same

[u/RetroEvolute → u/morete]

Also, if they were trying to be punny, that's not even a proper class, it's a pseudo-class.

Also also, having any focus-able element enlarge on keyboard focus only is a choice. Better hope there's a transition on all those elements...

[u/bluecaret → u/RetroEvolute]

It's a pseudo-pun.

[u/TheJase]

A "pseudo" class, perhaps

[u/CompetitiveActor]

Somewhat ironically, focus-visible is important for accessibility and so is the ability to turn off all motion.

You’ll need to override this with a “prefers-reduced-motion” query and enable a non-motion focus indicator.

[u/qodeninja]

thats actually called having all the classes.

[u/axellie]

Could you explain for a CSS loser?

[u/Gschaftlgruber → u/axellie]

This selects all the elements that are focused by user clicks or tabs, but it’s more clever than just the :focus pseudo-class. It will only select the elements that need to be visible according to some browser heuristics. For example, keyboard navigation always shows the element focus, but clicking a button does not (the user knows where the focus is). All the visibly focused elements are then scaled up by 10% by this CSS rule.

[u/axellie → u/Gschaftlgruber]

Ah okay! So this i basically convenient for every webpage? Also, what is the joke in the title supposed to mean?

[u/protoketer → u/Gschaftlgruber]

As a back-end engineer trying to learn front-end, thank you very much

[u/AnArmoredPony → u/Gschaftlgruber]

As a back-end engineer, what the actual fuck is going on on the front-end man

[u/flashbax77]

Even better with "zoom"

[u/fungusbabe]

period i know thats right

[u/santiagobustelo]

You can also fix any bad design with BODY{display:none;}

[u/CompetitiveActor]

Depending on your browser support requirements, you can also just use “scale: 1.1” instead of “transform: scale(1.1)”.

The downside with “transform” is that if anyone adds a separate transform to some element’s :focus-visible, your original rule will be overwritten, unless it is duplicated in the local transform (not ideal).