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!
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!
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.
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 😊
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.
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!
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 😃😃
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
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!
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!
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.
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 ❤
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!
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.
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.
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.
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.
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
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.
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
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
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.
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 RUclips... will keep digging to figure it out so it doesn't happen again.
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
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,.
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 …!
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?
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.
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?
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.
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 :)
@@KevinPowell Yes please! Yes yes please! Please make it clear when meta in html as well as document.startViewTransition are necessary . Thank you. Always!
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 🎉
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 :)
@@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
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 ❤🙏🏻 ❤
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 😆
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 :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.
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) :)
@@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 .
Why do we not have `gap-rule` to act just line `column-rule`. And it can be on the x and y axis. There are sometimes when I want a border in between elements and it's not as graceful
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!
17:39 gap also works on wrapped flex contained elements keeping a consistent distance in both directions.
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!
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!
Adam Argyle is one of my CSS idols (together with Kevin obviously). Thank you for this video.
top 3 for me:
overscroll-behavior
border-image
inset + margin
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.
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 😊
since we're talking about centering things. display: grid; place-items: center;
@media (hover) just blew my mind. Thank you!
Thanks guys. CSS is a mine field so these resources/references are extremely useful in the real world.
Can not tell how many times I came back to this video... thank you for an amazing explanation! 🧡
I learnt so many things from this which I have been doing wrong or struggling with Kevin. God bless you, keep up good work.
empty, overscroll-behavior and @counter-style are genius.
You can give a horizontal and vertical value for gap separated by a space, which I have found really useful.
Probably the most useful CSS video I watched this year. Great great work Kevin and Adam, keep it up!
Ohh the @counter-style ive never heard of or seen. Same w matrix3d. So cool. ❤
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.
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!
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.
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
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 😃😃
--golden-ratio that deserves a like for sure++ 😀😀
It deserves a like phi* sure
Wasn’t expecting to come across something I wasn’t familiar with but the fit-content() function is a first. Fantastic!
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
Very enlightening! I would add currentColor value to the list, it comes in handy to change color to properties universally.
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
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!
Didn't know about the media query for hover devices, that's really useful
So great!
One question.. isn't text-wrap on bad for performance?
Loved it. Expecting more of you two legends.
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!
so many cool features! Love it
Very cool, I want to try all of these soon.
Love this video!!! and I appreciate the collabs you're doing with other CSS awesome peeps
Thanks!
Thanks so much!
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.
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 ❤
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!
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.
There are some super smart ideas in this list! Love it
This video is sooo good! Thanks for sharing Kevin and Adam 🔥
Another great video ... Some great tips for inset uses ... among other useful tips ... Thanks 🙂
breathtaking collabs
Absolutely loved the collab 😎
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.
Great video!! Nice to be reminded of things that I KNEW and forgot.
I like these kind of videos. They are very informative and useful. Please make such more..
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.
Fantastic rapid fire video. Thanks 🙏
You're marvelous! Thank you!!
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.
They updated the spec to include spaces with empty, but the browsers have yet to implement it. Looking forward to when they do!
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
I love it, thanks Mr. Kevin
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.
Super usefull!!! Great video, thank you guys!!!
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
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
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.
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 RUclips... will keep digging to figure it out so it doesn't happen again.
Yeah I noticed as well but then quickly forgot about it and got immersed into the great content in the video. Thank you Kevin!
So happy to say that i knew and used most of those before :D
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
Wow text-wrap pretty was so cool 😁😁
Filter drop-shadow just killed me. I was yesterday I was dealing with this thinking that only way was photoshop!
Awesome, many thanks
Super interesting guys!!!
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,.
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 …!
This is fun!!!
Awesome video!
Thank you for this
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?
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.
@@KevinPowell Oh so it's to protect against upstream errors
5 minutes in and im already updating my websites
This is neat, thanks for the video and info. :)
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.
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?
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.
What is the difference of using in header and body.
Great stuff really useful 👍
Please come up with a short course on View Transitions specifically. That's the API that I feel most intimidated and overwhelmed with.
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 :)
@@KevinPowell Yes please! Yes yes please! Please make it clear when meta in html as well as document.startViewTransition are necessary . Thank you. Always!
Just found a use case, used for folding "h" and "p" tags in html instead od "div"
Pure gold
My CSS sensei with his CSS sensei
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 🎉
haha, we did the thing in the video where we were trying to clear up that type of thing! 😆
@@KevinPowell I will look at it right now then thx
I don't know how many times i gonna watch it?
maybe a 1000🧐
Awesome
cool stuff.... but what is @layer geeneral-styling css media tag all about? in the focus within segment?
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 :)
@@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
Amaaazing video.....
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 ❤🙏🏻 ❤
you should focus on more complex designs with html , css AND JS like Hyperplexed PLEASEEEEEEEEEEEEE
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 😆
@@KevinPowell : /
CEO of openheimer!!
Nice one
Nice examples. However, it is clearly visible who among you has the gift of teaching ;)
Could something like .parent:has(form:focus-within) be used to low-light or blur out everything outside of a form?
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.
@@KevinPowell Does :focus-within only apply to a form element or its immediate child? What about .parent:focus-within:has(form:focus-within)?
@@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.
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) :)
Great🎉
`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.
is there some difference between any-link and a[href] ?
I don't think so...
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?
Yes and it's been around for years which is presumably why they didn't mention
Fit-content is a function ? I thought it was just fit-content not fit-content(). Are max-content and min-content also functions?
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 😅
@@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 .
It makes a lot more sense once you use it 😁
Why do we not have `gap-rule` to act just line `column-rule`. And it can be on the x and y axis. There are sometimes when I want a border in between elements and it's not as graceful
It's been talked about, and is on the table for the level 4 spec of Grid.
@@KevinPowell Do you have the url for the spec or what the property name will be called?
I believe to keep consistency it should be gap-rule.
Adam is so flirty and handsome 😅
OMGosh only was using :last-child and :last-of-type so far :S