@@KevinPowell Kevin I been learnijg html and css and javascript but after while I forgot to center a div and flex and css grid any advance how to get lot better at css
Another tip is if you use fancy css always check safari cause that crap does not like fancy css and will most definetly wont work. Or if you can ignore safari cause it sucks.
Cool! Thank you very much, Kevin. I was taught a very long time ago - before responsive sites were even a thing - to do outline:none, and I never saw a reason to revert it, or anyone saying it should be strictly forbidden. But after tumbling down the rabbit hole of ADA compliance, I wasn't sure what to do, and this certainly works.
This is why I love your content. I've learned so much over the years and nailed job interviews thanks to your content. I was a backend dev so I was terrible as CSS.
My way is to do 2 things: Save it somewhere and use it everytime i can in my side projects, so by that i can remember to use these for my work projects.
Make a playlist of your favorite tips! Or if you have too many, make multiple playlists! Organize them so you have a better understanding of what videos are in which list! :)
I don't think I've ever commented on any of your videos (although I find them very resourceful and helpful, Kevin :) ), nevertheless this is such a prescient and smart pro-tip that I just have to say - KUDOS & THANK YOU!
When I use outline-color: transparent, it gives me a white outline i.s.o. a transparent outline in chrome and in firefox! (on windows 11, not using a contrast theme)
I am surprised to see you use the :is pseudo class instead for hover and focus behavior. I use the :where Pseudo-class for the same purpose and it still works. (PS: I learnt everything from your channel) EDIT: I just remembered that they both do the same thing but at different degree of specificity.
Wouldn't this cause the physical space the outline takes up around the button still be there though? so if i add a border afterwards, wouldn't that border appear on top of the outline making it not flush against the edge of the button?
hey homes i cant remember how to style my buttons using css something ease in and out please help i was in car crash havnt coded in 4years or more im trying again and dont wana give up 😂 so far my html is working im sure to find places i forgot i havnt touched javascript or php or python or batch i think im going to have a hard time recalling any of it😂 but i dont give up😊
GENIUS! I thankfully haven’t had a reason to remove default outlines, but if I do then that will be so helpful
have you never styled a button
or you just like added another outline on top
@@Mr-Raptor well most of the places I have worked used css tools like Bulma and Bootstrap, so 90% of the time it was using built in styles from those
@@OctagonalSquare oh ok
@@Mr-Raptor yeah, I just slap a Bootstrap class to it
@@dipanjanghosal1662 imagine using bootstrap
This is great advice! This helps out with accessibility so much.
Always nice when accessibility tips don't really require any extra work or effort 😁
@@KevinPowell Kevin I been learnijg html and css and javascript but after while I forgot to center a div and flex and css grid any advance how to get lot better at css
@@Adam-kk7nwpractice
real people use high contrast mode, thank you for considering this!
Another tip is if you use fancy css always check safari cause that crap does not like fancy css and will most definetly wont work. Or if you can ignore safari cause it sucks.
Cool! Thank you very much, Kevin. I was taught a very long time ago - before responsive sites were even a thing - to do outline:none, and I never saw a reason to revert it, or anyone saying it should be strictly forbidden. But after tumbling down the rabbit hole of ADA compliance, I wasn't sure what to do, and this certainly works.
Thank you for mentioning keyboard navigation
This is why I love your content. I've learned so much over the years and nailed job interviews thanks to your content. I was a backend dev so I was terrible as CSS.
I love these kind of short tips that make the websites a lot more accessibility - friendly
You are such a Legend Sir!
Thanks for this! Great to know for accessibility. Cheers!
Great info thanks. This should be included into any tutorial/tip/whatever for css
Really appreciate the accessibility oriented, and keyboard navigation oriented tweaks that you discuss on your channel!
That's genius, thank you very much!
How can I remember all these CSS tips and tricks!? 😭
Thanks again for all you do Kevin 🙏
My way is to do 2 things: Save it somewhere and use it everytime i can in my side projects, so by that i can remember to use these for my work projects.
You can not. You can only give your best everyday.
Make a playlist of your favorite tips! Or if you have too many, make multiple playlists! Organize them so you have a better understanding of what videos are in which list! :)
@@InternetWarrior hmm, true.🤔 I have lists for rewatch later, but I don't keep it in mind 😂 maybe unless something reminds me of it though.
Hey Kevin, thank you for this great and precise explanation!! A great piece for sharing. A big smile and a virtual hug from across the pond!
I did this literally yesterday 😭 Thank you!
Amazing! Very useful, I will keep it in mind next time, love your videos, very helpful and inspiring, please keep up the amazing work
Very good tip Kev!
Einstein in CSS 👀👀😀❤️
I'm not a developer but I'm a high contrast mode lover and user, and this is indeed much needed!!
whoa, thank you for this! fantastic info!!
Your tips are life-saver! 🔥🖖
loving the format of shorts to demo accessibility things like this
My boy didn't do this. Not going to pay him.
I am doing right now and I will use outline color. Thanks
Saved for later, I'm learning HTML 5, CSS3, and JavaScript.
So it will help me.
Thanks
the boss of css
This is just what I needed! I forgot to remove the outline from the button last night and was about to do it this morning haha
I'm a simple man, you talk about Accessibility you get a like ...
I don't think I've ever commented on any of your videos (although I find them very resourceful and helpful, Kevin :) ), nevertheless this is such a prescient and smart pro-tip that I just have to say - KUDOS & THANK YOU!
Expert advice as usual! :)
Amazing tip!
Thank you, Kev, for caring about the stuff nobody pays attention to! Little things like this should start making a difference :)
Nice to know, thanks 😊
Your the only guy on earth comes to my mind when it is css
Great Advice Kevin .. u r the best 💪
Aw man I've always used outline none. Thanks for this!
amazing, you sir are a genius, love it.
Wow you are a god, crazy good tip, thank you very much!
I would love a serie on all these accessibility tricks
Omg, you're right why didn't I pay attention to this, btw thanks for the solution, i hate the default outline so I remove it, but this is different
Thank you I was using that alot
That must be the best application of yt shorts. Short nice info which i gonna use tomorrow
Thank you Kevin.
thank you i always used outline none
Golden nuggets. 🙏🏼
This man was put in this world to conquer css 😁
Wow, I just learned something that I don't know I need it.
Great Kevin! I really love these small things that pays so much UX dividends. Can we have a playlist for such simple tricks ?
Awesome tip on accessibility!
When I use outline-color: transparent, it gives me a white outline i.s.o. a transparent outline in chrome and in firefox! (on windows 11, not using a contrast theme)
"I'm hoping at least"😅 That sounded like a teacher subtly scolding his student
Wowwwww, it’s crazy that this video came up when I encountered this dilemma
Thanks for this tip. Never occurred to me.
Mind blown! 🤯
Nice, thanks for the info! May God bless.
”If you’re a friend and developer” 😊
Nice, Thank You!
I've always done that. CRAP!!. Thanks for this tip, really love this shorts.
Whaaat.. Just hours ago i was wondering about this.. What a coincidence 😮!!
Did a quick find and replace of 32 instances 😊
Nice 👍
very helpful, thanks
well, that is awesome!
Super! But so many things to remember, how do you keep track of all those little gems of knowledge?
tnks
tnx sensei!
Did that just yesterday lol, now i have to change it
I am surprised to see you use the :is pseudo class instead for hover and focus behavior. I use the :where Pseudo-class for the same purpose and it still works.
(PS: I learnt everything from your channel)
EDIT: I just remembered that they both do the same thing but at different degree of specificity.
Why just not use :hover and :focus?
🙏 so simple and so useful
I never knew! Thank you for helping us make the web more accessible. Thousands of noobs at a time
I love it thank you
This is some king shit. 👑
Love this
😮 nyc observation
I'm sure I heard of a way to show it for screenreaders and other accessible tools but I can't remember what it was. I think it was a data attribute
Thanks
thank you
I just used outline none :)
Do you have any other tips for accessibility? This seems awesome
Very clever idea
Why thank you good sir
Navigating on high contrast mode is like walking on Lego... So if you do this... I am sorry for you
Maybe someone's using it because of accessibility reasons
Edge case, but interesting none the less.
Beautiful
Wouldn't this cause the physical space the outline takes up around the button still be there though? so if i add a border afterwards, wouldn't that border appear on top of the outline making it not flush against the edge of the button?
Really you're great ❤🌹
that is some awesome tip!
Still want to use what should be done and expected. Outline is not a problem to resole, so don't even try. Just use it smart.
I just wouldn’t change the default outline at all 😂. But this is a great tip
I've tried it but when I clicked, the border desappeared too..
Just wondering if there is a linter for these accessobility issues.
Father of CSS
why does box-shadow not work with high contrast mode?
It's my favourite ☺️
How do you bookmark RUclips shorts?
But 'outline: transparent' work in the same way?
I used it many times 😁
Just use tailwind comes with this by default
Me who don't know what is outline 😂
hey homes i cant remember how to style my buttons using css something ease in and out please help i was in car crash havnt coded in 4years or more im trying again and dont wana give up 😂 so far my html is working im sure to find places i forgot i havnt touched javascript or php or python or batch i think im going to have a hard time recalling any of it😂 but i dont give up😊
I've used border none