5 Useful CSS Properties You Didn't Know

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:55 - isolation
06:15 - ::marker
08:16 - counters
11:09 - caret-color and accent-color
13:15 - ch unit
15:06 - fixing max-width centered text

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

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 YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[VasilyPavlik]

I always watch your videos at least twice. First one just to learn something new. And the second one when I'm creating new cool feature and just realize: "Wait a minute. I saw very similar cool feature on YouTube." And then I go to search for your two-months-ago video and recall everything in my head. Thank you twice!

[TripleM]

I've been working with CSS for about 10 years and your channel shows me that there's still so much that I don't know/can learn about using CSS efficiently and creatively.

[AbhinavKulshreshtha]

Css isolate is probably the best thing I learnt in 2022. It saves so much trouble. I maybe using a bit too much of it but it can't be helped, it is just so convenient in the world of component libraries.

[DillionMegida]

I struggled with understand isolation on the MDN docs, and I found your video, and it greatly simplified it and showed how useful it actually is. Thank you so much Kevin!

[webdev]

You are amazing kevin my personally favorite ::marker pseudo element, love you man

[crashdelta]

My CSS skills have sky-rocketed lately, much thanks to your vids.

[ElijahManor]

Nice video! Yeah, isolation isolate is super handy when it is needed. Great tip that is probably not widely known.
I've not used ::marker before, cool cool cool and the ch unit is refreshing. Thanks for the video!

[thecoderabbi]

Kevin, I love you so much! I can't say thank you enough, you have helped my css career🙌

[peterw]

At 7:45, you changed <ul> to <ol> and the end tag changed as well - was that automatically? What do you use to do that? Thanks!

[justintaddei]

I'm a Senior Engineer with 10 years of experience, and I learned 2 new things today. Thank you!

[vesna.simeunovic]

Omg, Kevin, this is pure gold, thank you so much! I love your videos and a way you presenting stuff

[captaindesign]

you're a goddamn legend, the isolate property is godsend

[tworsfeline]

4:52
Glad that 'position: aboslute' changed to 'position: absolute'!

[Nerwesta]

While working on a component and fiddling with z-index I was deeply wondering if any such property like isolation: isolate existed because it seems like a no-brainer.
To my knowledge it was not listed on MDN under the z-index section & tutorials.
Thanks, very eye opening and it will help me finishing my component right away !

[eugene.ruthven]

found marker, counter and accent-color most useful - in particular accent-color for checkbox and radio inputs -- i usually increase width and height for checkbox and radio inputs to make them easier to touch on mobile devices and regular screens are also better

[glyakk]

Your channel is one of my favorites to grab a 'tip of the day'. So much good information is in each video.

[nickcroft]

Love all of this. I learned a couple of things I never knew. Can't believe I didn't know some of it.

One thing I wanted to point out is the as of right now, screen readers generally ignore CSS. There are only a couple of things that are honored like "display: none." This means using content via CSS to inject readable content into the page excludes screen reader users.

So while the counter is a really cool trick, it means users that rely on a screen reader are excluded. For now I would suggest accomplishing this with JS instead so that the actual content is injected.

[the-real-tridder]

Dayum Kevin, my corner of the internet is going to be FAB-U-LOUS now! I really appreciate EVERYTHING you're doing.

[kirkanos]

The nice thing with caret-color is you can tweak your contrast over fancy backgrounds.

[nataliakaraseva]

Every of your videos gives something new! Thanks a lot!