No video
The easiest improvement you can make to your CSS
Рет қаралды 240,482
Күн бұрынOutlines are important for keyboard navigation, but maybe you've come up with a replacement and decide to do an outline: none; - instead, you should do an outline-color: transparent!
#css #a11y
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowel...
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowel...
👕 Buy a shirt: teespring.com/...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstu...
---
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 KZfaq channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kev...
Github: github.com/kev...
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
@OctagonalSquare Жыл бұрын
GENIUS! I thankfully haven’t had a reason to remove default outlines, but if I do then that will be so helpful
@Mr-Raptor Жыл бұрын
have you never styled a button or you just like added another outline on top
@OctagonalSquare Жыл бұрын
@@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
@Mr-Raptor Жыл бұрын
@@OctagonalSquare oh ok
@dipanjanghosal1662 Жыл бұрын
@@Mr-Raptor yeah, I just slap a Bootstrap class to it
@Mr-Raptor Жыл бұрын
@@dipanjanghosal1662 imagine using bootstrap
@Retro.one4 Жыл бұрын
This is great advice! This helps out with accessibility so much.
@KevinPowell Жыл бұрын
Always nice when accessibility tips don't really require any extra work or effort 😁
@Adam-kk7nw Жыл бұрын
@@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
@codeoptimal7197 Жыл бұрын
@@Adam-kk7nwpractice
@LorenHelgeson Жыл бұрын
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.
@wizpig64 Жыл бұрын
real people use high contrast mode, thank you for considering this!
@NathanHedglin Жыл бұрын
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.
@Way_Of_The_Light Жыл бұрын
How can I remember all these CSS tips and tricks!? 😭 Thanks again for all you do Kevin 🙏
@GMCorner Жыл бұрын
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.
@andreasWebDev Жыл бұрын
You can not. You can only give your best everyday.
@LilRumi Жыл бұрын
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! :)
@LilRumi Жыл бұрын
@@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.
@blackpurple9163 Жыл бұрын
I love these kind of short tips that make the websites a lot more accessibility - friendly
@jannowak5153 Жыл бұрын
Great info thanks. This should be included into any tutorial/tip/whatever for css
@developerpranav Жыл бұрын
Really appreciate the accessibility oriented, and keyboard navigation oriented tweaks that you discuss on your channel!
@ruantristancarlinsky3851 Жыл бұрын
You are such a Legend Sir!
@christopherjschultz Жыл бұрын
Thanks for this! Great to know for accessibility. Cheers!
@goodshiro10 Жыл бұрын
Einstein in CSS 👀👀😀❤️
@maxgamer6476 Жыл бұрын
the boss of css
@DasBauer Жыл бұрын
Thank you for mentioning keyboard navigation
@PIRAKAS666 Жыл бұрын
Very good tip Kev!
@tonyartz Жыл бұрын
Amazing! Very useful, I will keep it in mind next time, love your videos, very helpful and inspiring, please keep up the amazing work
@annebovelett Жыл бұрын
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!
@Boffering Жыл бұрын
I did this literally yesterday 😭 Thank you!
@codinginflow Жыл бұрын
That's genius, thank you very much!
@AlazTetik Жыл бұрын
Your tips are life-saver! 🔥🖖
@MichaelPuzio 5 күн бұрын
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!
@techlifejournal Жыл бұрын
Your the only guy on earth comes to my mind when it is css
@indecisive.m Жыл бұрын
Amazing tip!
@endunry Жыл бұрын
That must be the best application of yt shorts. Short nice info which i gonna use tomorrow
@Hasan... Жыл бұрын
I'm not a developer but I'm a high contrast mode lover and user, and this is indeed much needed!!
@daniellynch3724 Жыл бұрын
loving the format of shorts to demo accessibility things like this
@ali-celebi Жыл бұрын
Expert advice as usual! :)
@mrabhijitrabha Жыл бұрын
Thank you Kevin.
@OmAn1994 Жыл бұрын
Saved for later, I'm learning HTML 5, CSS3, and JavaScript. So it will help me. Thanks
@panpanzhang Жыл бұрын
Nice to know, thanks 😊
@RodrigoDAgostino Жыл бұрын
Thank you, Kev, for caring about the stuff nobody pays attention to! Little things like this should start making a difference :)
@LeGuJ Жыл бұрын
I'm a simple man, you talk about Accessibility you get a like ...
@Edwardtonnn 10 ай бұрын
Golden nuggets. 🙏🏼
@ankitaburman5406 Жыл бұрын
Great Advice Kevin .. u r the best 💪
@terrencemurray8153 Жыл бұрын
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
@Hello_VVolf Жыл бұрын
Wow, I just learned something that I don't know I need it.
@TentativeChaos Жыл бұрын
whoa, thank you for this! fantastic info!!
@ocin3752 Жыл бұрын
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)
@MrKyriakos32 Жыл бұрын
Wow you are a god, crazy good tip, thank you very much!
@rezamohammadi1210 Жыл бұрын
Thank you I was using that alot
@imaginedragon5532 2 ай бұрын
This man was put in this world to conquer css 😁
@dhimannavjot1 Жыл бұрын
thank you i always used outline none
@andreh.9300 Жыл бұрын
Mind blown! 🤯
@milansingh3222 Жыл бұрын
I am doing right now and I will use outline color. Thanks
@bigmistqke Жыл бұрын
I would love a serie on all these accessibility tricks
@javohir1704 4 ай бұрын
very helpful, thanks
@zainahmadkhansherwaniDot Жыл бұрын
"I'm hoping at least"😅 That sounded like a teacher subtly scolding his student
@MasayaShida Жыл бұрын
Aw man I've always used outline none. Thanks for this!
@colin_actually Жыл бұрын
Thanks for this tip. Never occurred to me.
@gabrielavila3224 Жыл бұрын
tnx sensei!
@mannuelf Жыл бұрын
amazing, you sir are a genius, love it.
@zevanrosser Жыл бұрын
well, that is awesome!
@aidennelson3171 Жыл бұрын
Nice, thanks for the info! May God bless.
@matthewclarke1926 Жыл бұрын
My boy didn't do this. Not going to pay him.
@shivamjhaa Жыл бұрын
Great Kevin! I really love these small things that pays so much UX dividends. Can we have a playlist for such simple tricks ?
@LeeWise Жыл бұрын
I love it thank you
@eromoseleedeko3839 Жыл бұрын
tnks
@Haniv1001 Жыл бұрын
🙏 so simple and so useful
@alexk20z3 Жыл бұрын
Love this
@Endrit719 Жыл бұрын
I've always done that. CRAP!!. Thanks for this tip, really love this shorts.
@kidstarr100 Жыл бұрын
Wowwwww, it’s crazy that this video came up when I encountered this dilemma
@noobaoo Жыл бұрын
thank you
@sunjin222 Жыл бұрын
Thanks
@ShahAlom Жыл бұрын
Nice, Thank You!
@sucodelarangela Жыл бұрын
Awesome tip on accessibility!
@erikjansson1790 Жыл бұрын
”If you’re a friend and developer” 😊
@HocineKamikaz Жыл бұрын
Whaaat.. Just hours ago i was wondering about this.. What a coincidence 😮!!
@Ceko Жыл бұрын
Super! But so many things to remember, how do you keep track of all those little gems of knowledge?
@jithinbp7168 7 ай бұрын
😮 nyc observation
@harrysmith8495 Жыл бұрын
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
@private-1 Жыл бұрын
Very clever idea
@kronickittiez7929 Жыл бұрын
Why thank you good sir
@funnyanimalworld7579 Жыл бұрын
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.
@igorcweb Жыл бұрын
Beautiful
@hikari1690 Жыл бұрын
I never knew! Thank you for helping us make the web more accessible. Thousands of noobs at a time
@Sachin6291 Жыл бұрын
Did that just yesterday lol, now i have to change it
@Amar11115 Жыл бұрын
that is some awesome tip!
@goodnessdavid6583 Жыл бұрын
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.
@Gabriel-ue3jf Жыл бұрын
Why just not use :hover and :focus?
@Stoney_Eagle Жыл бұрын
Did a quick find and replace of 32 instances 😊
@KevinPowell Жыл бұрын
Nice 👍
@waste4245 Жыл бұрын
Brilliant
@J90JAM Жыл бұрын
Edge case, but interesting none the less.
@tejasnikam3287 Жыл бұрын
I just used outline none :)
@tabiasgeehuman Жыл бұрын
Do you have any other tips for accessibility? This seems awesome
@rohitahuja999 Жыл бұрын
Father of CSS
@henrybenedict6357 Жыл бұрын
Very cool
@jeodazang Жыл бұрын
mind blown
@SquareballoonCoUk Жыл бұрын
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
@melbazany7417 Жыл бұрын
Wow!
@varshakapil8224 Жыл бұрын
It's my favourite ☺️
@sashogs Жыл бұрын
Nice 👍
@Lashistoriasdelilith Жыл бұрын
I've tried it but when I clicked, the border desappeared too..
@piyushlovanshi8142 Жыл бұрын
I've used border none
@joinodestry Жыл бұрын
Just use tailwind comes with this by default
@HorizonHuntxr Жыл бұрын
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?
@jacintfodor1296 Жыл бұрын
Just wondering if there is a linter for these accessobility issues.
@sevim3682 Жыл бұрын
Nice
@elska-jo Жыл бұрын
*runs off to immediately do this*
@turolretar Жыл бұрын
I just wouldn’t change the default outline at all 😂. But this is a great tip
@gilbertrothanglien854 Жыл бұрын
Thanks for the tip ... But who tf would use high contrast
@KevinPowell Жыл бұрын
Lot of different reasons, from poor eyesight to bad viewing conditions (laptop on the beach?), and I'm sure some others as well. Is it common? No, but enough that it's worth taking into account
@gilbertrothanglien854 Жыл бұрын
@@KevinPowell ok thanks. 🙏
@xBZZZZyt Жыл бұрын
why does box-shadow not work with high contrast mode?
Web Dev Simplified
Рет қаралды 100 М.
Elena Litvinova — The Art of Web Development 🛸
Рет қаралды 4,1 М.