You are doing :focus wrong (and I was too)

:focus is often, in the best case scenarios, ignored, and in the worst case scenarios, turned off.
It's a very important part of writing good CSS though! Not everyone is in your exact situation, and many people will navigate the page with the keyboard instead of their mouse. Let's make their life as easy as possible too :)
///////////////////
Zell Liew's article on styling them differently: zellwk.com/blog/style-hover-f...
---
Come and hangout, ask questions, suggest ideas, and meet some awesome people over in The Community: / discord
I have a newsletter! www.kevinpowell.co/newsletter
I've been working on some courses! Find out more: www.kevinpowell.co/courses
---
My Code Editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
Support me on Patreon: / kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell

[@6191jaken]

I watch this channel just about everyday. Most of the time, I watch just to relax. Then, some day when I need to reference something, I just come back and watch the video again. I absolutely love to relax to a cup of coffee in the morning and watch a Kevin Powell video.

[@thecashewtrader3328]

Wow wholesome

[@busyrand]

I appreciate how advanced your details are about CSS logic, and the visual aspects of Front-End Development. I wouldn't even know to think about if box-shadows or hover/focus borders affected the flow of the document. Very nice to know.

[@YariRu]

My boss always asks me to outline:none. I tell him this is wrong and we will burn in hell.

[@lawrence-dol]

I wish browsers would implement a cohesive and attractive focus indication for all components so we wouldn't have to wrestle with this nonsense.

[@blonduose]

Can you change their minds? A big part of being a good web dev and having a good webpage is accessibility for all people. But I guess you can't get far with your boss. I really hate when people don't know stuff and just want to implement their stupidity without furthering their knowledge.

[@Sollace]

tbh I always hated that outline browsers recently started putting around input elements.

[@ne9835]

@@Sollace Same, I hate outlines lol.

[@jeffreyblack666]

@@blonduose If he works in the US he could try the American's with Disabilities act, which, at least for some businesses, requires the site to be accessible to people, and that focus is an accessibility feature and thus disabling it could constitute a violation of the ADA.

[@joeldcanfield_spinhead]

I have driven myself crazy not being able to tab around my own sites because I've forgotten so much of my accessibility training. This is SO helpful (and more than a little cool.)

[@streater1327]

Wow I think I found my new favorite channel... your in-depth knowledge about other stuff that wasn't even related to the topic taught me so much! And you explain everything so well for someone like me

[@suav1148]

Thank you, Kevin! I also was doing :hover and :focus together. I learned so much! Thank you!

[@laranadesign4764]

Very helpful, thank you. At work, our customers are local government and ADA compliance (design for the visually impared, as well as other disabilities) is #1. We already are limited in our color choices (for folks who are color blind or need high contrast) so finding a nicer way to style focus is a nice option to have.

[@DerSolinski]

Thx for the small tutorial. Focus is a vital part for any web-app that is made for productivity. I personally even like to include the hot-keys directly inside the button or at least in a tool tip. You might get comments that this is ugly, but pure keyboard navigation is just the speediest way making inputs. If you provide those short-cuts where they are needed people pick them up without noticing ;-D

[@deyanbozhilov7594]

I disable :focus outline but have :focus-visible setup, that way the focus state is triggered only on keyboard navigation and not on mouse/touch which can be annoying when you have multiple buttons next to each other.

[@therealrajan]

Thankyou for mentioning this. I didnt know about :focus-visible. Its elegant and awesome!

[@abishek07]

Thank you, Kevin. You are so underrated.

[@BjarneOldrup]

That it beautiful! Both the techniques and the final result. Respect!

[@jobybejoy8219]

2rrrrrrrrrrrrrrrrrrrr

[@isaidicanshout]

"Let's jump right into it... Before we jump into it"

[@composernotes]

Thanks Kevin, great help, and actually, the solutions you came for focus would be perfectly acceptable for hover as well

[@sudeep.g]

Mahn! 5secs into the video and already diggin it! Thanks for the quality content

