Four years in frontend and still learning new stuff about css. Thanks Kevin!
@CZghost
Жыл бұрын
One thing about the "focus" state and the "outline" property is that you can actually use "outline: none" in a CSS reset (the asterisk notation: "* { /* reset properties go there */ }"). But you still have to keep in mind to then re-add the outline to every single focusable element, which makes it quite tedious. Often times webdev designers want to clear the padding of the entire page so they can place some sort of wrapper behind it, and clear border of an image inside of a link, which was the default styling in Internet Explorer (unlike other browsers). Since Internet Explorer is discontinued now, that shouldn't be a problem. The asterisk CSS reset is pretty popular, but I'm not really a big fan of it, it's just a very lazy way to make a web page.
@KevinPowell
Жыл бұрын
Yup, super lazy, and I've been on way too many sites where I can't keyboard navigate at all because I have no idea where I am on the page. I'm an abled user, and it annoys me, I can only imagine for users who primarily, or only, navigate with the keyboard.
@Noam-Bahar
Жыл бұрын
@@KevinPowell* { display: none; }
@piyushaggarwal5207
Жыл бұрын
I was having issues with focus on button. Now, going to use focus-visible. Awsesome!
@petarkolev6928
Жыл бұрын
Kevin, after all these years of watching your videos and learning something new every time you didn't stopped to amaze me, not even once!
@gasparsigma
Жыл бұрын
Nice. I've been using focus for years and never knew this difference to focus-visible
@lukas.webdev
Жыл бұрын
Awesome as always! Keep it up!😉🔥
@bhishek_
Жыл бұрын
You solved my problems regarding focus states. Thank you sir ❤
@Escko
Ай бұрын
another great one! Thanks Kevin, much love!
@syonukr
Жыл бұрын
Hey, Kevin. Thank you as always. A small tip, tweak your sound offset to a bit ahead. Right now it’s late. 🤪
@heslami32
Жыл бұрын
Very useful Kevin. Thanks for sharing. Keeping these things in mind while coding, improves accessibility for users.
@DamienWhite
Жыл бұрын
I literally spent ages Googling this the other day, what a coincidence
@TheKer7
Жыл бұрын
1000th like! Felt real good. Love the content, very relevant to me as I write CSS almost every day.
@chainedbeauty
Жыл бұрын
Exactly what i was looking for today! Thanks for keeping it clear and simple!
@vitorgobatogercov8879
Жыл бұрын
Thanks Kevin! This came right on time :) great video as always
@JimKernix
Жыл бұрын
Excellent - more videos like this please!
@wonderbreadwilliams
11 ай бұрын
Thanks for doing what you do. Your help is greatly appreciated.
@WickyDesign
Жыл бұрын
Awesome! Thanks for the tutorial!
@shakofarhad876
Жыл бұрын
Thank you for the videos. I have learned a lot throughout the years from you! I have been using :focus:not(:active) to not have lingering focus styles. How would you rate this vs focus-visible? Would you change it all to focus-visible instead?
@koora-maroc12
21 сағат бұрын
I think to apply these pseudo-elements to a div you need to make the tab-index = 1
@atetraxx
Жыл бұрын
Great stuff subscribed
@kacperkonieczny7333
Жыл бұрын
0:32 IIRC you said it's better to use "outline: transparent" than "outline: none" because none will never display an outline and transparent will display it in high-contrast mode. I am right?
@KevinPowell
Жыл бұрын
if you really want to remove it, then yeah, having a transparent color is highly recommended :)
@lukas.webdev
Жыл бұрын
I'm pretty sure you are... 😉
@VeitLehmann
Жыл бұрын
Yep, also very handy if you want to style the focus state with e. g. a box-shadow for a different visual effect in normal vision mode. Box-shadows are not shown in high-contrast mode iirc. So outline-color: transparent will ensure the focus-styles to work for high-contrast users.
@KayinAngel
Жыл бұрын
Adjacent to something I'm trying to do right now: is there a focus-within event listeners in JS? Im trying to figure out how to get a bag item with a sub menu to open (and set aria attributes) when tabbing onto the item and also closing when tabbing out. And for whatever reason I feel like i'm over engineering it.
@KevinPowell
Жыл бұрын
Good question. I'm not entirely sure tbh. With JS you can check for focus though, with active element, and then you can find the parent or whatever you need from there. Little bit more work though
@KayinAngel
Жыл бұрын
@@KevinPowell So, I'm trying to make a nav bar component with fly-out sub menus. The structure is just an unordered list with a child unordered list for the sub menu. However, I actually have three three requirements that are doing my head in: 1) the sub menus appear on hover. 2) the trigger may or may not be an active link to a page (hence the hover) 3) has to be accessible with tab navigation - meaning, it wouldn't open the menu on 'enter' because that would sometimes be a top level link. it would have to show the sibling UL menu when it's focused. This seems simple in theory, but I'm running into things like "I need it to expand the item on LI hover, not the child A/SPAN because I need the thing to stay open when hovering the submenu, but also focus is happening on the A/SPAN so how do I treat that as a focus...." Also, I'm trying to handle toggling aria attributes correctly. I haven't found anyone doing quite this exact UI behaviour. But yeah, i figured I'd do something with active element. Thanks.
@xilliman
3 ай бұрын
Hey Kevin. It seems, that there is no difference with focus-visible and focus on input elements anymore. Buttons still work. Is this intentional and is there a workaround to eg show an outline on inputs only when navigating with a keyboard?
@jewelofnile2424
Жыл бұрын
As a summary can I use focus-visible everywhere a user clicks and will it be safe? Are there any cases where it won't be working?
@spatialoptic
10 ай бұрын
Nice!!!
@niklasnilsson5942
7 ай бұрын
I have a use-case for the :focus and the :focus-visible where i need to have different styles to them. But it is impossible to combine them on an input field? The focus-visible will overrule :focus 😢
@mohitcodeswell
Жыл бұрын
Cool 🎉
@lukas.webdev
Жыл бұрын
Very cool. 😉
@EricFressange
Жыл бұрын
Next one needed :focus-visible-within ^^ Or not because :has will do the job
@RichardNobel
Жыл бұрын
*KZitem:* _"Transcripts have moved to the description."_ *Me:* _"Why, KZitem, _*_WHY_*_ would you mess up this UI/UX element so bad?!"_ I cannot understand this design change. 🙄
@Themhofficial007
Жыл бұрын
Also Make video for wordpress meta code for blog post view count, lime eye
@KevinPowell
Жыл бұрын
A bit of the same answer again, sadly! I don't cover WordPress on my channel. It's mostly vanilla CSS, with some HTML and JS sprinkled in.
@Themhofficial007
Жыл бұрын
Please sir, Try and afford for me and your community for elementor tutorial we still waiting for this
@Mempler
Жыл бұрын
I usually remove all outlines, especially for keyboard users. Man i hate vim users /s
@Themhofficial007
Жыл бұрын
Please make tutorial for elementor like this, i really need help for elementor
@KevinPowell
Жыл бұрын
Elementor really isn't something I use, sorry! I'm sure there are some great channels out there that focus on it though :)
@The_SIGMA_MUSLIM
Жыл бұрын
thank you Kevin for your videos, I've learnt a lot from you
@VeitLehmann
Жыл бұрын
I want :focus-visible-within. Oh, it's there, via :has(:focus-visible). So, Mozilla, pleeease add support for :has() asap, it's long overdue!
Пікірлер: 45