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!
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 😊
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.
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!
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.
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 ❤
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!
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.
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
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?
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
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 😃😃
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.
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!
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.
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
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
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.
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,.
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 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 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
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.
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.
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.
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.
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!
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 …!
@@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 .
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 🎉
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 ❤🙏🏻 ❤
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
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 😆
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) :)
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.
@@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.
Thanks!
Thanks so much!
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!
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!
17:39 gap also works on wrapped flex contained elements keeping a consistent distance in both directions.
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.
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 😊
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.
Probably the most useful CSS video I watched this year. Great great work Kevin and Adam, keep it up!
Thanks guys. CSS is a mine field so these resources/references are extremely useful in the real world.
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!
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.
Can not tell how many times I came back to this video... thank you for an amazing explanation! 🧡
You can give a horizontal and vertical value for gap separated by a space, which I have found really useful.
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
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 ❤
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!
I learnt so many things from this which I have been doing wrong or struggling with Kevin. God bless you, keep up good work.
@media (hover) just blew my mind. Thank you!
Love this video!!! and I appreciate the collabs you're doing with other CSS awesome peeps
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.
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!
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
--golden-ratio that deserves a like for sure++ 😀😀
It deserves a like phi* sure
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.
so many cool features! Love it
Wasn’t expecting to come across something I wasn’t familiar with but the fit-content() function is a first. Fantastic!
Loved it. Expecting more of you two legends.
Very enlightening! I would add currentColor value to the list, it comes in handy to change color to properties universally.
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 🙂
empty, overscroll-behavior and @counter-style are genius.
There are some super smart ideas in this list! Love it
Great video!! Nice to be reminded of things that I KNEW and forgot.
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
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
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?
I like these kind of videos. They are very informative and useful. Please make such more..
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
Ohh the @counter-style ive never heard of or seen. Same w matrix3d. So cool. ❤
since we're talking about centering things. display: grid; place-items: center;
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 😃😃
Very cool, I want to try all of these soon.
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.
breathtaking collabs
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!
Absolutely loved the collab 😎
You're marvelous! Thank you!!
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.
I love it, thanks Mr. Kevin
top 3 for me:
overscroll-behavior
border-image
inset + margin
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
So happy to say that i knew and used most of those before :D
Fantastic rapid fire video. Thanks 🙏
Super usefull!!! Great video, thank you guys!!!
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
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.
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,.
This is neat, thanks for the video and info. :)
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 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.
Wow text-wrap pretty was so cool 😁😁
Awesome, many thanks
This is fun!!!
Awesome video!
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
Great stuff really useful 👍
What is the difference of using in header and body.
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.
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.
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.
Pure gold
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!
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!
My CSS sensei with his CSS sensei
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 …!
Amaaazing video.....
Awesome
Filter drop-shadow just killed me. I was yesterday I was dealing with this thinking that only way was photoshop!
Just found a use case, used for folding "h" and "p" tags in html instead od "div"
is there some difference between any-link and a[href] ?
I don't think so...
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 😁
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🧐
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 ❤🙏🏻 ❤
Nice one
Great🎉
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.
5 minutes in and im already updating my websites
Nice examples. However, it is clearly visible who among you has the gift of teaching ;)
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 : /
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) :)
What about css houdini, @property
That's a great one 😀
CEO of openheimer!!
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
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.
Huh, that's a weird one...
@@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.
`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.
Adam is so flirty and handsome 😅