I Love This CSS Focus Hack
HTML-код
- Опубликовано: 6 июн 2024
- 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
The :has pseudo-class really makes CSS easier
This came at just the right time !!! Thanks so much
Waiting for your lengthy project-based videos.
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 ❤
Link to this course?
I love this short videos about functions in CSS 😍
you always rocks thanks for the content
Thank you sir 😊
This is invaluable!
This video is amazing.
awwwwwwwwwwww thank you ! Im great fan of yours sir
❣️ great video
thanks for all
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 :))
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
What is the difference of using in header and body.
That means :focus-within could also be replaced with :has(:focus)?
Video on vh and dvh please
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!
🙂👍🎉
first 🥇
Please calm down the head shaking while you talk, it's kind of distracting.
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.
That’s the best part tf
People will really hate no matter what huh 😅
@@MrHellmager It's not called "hate", it's called *constructive criticism*. Imagine thinking the only way to communicate is either praise or "hate".
That's a weird way to say "thank you for the very helpful free content!"
this isnt secret, people know this long ago