[@VerySadBatman]

Amazing video. Worth that notification!

[@purposepowerlove]

Fantastic video. Thanks for sharing.

[@paull8678]

100% adding this to my site tomorrow morning. Seems like a good accessibility feature too.

[@ericcorona2817]

I'm a very organized people and I want to have routines and task for the day, one of those task is "Watch a Kevin Powell vid" to learn more about CSS and HTML, web design in general. I know this is an old vid but I want to say that it's helping a lot of people nowadays. Have a nice day brouh!

[@jurikonradi8941]

Great idea! Thank you for sharing!

[@crop_circle]

Nice tutorial ! Thanks for this tip !

[@guillaumemercy1898]

Hi Kevin, thanks a lot for all your videos, they are really awesome !! I guess that you could have set the first color of the box shadow to a transparent color to create the offset. Although, I find the custom properties really really elegant.

[@kostiantynkarzhanov9216]

Very helpful! Thank you! 💛

[@Sollace]

>one of these people who just turn it off completely lol. Literally me two days ago. I realised my mistake immediately when I started thinking about tab-based navigation, and quickly added :focus in alongside a lot of my :hover rules.

[@seize2581]

Wow that's a very nice tip, thanks !

[@luiscolome75]

OMG! you made it again! Thanks milllion Kevin! Changing already all my websites! Thanks for playing around with this simple things, that at the end, make a big direference.

[@dave6012]

That’s great! Do you have a video that deals with hover and focus for mobile? I always struggle getting it right...

[@PrashanthPuranik]

There are folks who depend on the keyboard for interaction as the mouse can be unusable for them. They depend on the focus visual cues to know the focused component (interactions using the keyboard happen on the element that is focused). This I believe is the single most important reason not to remove focus styles. For mouse users, overriding focus is still not very painful, except it takes away the visual cue if one wants to interact using the keyboard still.

[@360Legion]

Awesome video!! thanks

[@dannieh9849]

Great video. I've definitely been part of the "Omg that outline looks like crap, let's remove it" without really replacing it. Accessibility has always been an after thought in all projects, unfortunately. What I'm wondering though, more in reference to this video, is how you determine which outline to use for which elements? It would've been nice if you covered that. Here you speak about a general :focus selector, and then you switch to targeting a:focus and button:focus. Aren't there other elements? Like , with other types etc. Is there a general solution for all browsers and elements that don't look like crap? In addition, would it be possible to use currentColor instead of re-assigning the CSS custom property?

[@AlexTechie]

Great stuff, as always, Kevin!

[@zieuw]

what kind of indent guides (yellow lines) are you using?

[@source144]

Hey Kevin, what didn't you just set the first box shadow to be transparent or something with a 0 opacity?

[@bobrobertsNotUrBob]

I prefer filters..contrast, brightness, saturation or invert. A small bounce animation also works, focus is more for web-accessibility, so semi blind people...so make it stand out a bit

[@Maxvm]

Great one.

[@DavidTheITGuy.]

This is really helpful

[@verawat]

You are the best for me.

[@NotKyleChicago]

Could the inner box shadow color be set to "transparent " rather than needing to set it to the var bg value?

[@gloryjaw4327]

Well they fixed the outline. For the round corner elements they have rounded outline, so no need for hardened box shadow.

[@colindante5164]

Prior to changing the default behavior of button or anchor tags I'm able to click on them without having the outline appear. However, once I change their default "focus" behavior (outline: 1px solid red;) I'm no longer able to click on those tags without the outline displaying. Is there a way around it? Thanks

[@ashektube]

Great content indeed. Quick question, what's the name of the color scheme you are using at your IDE? It looks really soothing..

[@KevinPowell]

Atom Dark One :)

[@pawelula7680]

Would be also good to mention :focus- visible to only show the focus ring when someone is not using pointer device by rather keyboard

[@JoEx2k11]

It's nice until you see the current support :(

[@Sollace]

