The difference between CSS focus and focus-visible pseudo-class
source link: https://pawelgrzybek.com/the-difference-between-css-focus-and-focus-visible-pseudo-class/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
The difference between CSS focus and focus-visible pseudo-class
Published: 2022.02.09 | 2 minutes read
You can browse the Web using a mouse, keyboard and all sorts of assistive technology devices. Whichever input method you use, a clear indication of the current interactive element is crucial for a good user experience and accessibility. Default browsers stylesheets do a great job at it, but sometimes we want to be a little bit more sophisticated.
The CSS :focus and :focus-visible pseudo-classes allow us to customise the look of a focus indicator. The support for :focus-visible recently landed in Safari Technology Preview 138. We can expect it to be added in an upcoming stable release and make this feature available in all modern browsers.
CSS focus vs. focus-visible #
As mentioned before, browsers, by default, do a great job to determine if an element should indicate focus based on the element type, user interaction, years of feedback, testing and studying user interaction. This state is usually indicated using the outline.
Adding the :focus pseudo-class to an element will make it show a focus specific styles and disregard browsers heuristics. The :focus-visible, in contrast, applies custom styling only if it would be shown natively. It’s a win-win situation, a nice custom look and years of research in one CSS property.
A classic example is a button element. How often do you want to see a focus ring after clicking on a button? Rarely. How often do you want to see a focus indicator on a button when navigating a website using a keyboard? Almost always. There you go, :focus-visible and Bob’s your uncle!
CSS focus-visible is my new default #
Am I going to replace the focus pseudo-class with focus-visible? Fuck yeah! Maybe not today but eventually for sure! With this quick write-up, I hope I helped you understand the difference between these two pseudo-classes. Until next time, stay focused (pun intended) 👊
Leave a comment
Name:
Website (optional):
Twitter (optional):
GitHub (optional):
Comment:
👆 you can use Markdown here
Save my data for the next time I comment
Recommend
-
13
What is the difference between focusin / focusout versus focus / blur in jQuery? advertisements This question already has an answer here...
-
13
Using CSS :target Pseudo-Class To Toggle Element Display By Ben Nadel on January 21, 2021 The other day, I was listening - I think - to the
-
4
202432 – focus pseudo class should match a shadow host whose shadow tree contains the focused element WebKit Bugzilla Bug 202432: focus pseudo class should match a shadow host whose s...
-
14
Browser support: focus pseudo classes This site is updating in the open It looks like stylesheets are missing, but actually I’m working on this site openly and I just started to redesign it. Things will look a little...
-
7
The difference between the wrapper class reference and the user defines the class reference in java advertisements Suppose I have a custom cla...
-
10
The Difference Between a Class and a Prototype in JavaScriptJuly 14th 2021 new story8
-
5
Knoldus Blog Audio Reading Time: 4 minutes In this blog we’ll go through the practical difference between the
-
12
In Java, what’s the difference between an object and a class? This kind of question is a test of your knowledge of the terminology associated with object oriented programming. You should note that this question could just as we...
-
11
What’s the difference between a primitive type and a class type in Java? Every variable in Java has a type, which essentially tells Java how that variable should be treated, and how much memory should be allocated for that va...
-
11
The Focus-Indicated Pseudo-class :focus-visible Jan 31, 2022 by Manuel Rego...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK