23 CSS features you should know (and be using) by now

[@astrit]

This is wonderful, this is what the front=end developer community needs, so so good to see you both creating this type of content, really appreciate it. I have made so many good example with the focus state is actually just incredible what can be done these days and a pity that not many people know or apply these styles!

[@MartinDoudoroffLLC]

Thanks!

[@KevinPowell]

Thanks so much!

[@SerenityForschen]

I literally watch these and then add some of this to my preferred base code. As a deisgner/ front end dev person I really love that you get instant gratification with CSS code changes = visible difference. Anyway just added scroll-margin to my portfolio site. Most of these other tricks I picked up from your previous videos but love the collabe of two people showing how things work with different words. Thanks!

[@artyomchudakov7436]

Thank you Kevin and Adam. I ( and almost other 5 thousand people) like this tipe of video, please do more of this in the future!

[@p3k1n0]

Adam Argyle is one of my CSS idols (together with Kevin obviously). Thank you for this video.

[@LouiseJosephine]

Thank you! The more CSS I learn, the more properties I realise i still don't know! Most classes I take go over the same basics. I love seeing professionals share these newer properties or more intermediate/advanced techniques and their uses 😊

[@outpost31737]

Thanks guys. CSS is a mine field so these resources/references are extremely useful in the real world.

[@francescos7001]

Probably the most useful CSS video I watched this year. Great great work Kevin and Adam, keep it up!

[@railroadandindustrialsky-wv8ns]

Outstanding video guys. I’m constantly coming back to this video. I just finished a huge project for a Midwest company and used many of the methods and ideas listed here. Keep them coming. Great work.

[@johanneskingma]

17:39 gap also works on wrapped flex contained elements keeping a consistent distance in both directions.

[@itsPenguinBoy]

You can give a horizontal and vertical value for gap separated by a space, which I have found really useful.

[@MrBrady95]

Lol, wow! I never thought I'd see this on the web ... @20:13 take care of "orphans" with text-wrap: pretty; I'm guessing it works for their counterpart, "widows" as well. Going to have to re-look at columns, but all of these tips are awesome! Super-like on this video, thanks!

[@vuuzo]

empty, overscroll-behavior and @counter-style are genius.

[@soganox]

@media (hover) just blew my mind. Thank you!

[@MaxWeir]

Was hoping to see Adam and thanks for having him on the show! Would've liked to have seen more of a discussion (more use cases, best practices, do's/dont's, performance etc) on the CSS properties a bit more as felt he was more watching/listening to you the majority of the time. I've seen many of his talks and he knows quite a bit so would've been nice to hear him talk a bit more.

[@mrgerund3060]

amazing video, i outright used the filter for the drop shadow and wished i knew some of these earlier as well, would love to see more in the future

[@isaacewing]

--golden-ratio that deserves a like for sure++ 😀😀

[@IceMetalPunk]

It deserves a like phi* sure

[@DarrenbyDesign]

Love this video!!! and I appreciate the collabs you're doing with other CSS awesome peeps

[@ClarkeDesign]

More of this please - really good to visit the lesser known CSS, but older things we all may have forgotten about or how to use.

[@jfftck]

The scroll-margin and scroll-padding are harder to understand until you think about where you want the offset to be, margin is outside of the box and padding is inside.

[@einatblackrose]

Awesome video! Thank you for this, you really opened my eyes to some useful stuff I didn't know. And always great to see Adam featured in the videos. Keep it up ❤

[@paulwdoyle]

Another great video ... Some great tips for inset uses ... among other useful tips ... Thanks 🙂

[@skeui]

Loved it. Expecting more of you two legends.

[@VitaliiYushchuk]

so many cool features! Love it

[@TheRalic]

Can not tell how many times I came back to this video... thank you for an amazing explanation! 🧡

[@alanbloom20]

Wasn’t expecting to come across something I wasn’t familiar with but the fit-content() function is a first. Fantastic!

[@joelpww]

That was so good. Object fit just got me. If at 5 mins in i already found one i'm not familiar with, i expect to get alot from this video

[@VeitLehmann]

Really nice collection of neat features that are rarely used! The hover media query is really cool for accessibility, I use it in a personal project only. I'll see how I can introduce it to my company. Text-wrap is what I'm just adding everywhere now. Caret-color was new to me, also the difference between scroll-margin and scroll-padding. And the border-image trick is also really neat, that's a property I almost never use, but this is a cool use-case!

[@alajit]