@@JoEx2k11 I know right :( Solution I found was to do: :not([tagindex="-1"]):focus { ... }

[@user-dz8pb3ke6n]

Thanks a lot!

[@kalidoss7234]

Thanks 👍🏻

[@santhoshraghav143]

Could you please tell me the theme that u r using?

[@mtamarh]

Have you ever told by your designer to turn off the `outline`, yes i have, and that was unexpected...

[@diegocrusius]

dont know if this was intentional or not but the title got me off guard and had a good laugh. Happy sub here

[@KevinPowell]

Glad you enjoyed it and welcome aboard!

[@griffadev]

Would a transparent box shadow have worked then you wouldn't need a custom first box shadow fox each background

[@nikasbelogolov9019]

I think you can replace the background var in the box shadow to background: transparent

[@GemmaWeirs]

Which font pairs are you using in your examples?

[@sonamuhialdeen7866]

So good tutorial

[@Mraei0u]

Thank you :)

[@suelingsusu1339]

Awesome ... thanks👌👌👌👌🙏🙏🙏🙏🙏🖖🖖🖖🖖🖖

[@tomtoups]

Hey, Kevin. When you're coding real sites, do you use pixel units the same amount as you do in your examples? I rarely if ever use pixels (instead rem & em). Even my breakpoints are in rem. I understand that is the recommended approach. Do you have some knowledge I don't about why avoiding pixels all together shouldn't be a rule?

[@KevinPowell]

I use pixels for small units. Things like shadows, outlines, borders, etc. I use rem for font-size, and em for most other things (margin, padding, etc). I'll still use pixels for some other things too, but I tend to try and stick to rem/em most of the time. It sometimes depends on the project as well. But for media queries, if you're already using rem, I'd suggest to using em instead! Zell has an article on this (from 2016! but I've tested it recently and it still holds) zellwk.com/blog/media-query-units/

[@dealloc]

Pixels (or points) are useful if you want to ensure that the size is exactly the same across devices, no matter the font size that is set by the user. Rem and ems are useful in places where you want to have some arbitrary sizing, in relation to the user styles as well as other elements on your site. For example, pixels can be used for borders on buttons, or spacing between an icon and text. Rem and ems for text size, page layout spacing and other relative measures.

[@AlThePal78]

My biggest question is do you use tailwind at all?

[@victorjozwicki8179]

Is there a way to not show the outline onClick ?

[@caaiiro]

ok but i don't see a lot of people using Tab in sites, is there another application?

[@jasontravers6955]

cairo d'avila users without the ability to use a mouse (usually disability). They navigate exclusively with Keyboard. Also, blind users with ScreenReaders

[@MsVsmaster]

congrats for the video, mostly of dev use states as global and sometimes it is wrong as you want to do it only for a specific element or containers. And you are using SCSS the wrong way! jokes apart, keep up the great work!

[@jdeso3]

I have used Dreamweaver for the past 15 years. I would like to switch to VS Code but what I haven’t figure out is how to use a menu/footer template. For instance I have a 20 page website and I want the menu and footer to be the same on every page so I would make a template. In Dreamweaver you can apply that template to whatever page you want then when you make a change to that template it changes it on every page i.e. adding a new menu item. How do I do this in VS Code or any coder? I do know html and css coding only. I also think that would make a great lesson for everyone that is new to coding.

[@KevinPowell]

Something like that requires a templating language, which there are many of. PHP is one, but there are tons of static site generators that are super easy to use, it just takes a little bit of setup. I'd like to do a series on one (I built my own website using Jekyll, for example), I just haven't got around to it yet.

[@raholll]

Hi Joe, I was using dreamweaver for many years too, but then i switched to notepad++ and it is all good after all, mate :) To answer your question, it is "best option" if you learn basics of PHP... Actually for the purposes you described, you can keep using DW, and you only need to learn one function named "require', and then you can use one line of code to "require" another html file into your main html file. With HTML+CSS+PHP, your index (or other) page would look similar to this example: ... My H1 after header is here Some other content is here... PHP function 'require' will just take the contents of the other file and place it where you want it. This way you can do easy templating. You will have to name your files as index.php instead of index.html, and header.php instead of header.html, etc etc But don't worry, in PHP file you can use all HTML code as you always do, it just adds the posibility to use tags in your files, and ability to use php commands inside of your HTML files. If you rename all your .htm or .html files to .php without any changes, it will work the same. Of course, you can't just create PHP file and expect that it will work 'locally' in your browser, without using a web server. You will need php interpreter to do the work. That means you can't just drop the file to your browser and look for the result (you can do it with your .html files). You will need to upload your php files to a server and then refresh page in browser, to see the results. You also could install web server with php locally and make it work that way. I personally prefer to open the files directly from the web server in my editor, and the editor is setup automatically upload the file back to web server, after i save any changes. This you can do with Dreamweaver (maybe you are using that feature already) and it is also possible with notepad++ - I just open a file in notepad++ from winSCP, and when the change to file is detected, it is automatically uploaded back to the server. You will end up so, that you just edit the files and refresh the browser, just like Kevin Powell is manifesting in his video. Good luck :)

[@jdeso3]

@@raholll Thanks very much for a good solid answer.

[@AdilsonVCasula]

How to style it like this but on inputs??? (like on a search bar)

[@ortania]

Thank you. Great as always

[@dgloria]

Can you change the color of an item in CSS on hover by increasing the #44aabb number a bit, eg adding 255? That would be awesome. :D

[@KevinPowell]

You can do stuff like that using sass pretty easily. If you set up some custom properties and use HSL, you could probably do something pretty fun there too, which gives me an idea for a video, lol.

[@forwardingaddress6533]

Hey, what font are you using in your editor? Thanks!

[@ultramoxx1148]

Visual Studio Code But with extensions I think :)

[@spiderous]

@@ultramoxx1148 He asked for a font, not a name of the editor which is by the way visible on the top. I'm not sure but it's probably Fira Code.

[@ultramoxx1148]

Spiderous ohhhu well I misread that ._. Thx for your hint ;)

[@mymoomin0952]

This was a year ago but: the theme is Atom Dark One

[@radekpiekny2837]

Ye well how about buttons over gradients/pictures etc. This look ok on a 4kb project but that is about that. Using custom css background for every component and settign up focus requires way too much work tbh or really I mean really good architecture which most likely you wont have working on various projects. The only thing that would not look like a** is proper shadow but then again you add meaning to that button and I am not sure users would understand it is "focused" now.

[@trappedcat3615]

I personally think :hover styles should be used sparingly in many contexts, and the browser's default focus style should be preferred for the sake of user familiarity -- a uniquely styled :focus can convey something more or less than intended. Just my thoughts though.

[@KevinPowell]

Care to elaborate a little?

[@trappedcat3615]

@@KevinPowell The more universal the audience, the more the accessibility styles should be left at the initial browser value or changed with caution. Changing them can create an unnecessary new style context for people to learn. Take KZbin for example, hover styles are minimal to none and focus styles are at browser default. On the other hand, many sites don't need to be concerned about this. It just depends on the audience.

[@dealloc]

@@KevinPowell And to extend a bit further, you also overwrite user styles. If a user has set their own style in the browser for how focus state, links and other elements looks like, you overwrite these preferences, effectively disabling the accessibility that the user put themselves.

[@raholll]

@@dealloc i get your point, but i would say it only matters, if you are making the classic/traditional website... If you are creating some kind of unique progressive web app then it is different. For classic websites its probably better to keep some css values to be in a default state, but for unique projects, you may want to override all default behaviours, and makeit all look "as intended by a project designer and/or graphic designer) Kevin's tutorial is great because he is showing us how to change some default things for multiple browsers using css (if the project requires this approach) TLDR: meanwhile its not always a good idea to change the default behaviour of browser(s), sometimes it is "a must"

