I Love This CSS Focus Hack
Рет қаралды 18,280
Күн бұрынThe CSS :focus state is simple on the surface, but there is actually quite a lot going on behind the scenes. There are 3 total :focus states you can use in CSS and even a secret fourth state that make :focus much more complicated than it may first appear. In this video I go over everything you need to know about CSS :focus states.
📚 Materials/References:
CSS :has Selector Video: • This Is So Much More T...
CSS :has Selector Article: blog.webdevsimplified.com/202...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:29 - :focus
01:16 - :focus-visible
03:05 - :focus-within
04:19 - :focus-visible-within
05:38 - Use Cases
#CSSFocus #WDS #CSS
@specializer222 20 күн бұрын
I love this short videos about functions in CSS 😍
@LePhenixGD 20 күн бұрын
The :has pseudo-class really makes CSS easier
@saqibkhanz8417 20 күн бұрын
Waiting for your lengthy project-based videos.
@lexidugo 20 күн бұрын
This came at just the right time !!! Thanks so much
@aer0449 18 күн бұрын
Kyle, bro I took your CSS course and I loved it .... Anyone looking to drastically improve on CSS do buy his course, its short and to the point .... I am so thankful to you brother ... Amazing work ❤
@bogdanterzic9297 15 күн бұрын
Link to this course?
@bharathnaidu4636 16 күн бұрын
you always rocks thanks for the content
@akoladebode-ajayi327 20 күн бұрын
Thank you sir 😊
@dragenn 18 күн бұрын
This is invaluable!
@WebDevelopmentWithSS 19 күн бұрын
This video is amazing.
@akramilyas6030 20 күн бұрын
thanks for all
@ArielFerro 20 күн бұрын
Wow! I had no idea about those CSS selectors for controlling focus. This could spark a really interesting discussion about the accessibility advantages of each approach. But I definitely want to thank you for addressing such a crucial issue for people with low vision by presenting alternative techniques to the traditional ones. Kudos to you!
@imnikki00 19 күн бұрын
awwwwwwwwwwww thank you ! Im great fan of yours sir
@user-ko1cw6mv4q 19 күн бұрын
❣️ great video
@Frexuz 18 күн бұрын
Is the has(focus-visible) doable in tailwind? PS: When you tabbed between the inputs back and forth, as a color-impaired person, I basically didn't see any change between "black" and "red" (and the input cursor is incredibly thin). Please use "blue" in the future :))
@alexkuehne86 18 күн бұрын
That means :focus-within could also be replaced with :has(:focus)?
@abdullaahmad5503 18 күн бұрын
Video on vh and dvh please
@ajiteshmishra0005 13 күн бұрын
What is the difference of using in header and body.
@rayyanabdulwajid7681 19 күн бұрын
I have made a click drop-down using css only using css "focus outside". When i click outside the drop-down, the drop-down closes. This was not possible when we were using css checkbox approach
@rishiraj2548 20 күн бұрын
🙂👍🎉
@sushantchoudhary07 20 күн бұрын
first 🥇
@neimado 20 күн бұрын
Please calm down the head shaking while you talk, it's kind of distracting.
@jelilabudu 20 күн бұрын
I get your frustration. However, the most important thing you need is to pay attention to is the message. I often watch people with fast speech, native accents, etc, which makes it difficult for me to grasp at once, what they're trying to put across. So, I either lower the speed or, I replay any section part that I don't not understand.
@Y45526 20 күн бұрын
That’s the best part tf
@MrHellmager 20 күн бұрын
People will really hate no matter what huh 😅
@neimado 19 күн бұрын
@@MrHellmager It's not called "hate", it's called *constructive criticism*. Imagine thinking the only way to communicate is either praise or "hate".
@rs832 19 күн бұрын
That's a weird way to say "thank you for the very helpful free content!"
@ezwtwrziehag1736 19 күн бұрын
this isnt secret, people know this long ago
Осторожно: Собчак
Рет қаралды 10 МЛН
Profy dev
Рет қаралды 12 М.