I learnt so many things from this which I have been doing wrong or struggling with Kevin. God bless you, keep up good work.

[@chrislanejones]

Very cool, I want to try all of these soon.

[@pendaco]

Wow, there's some good stuff in this video! Never knew to use border-image like that for an overlay. Will definitely trying to refactor that in some existing projects!

[@rawcatYT]

There are some super smart ideas in this list! Love it

[@axMf3qTI]

since we're talking about centering things. display: grid; place-items: center;

[@CarlosAlexisG]

This video is sooo good! Thanks for sharing Kevin and Adam 🔥

[@royhyde8842]

Thank you very much guys for these... I quite like CSS and knowing these makes it more fun and forces one to think of all those situations my life could have been alot easier all this time.. Thanks once again.

[@fredhair]

Didn't know about the media query for hover devices, that's really useful

[@naranyala_dev]

breathtaking collabs

[@clevermissfox]

Ohh the @counter-style ive never heard of or seen. Same w matrix3d. So cool. ❤

[@intervalia]

Great video!! Nice to be reminded of things that I KNEW and forgot.

[@geokongr]

Very enlightening! I would add currentColor value to the list, it comes in handy to change color to properties universally.

[@helsingking281]

top 3 for me: overscroll-behavior border-image inset + margin

[@jamshediqbal7936]

I like these kind of videos. They are very informative and useful. Please make such more..

[@endrefasong]

These are great bc there are so many things I sort of forget that I know, being both self taught and having ADHD as well as not working with css 100% of the time

[@marcelolopezsilva379]

Absolutely loved the collab 😎

[@KhaPiano]

Fantastic rapid fire video. Thanks 🙏

[@trunglevan860]

I love it, thanks Mr. Kevin

[@tobisalami]

You're marvelous! Thank you!!

[@KarimShalapy]

In my first job I was challenged to make a client story paginator using CSS, and I made an Engine with CSS and JS to paginate a story that comes to me in the form of XML. I actually tackled this challenge using CSS columns and an overflow hidden and I would scroll horizontally by the value of the column size + gap to jump between pages 😃😃

[@ricardodesirat2590]

So great! One question.. isn't text-wrap on bad for performance?

[@mannixmd]

So happy to say that i knew and used most of those before :D

[@pedrocosta3818]

Super usefull!!! Great video, thank you guys!!!

[@imariohernandez]

This is a great collection of tips. I am curious, could you show an example of expanding the background of an element to be 100vw using border-image? I am trying all kinds of ways and can't seem to be able to expand my element's background full width (outside of its container). Thanks guys.

[@LePhenixGD]

Amazing video Kevin! I didn't know about the :any-link pseudo-class! Btw you should've talked about the mix-blend-mode as well, for instance with the difference or the screen

[@sanmeetsingh4538]

Wow text-wrap pretty was so cool 😁😁

[@Piscesluna]

This is neat, thanks for the video and info. :)

[@espertalhao041]

The problem with the :empty selector is that it doesn't do what you expect. Currently, none of the browsers assume that an element with just whitespace is empty. So, you have to do something like :empty, :not(:has(> *)) to get something kinda close to the expected.

[@calyodelphi124]

The :any-link pseudo-class seems to me a little bit redundant, because you can just as well select anchor tags that are links with a[href] unless there's some kind of specificity shenanigans going on that distinguishes :any-link from a[href] that I don't know about

[@barbabilios]

Super interesting guys!!!

[@N0TZ3R0]

Awesome, many thanks

[@thatmarinescienceguy]

Just opened VS code to work on a responsive nav bar (head>ul.nav-bar>li*4) and saw this video.. Thank you Kevin! I'm learning so much because of your channel and really appreciate you! PS - I'm from the time of tables and Geocities!

[@SpaceCadetKitty]

5 minutes in and im already updating my websites

[@grugbrain]

This is fun!!!

[@MojtabaSeyedi]

Awesome video!

[@GilGoldshlager]

Great stuff really useful 👍

[@travholt]

Today I just released a redesign of one of our most visited pages. I could've used more than half of these tips in that redesign, so I guess I'm not quite done with it yet …!

[@skylark.kraken]

24:12 what is the pupose of an anchor without href? When would :any-link even be worth having? 28:28 that seems handy for using something like fontawesome icons for list styles, just pass in the icon code and I assume apply the fontawesome font to the @counter-style?

[@KevinPowell]

You'd be surprised how often links show up without hrefs. Can be user oversight, or a CMS where someone doesn't include a url, or other things.

[@skylark.kraken]

@@KevinPowell Oh so it's to protect against upstream errors

[@SamuelKarani]

My CSS sensei with his CSS sensei

[@johansmith2840]

Just found a use case, used for folding "h" and "p" tags in html instead od "div"

[@photomat]

I learned new stuff today! Now I hope to remember that to put it to use ;) .. One sidenote on :empty, though. It only works when it is ENTIRELY empty. So if some back-end code generates HTML and puts even a space in there, you cannot style that away with :empty (it happens when you have a styled container with conditionally rendered children). You'll find yourself wrapping parent elements over rules in order to retain some indentation on your code. Ugh.

[@KevinPowell]

They updated the spec to include spaces with empty, but the browsers have yet to implement it. Looking forward to when they do!

[@mendelgordon]

Before using overscroll behavior please keep in mind that on mobile, users often need to be able to overscroll to move up or down the page. I find sites which stop the overscroll from bubbling up to be extremely annoying, since on small screens I have no way to navigate the other parts of the page once I get “stuck” in an or the like.

[@pokefreak2112]

Hover media query is interesting, I've always used @media (pointer: fine) up until now What are some devices that would be considered as having a coarse pointer but also having hover support? XR maybe?

[@KevinPowell]

That's a good question, I think there are some things like TVs or other things where you're controlling a cursor, but not with a mouse. It's probably a pretty small subset.

[@metalbroga]

Pure gold

[@pabloreyes6442]

Filter drop-shadow just killed me. I was yesterday I was dealing with this thinking that only way was photoshop!

[@JammieDragon2319]

Hello, just a quick question. I'm working on a project and I forgot the name of the video you posted about Grid display. It's the one where you have have some divs fill width/columns and some half of the column. You used the grid-template-colimns,.

[@yaredbekuru]

I don't know how many times i gonna watch it? maybe a 1000🧐

[@TechMainul]

Awesome

[@Ur-vink]

Amaaazing video.....

[@jfftck]

The overscroll-behavior: contain should be used very carefully, having regions on the page that stop the overall page scroll is jarring. I am getting to the point where I avoid inner scrollable boxes on the page as it makes using the page on mobile much harder and more frustrating. I can see using it in an app that doesn’t scroll the whole page, but most of the time that too will cause problems that increase complexity.

[@aram5642]

Please come up with a short course on View Transitions specifically. That's the API that I feel most intimidated and overwhelmed with.

[@KevinPowell]

I have two videos where I've used them (one for single-page, one for multi-page). I am looking at making a more in-depth video focusing on them specifically though :)

[@aram5642]

@@KevinPowell Yes please! Yes yes please! Please make it clear when meta in html as well as document.startViewTransition are necessary . Thank you. Always!

[@ajiteshmishra0005]

What is the difference of using in header and body.

[@MrCrackerplays]

I don't see anyone else mentioning it nor any mention of it yet in the video but the video is very choppy to me (or at least the webcams are) like it's on a very low fps

[@PrankstarDK]

Yes. same here. I cannot watch it.. Too low FPS. Unbearable unfortunately :( It's not only the webcam. It's the entire video! Even his graphics on top of screen at the start is low FPS.

[@KevinPowell]

Yeah I'm not sure what happened to cause the issue. Everything looks fine in the file I have on my end, and it's fully processed by KZbin... will keep digging to figure it out so it doesn't happen again.

[@antonio_carvalho]

Yeah I noticed as well but then quickly forgot about it and got immersed into the great content in the video. Thank you Kevin!

[@aspizuwastaken]

CEO of openheimer!!

[@BenRose3d]

Nice one

[@josegamarra3532]

Adam is so flirty and handsome 😅

[@tomaz-laurensoft]

tinha salvado aqui Paz seja contigo meu irmão, nao a dou como o mundo, mas como recebi do Senhor, duro está sendo meu deserto, mas esse deserto mesmo será minha maior coroa em Cristo ❤🙏🏻 ❤

[@chrisicotec7652]

cool stuff.... but what is @layer geeneral-styling css media tag all about? in the focus within segment?

[@KevinPowell]

I was using cascade layers to say "all this stuff over here isn't related to the demo specifically" :) - layers are a way we can organize our stylesheets a little better, and browser support is finally hitting a level where we can start using them :)

[@chrisicotec7652]

@@KevinPowell ill definitely look forward to this, I think media queries have so much undicovered potential we are still waiting to find out so whenever i see something as a media query that im not familiar with it excites me a little