[@dealloc]

@@raholll It's even more important for PWA's I would say-of course depending on the target audience and environment. Apps should be scalable and responsive, similar to native apps on mobile and desktop. An example would be if you make a mobile app. Some people have difficulties reading small text, and use the accessibility tools that the mobile OS provides, such as scaling text and/or give more contrast to buttons/dimmed text. You should consider why it is a must. And if it is, make sure that the design of choice conveys the same idea and is familiar to the user, otherwise you may make it harder for people to use and understand how the app works.

[@idlevandal69]

This is gold... 🥇

[@kelvinclark3474]

You too good

[@jeffreyblack666]

Why not just set it to be transparent instead of using the background colour? Couldn't using the background colour potentially cause issues if it is transparent, where 2 layers of the same transparent colour don't appear the same as a single layer?

[@jeffreyblack666]

@@user-wr7fe4mj8s It certainly seems to make sense to me, and I can think of other use cases as well. From testing and looking at the docs, it should default to the current colour value, which by default is black. But that is only when a colour is not specified. If you do specify a colour, then that will be used. This includes via a keyword, which also accepts the keyword transparent, and it accepts rgba and hsla values as well. So you can make a transparent box shadow. It appears that the actual problem is that it doesn't actually work with transparency well based upon how the box shadows are actually made. Each box shadow is drawn from the element, with those specified earlier having a higher z-index. So if you specify a 5 px white shadow followed by a 10 px red shadow the white shadow is drawn on top and makes it look like a 5 px white ring, and then a 5 px red ring. If instead you use a transparent colour the 10 px red shadow will show through the transparent layer. And if you use the keyword transparent, then it will act quite similar to just not including that line.

[@dealloc]

Really, the best thing you can do is simply not change the appearance of focus state. User's may not be able to distinguish what is just your site's style and what is based on the user's action (also another reason, not just to remove underlines on links). While you, as a designer or developer may see an odd difference between how focus appearances are across browser, the average user use one browsers, and most likely knows what the defaults focus state looks like. Changing this could be misleading. The user may have user styles that you end up overwriting and you effectively tell the user that their styles are wrong or useless. While the anchor element will always show the focus when clicking on it, the button elements will only show the focus when you actively tab into it; however, that doesn't mean that you should use buttons as links and vice versa, since they have a different meanings with regards to schematics and accessibility. A link (or anchor) is supposed to perform a page change (where the URL changes too), whereas buttons perform some action (e.g. a form submit, or opening a modal on the same page without the need to change the URL). What you can do is change the outline color (not the entire appearance) for the focus state to match the context, so that it can be readable. E.g. you could set a default for boxes with different background to use `currentColor` (using the current text color of the parent element, e.g. the link text) and otherwise leave it as is.

[@habibmahbub1519]

how to focus with arrow keys up and down instead of tab and atl+tab

[@user-tc7bf2oe9w]

gl

[@web_dev_cz]

12:05 dunno your use case but i would use transparent

[@davidcalam3196]

If you made the smaller box-shadow transparent, the other box-shadow below it would just show through and not give you the look of an offset outline.

[@hamidrunner6531]

What theme do you use in the visual studio code?

[@Yoshi247]

5:10 the reason

[@ryandick6389]

AMAZING videos. I have shared your content with everyone I know. I am creating a business website to display lots of data and I think are the best option. Could you put out a video on or a alternative?

[@jaideepshekhar4621]

CSS Grid?

[@alejooo]

People who uses Bootstrap: What i'm doing wrong?

[@DeepSpaceX]

It's really pain in bu.. . As you dive deeper and combine languages even simple things can be exhausting.

[@KevinPowell]

Sometimes it can seem like a lot, but it's important to try not to know everything there is. Things like this are good to know, and nothing wrong with referencing back to stuff. It's not about memorizing it all! I love CSS because there is always something new to learn, but I can see where the frustration can come from as well. Keep on going though!

