{"id":269594,"date":"2018-04-08T05:56:21","date_gmt":"2018-04-08T12:56:21","guid":{"rendered":"http:\/\/css-tricks.com\/?p=269594"},"modified":"2018-04-08T05:56:21","modified_gmt":"2018-04-08T12:56:21","slug":"focus-visible-and-backwards-compatibility","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/focus-visible-and-backwards-compatibility\/","title":{"rendered":"`:focus-visible` and backwards compatibility"},"content":{"rendered":"<p>Patrick H. Lauke covers the future CSS pseudo class <code>:focus-visible<\/code>. We&#8217;re in <a href=\"https:\/\/caniuse.com\/#feat=css-focus-visible\" rel=\"noopener\">the early days<\/a> of browser support, but it aims to solve an awkward situation:<\/p>\n<blockquote><p>&#8230; focus styles can often be undesirable when they are applied as a result of a mouse\/pointer interaction. A classic example of this are buttons which trigger a particular action on a page, such as advancing a carousel. While it is important that a keyboard user is able to see when their focus is on the button, it can be confusing for a mouse user to find the look of the button change after they clicked it \u2013 making them wonder why the styles \u201cstuck\u201d, or if the state\/functionality of the button has somehow changed.<\/p><\/blockquote>\n<p>If we use <code>:focus-within<\/code> <em>instead<\/em> of <code>:focus<\/code>, that gives the browser the freedom to <em>not<\/em> apply focus styles when it determines it&#8217;s unnecessary, but still does when, for example, the element is tabbed to.<\/p>\n<p>The scary part is &#8220;instead of&#8221;. We can just up and switch with browser support as it is. Not even @supports can help us. But Patrick has some ideas.<\/p>\n<p><!--more--><\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">button:focus { \/* some exciting button focus styles *\/ }\r\nbutton:focus:not(:focus-visible) {\r\n    \/* undo all the above focused button styles\r\n       if the button has focus but the browser wouldn't normally\r\n       show default focus styles *\/\r\n}\r\nbutton:focus-visible { \/* some even *more* exciting button focus styles *\/ }<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Patrick H. Lauke covers the future CSS pseudo class :focus-visible. We&#8217;re in the early days of browser support, but it aims to solve an awkward situation: &#8230; focus styles can often be undesirable when they are applied as a result of a mouse\/pointer interaction. A classic example of this are buttons which trigger a particular [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[1406,1262],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":278554,"url":"https:\/\/css-tricks.com\/keyboard-only-focus-styles\/","url_meta":{"origin":269594,"position":0},"title":"Keyboard-Only Focus Styles","date":"November 14, 2018","format":false,"excerpt":"Like Eric Bailey says, if it's interactive, it needs a focus style. Perhaps your best bet? Don't remove the dang outlines that focusable elements have by default. If you're going to rock a button { outline: 0; }, for example, then you'd better do a button:focus { \/* something else\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/keyboard-focus.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":377702,"url":"https:\/\/css-tricks.com\/managing-user-focus-with-focus-visible\/","url_meta":{"origin":269594,"position":1},"title":"Managing User Focus with :focus-visible","date":"April 5, 2024","format":false,"excerpt":"This is going to be the 2nd post in a small series we are doing on form accessibility. If you missed the first post, check out Accessible Forms with Pseudo Classes. In this post we are going to look at :focus-visible and how to use it in your web sites!\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"focus-visible css","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/04\/focus-visible.png?fit=1200%2C469&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":357373,"url":"https:\/\/css-tricks.com\/standardizing-focus-styles-with-css-custom-properties\/","url_meta":{"origin":269594,"position":2},"title":"Standardizing Focus Styles With CSS Custom Properties","date":"December 10, 2021","format":false,"excerpt":"Take two minutes right now and visit your current project in a browser. Then, using only the Tab key, you should be able to navigate between interactive elements including buttons, links, and form elements. If you are sighted, you should be able to visually follow the focus as it jumps\u2026","rel":"","context":"In &quot;2021 End-of-Year Thoughts&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/keyboard-enter-focus.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":323313,"url":"https:\/\/css-tricks.com\/the-focus-visible-trick\/","url_meta":{"origin":269594,"position":3},"title":"The :focus-visible Trick","date":"October 16, 2020","format":false,"excerpt":"Always worth repeating: all interactive elements should have a focus style. That way, a keyboard user can tell when they have moved focus to that element. But if you use :focus alone for this, it has a side effect that a lot of people don't like. It means that when\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/focus-visible-trick.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":268452,"url":"https:\/\/css-tricks.com\/focusing-on-focus-styles\/","url_meta":{"origin":269594,"position":4},"title":"Focusing on Focus Styles","date":"March 29, 2018","format":false,"excerpt":"Not everyone uses a mouse to browse the internet. If you\u2019re reading this post on a smartphone, this is obvious! What\u2019s also worth pointing out is that there are other forms of input that people use to get things done. With these forms of input comes the need for focus\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/img.youtube.com\/vi\/GQKEE9nI1lk\/0.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":335856,"url":"https:\/\/css-tricks.com\/weekly-platform-news-focus-rings-donut-scope-ditching-em-units-and-global-privacy-control\/","url_meta":{"origin":269594,"position":5},"title":"Weekly Platform News: Focus Rings, Donut Scope, More em Units, and Global Privacy Control","date":"March 4, 2021","format":false,"excerpt":"In this week's news, Chrome tackles focus rings, we learn how to get \"donut\" scope, Global Privacy Control gets big-name adoption, it's time to ditch pixels in media queries, and a snippet that prevents annoying form validation styling. Chrome will stop displaying focus rings when clicking buttons Chrome, Edge, and\u2026","rel":"","context":"In &quot;Weekly Platform News&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/wpn-20210304.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/269594"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=269594"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/269594\/revisions"}],"predecessor-version":[{"id":269595,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/269594\/revisions\/269595"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=269594"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=269594"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=269594"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}