[@AniaSkowronek]

Nice examples. However, it is clearly visible who among you has the gift of teaching ;)

[@OCEMTechZone]

Great🎉

[@zeddash]

9:00 I achieved this (CodePen /z-/pen/owqVvB) by changing the colour of the input to what I want the caret, then make the text fill transparent, and then use text-shadow to colour the text. It is awful, but not too difficult; however I have never once needed or wanted it in a project as it's not what the user expects

[@stephaniepeters2590]

Regarding :any-link, this is a new one for me, thanks! I guess a similar thing can be achieved with a[href]. W3C says that an without an href should be treated as a span, i.e. receive no special formatting, which I guess most uf us are doing wrong in our CSS anyway (Myself included) :)

[@dripcaraybbx]

Could something like .parent:has(form:focus-within) be used to low-light or blur out everything outside of a form?

[@KevinPowell]

The problem is, if you do something with opacity or blurring effect, it blurs that element and everything inside of it, so that would include the parent. You could potentially shift colors if you use custom properties, but you'd have to make sure you don't change anything in the child.

[@dripcaraybbx]

@@KevinPowell Does :focus-within only apply to a form element or its immediate child? What about .parent:focus-within:has(form:focus-within)?

[@GODWORDSorg]

@@dripcaraybbx :focus-within says "is any element inside this parent receiving focus? If so, style it THIS way." It's great for menus... focus within the parent to make dropdowns appear, and more.

[@EricFressange]

Very good and useful video ❤❤❤ You have shown inline-size (width) and block-size(height) but you haven't explained it😅 We want a second video with more tricks 🎉

[@KevinPowell]

haha, we did the thing in the video where we were trying to clear up that type of thing! 😆

[@EricFressange]

@@KevinPowell I will look at it right now then thx

[@faiyazrasul2050]

you should focus on more complex designs with html , css AND JS like Hyperplexed PLEASEEEEEEEEEEEEE

[@KevinPowell]

The problem with those is they either make for *very* long videos most people aren't interested in, or nice, short videos like Hyperplexed does, but mine won't be anywhere near as good as his 😆

[@faiyazrasul2050]

@@KevinPowell : /

[@daveware329]

What about css houdini, @property

[@KevinPowell]

That's a great one 😀

[@clevermissfox]

Fit-content is a function ? I thought it was just fit-content not fit-content(). Are max-content and min-content also functions?

[@KevinPowell]

fit-content() is only for use within grid-template-*. The rest of the time, it's just the regular value... which definitely can be a bit confusing 😅

[@clevermissfox]

@@KevinPowell thanks for replying- I looked it up and discovered as such. I have to play with it as I’m confused on how it works. This sentence from mdn really broke my brain “ The fit-content() CSS function clamps a given size to an available size according to the formula min(maximum size, max(minimum size, argument))” Hopefully it will make it on the list for future videos bc I’m not grasping how to use it at all. I really only have seen it with one value but that sentence makes me think it should have a clamp min, preferred, max .

[@KevinPowell]

It makes a lot more sense once you use it 😁

[@jfftck]

I found a bug in Safari when using columns, it will draw garbage text in the last column when the text isn’t long enough to wrap to that last column. So, every Apple user that is using a device that forces the WebKit rendering engine will have a broken layout.

[@KevinPowell]

Huh, that's a weird one...

[@jfftck]

@@KevinPowellIt is weird, seeing that this is one of the oldest properties you covered in this video. I can even share my website with the behavior, I am just going to leave it as is and hope that at some point in the future Apple will allow other rendering engines. I have only a minimal amount of effort that I am willing to spend on things like this and, Apple actively blocking competition on many of their devices, doesn’t motivate me to find a solution to a problem that they are creating in the first place. This is much worse than the IE issue of the past, as Apple isn’t allowing alternatives that could benefit their users.

[@raymonds_food]

is there some difference between any-link and a[href] ?

[@KevinPowell]

I don't think so...

[@codernerd7076]

OMGosh only was using :last-child and :last-of-type so far :S

[@TesterAnimal1]

`inset` is annoying in that it doesn’t handle RTL. Four values are always T R B L It should use T L B R in and RTL element.

[@BauldyBoys]

Really just not going to mention inline-size and block-size? Is this essentially width and height? Kind of like the new border-block syntax?

[@Turabbo]

Yes and it's been around for years which is presumably why they didn't mention