[@luiscolome75]

I don't think you need to learn everithing, just to remember they are there and that you can do that.

[@kerryd2060]

Don't forget other browsers...... Brave & Dissenter.

[@baggern]

Brave is Chromium and Dissenter is Chromium, but for Nazis, isn't it?

[@KevinPowell]

Most other browsers are based on Chromium (like Edge is going), so in general they'll all function the same way :)

[@heatvisuals]

Outline on buttons. OFF.

[@originalbinaryhustler3876]

This randomly popped up fro me LOve the Video, CSS WIZARD

[@HimasRafeek]

Please make a Tutorial on *Butter Cake CSS Framework* Thank you 😊

[@raholll]

sorry, but only incomptetent or lazy beings would use such a framework, *instead of* (1) learning how things really work, and (2) use those things properly... frameworks will save your time when you work on simple projects and then they exhaust all of your time when you are trying to do something "special" or "not documented by framework author"... Also, if you are not willing to do things properly, then its better to not do things at all :D

[@HimasRafeek]

@@raholll Thanks for your advice 😊, actually I'm the Creator of Butter Cake css Framework 🤗 ✌

[@HimasRafeek]

@@raholll I'll start making Tutorials about it soon Once I released v4.0, Currently v3.0, Releasing 4.0 soon 😊

[@raholll]

@@HimasRafeek haha nice.. then u know that what i say is true... you as the creator of the framework will be always able to overcome situations where you need something custom, which was not documented or implemented in the mentioned framework. But the users of your framework (the lazy or incompetent ones) will be struggling and limited to what you document and implement. My advice is to offer your help to the users, and request small amounts of money for your time invested into adding new features or explaining how to make things work. For example you could offer help for free and publish answers into FAQ or to documentation, but with ability for them to pay you for quick answers and dedication to their project(s). I think you should also remove the ads on your website, it makes it look as a scam, you can earn better money if people decide to pay to you - they will if you have something valuable to offer. Anyways good luck with your project :)

[@HimasRafeek]

@@raholll Yep agree, Yeah thanks buddy, I consider your advice 😊, Current documentation is just static site generated with Jekyll features are limited, but the Ultimate one is on it's way with alot of stuffs with Laravel, working Hard on it, Video tutorials, Even user can post stuffs etc..., I bet ButterCake going to be more easy for beginners too, Actually v4.0 is Ready Have Document 😊✌ Yep ads will be removed on next release 😊 Can't wait to release it 😍

[@Vizzent01]

lol i came here just to turn that off

[@i3looi2]

cool stuff. also basic. Problem is nobody really cares about :focus and tabbing through elements.

[@Merrinen]

Nobody really cares until an accident happens or a disease strikes to their arms and can no longer use the mouse, but can use keyboard or assistive tool to tab through elements...

[@leo848]

Who also didn't even know what focus is?

[@chiyolate]

you guys use tab? I never use tab unless my mouse is broken. 🤣🤣🤣

[@medzz123]

Accessibility

[@dealerpriest]

He keeps saying the word "out" in the weirdest way 🤔 OAT?? Is that even a dialect? 😂

[@stevenmontemayor1870]

Canadian

[@JasimGamer]

just make outline: none; eazy pezzey

[@enrico3527]

And it become the worst case xD

[@KevinPowell]

please never do that :)

[@JasimGamer]

@@KevinPowell why🤔? i do that everytime

[@KevinPowell]

@@JasimGamer as I mentioned in the video, if you do that and someone is navigating by keyboard, they have no idea where they are. I navigate forms by keyboard, but others will tab through sites. If there is nothing at all, they have no idea what link/button is selected

[@JasimGamer]

@@KevinPowell oh 😯 sorry i haven't complete the video😁

[@itsaaron6423]

why your voice feels like its licking my brain....

[@hamzahqazi8960]

First

[@Negatif34]

You speak really like sonic... it’s difficult to understand ...

[@fredyrojas7720]

First