23 CSS features you should know (and be using) by now
HTML-код
- Опубликовано: 6 июн 2024
- Links to all the demos we used are below 👇
Huge thanks to Adam Argyle for joining me with this one! Make sure to follow him! nerdy.dev/
- Twitter: / argyleink
- Mastodon: front-end.social/@argyleink
🔗 Links
:focus-visible codepen.io/argyleink/pen/YzMjmjR
:focus-within - codepen.io/kevinpowell/pen/ab... & codepen.io/kevinpowell/pen/jO...
@media (hover) codepen.io/argyleink/pen/oNOPvbm
fit-content() - codepen.io/kevinpowell/pen/xx...
object-fit codepen.io/argyleink/pen/JjVaPrx
aspect-ratio codepen.io/argyleink/pen/OJGoLBW
accent-color - (I’m cheating here) codepen.io/web-dot-dev/pen/Po...
caret-color - codepen.io/kevinpowell/pen/ab...
border-image codepen.io/t_afif/pen/vYbdVjb and www.smashingmagazine.com/2024...
scroll-padding & scroll-margin: codepen.io/kevinpowell/pen/eY...
scroll-snap codepen.io/collection/KpqBGW
overscroll-behavior codepen.io/argyleink/pen/ExEwMYY
gap - codepen.io/kevinpowell/pen/md...
columns - codepen.io/kevinpowell/pen/rN...
drop-shadow() codepen.io/argyleink/pen/RwOYbXG
matrix3d() codepen.io/argyleink/pen/ExJexZY and codepen.io/fta/pen/rNZrXp
backdrop-filter - codepen.io/kevinpowell/pen/Rw...
:any-link codepen.io/argyleink/pen/vYMzYxx
:empty - codepen.io/kevinpowell/pen/md...
:first-child & :last-child - codepen.io/kevinpowell/pen/Po...
list-style codepen.io/argyleink/pen/rNmzGzW
inset - codepen.io/kevinpowell/pen/qB...
⌚ Timestamps
00:00 - Introduction
00:49 - :focus-visible
01:34 - :focus-within
02:41 - hover media query
03:46 - fit-content()
05:06 - object-fit
05:53 - aspect-ratio
07:17 - accent-color
08:22 - caret-color
09:12 - border-image
10:49 - scroll-padding
11:58 - scroll-margin
13:12 - scroll-snap
15:08 - overscroll-behavior
16:36 - gap
18:26 - columns
20:08 - bonus: text-wrap pretty and balanced
20:59 - drop-shadow()
21:31 - matrix-3d()
22:52 - backdrop-filter
24:12 - :any-link
25:00 - :empty
26:28 - :last-child and :last-of-type
27:50 - custom list-style-types
28:35 - inset
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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 RUclips channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
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!
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 ❤
Probably the most useful CSS video I watched this year. Great great work Kevin and Adam, keep it up!
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!
Love this video!!! and I appreciate the collabs you're doing with other CSS awesome peeps
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 😊
Loved it. Expecting more of you two legends.
Adam Argyle is one of my CSS idols (together with Kevin obviously). Thank you for this video.
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
@media (hover) just blew my mind. Thank you!
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 🙂
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.
so many cool features! Love it
Super usefull!!! Great video, thank you guys!!!
There are some super smart ideas in this list! Love it
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.
Great video!! Nice to be reminded of things that I KNEW and forgot.
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.
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!
You're marvelous! Thank you!!
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!
You can give a horizontal and vertical value for gap separated by a space, which I have found really useful.
Fantastic rapid fire video. Thanks 🙏
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!
Wasn’t expecting to come across something I wasn’t familiar with but the fit-content() function is a first. Fantastic!
--golden-ratio that deserves a like for sure++ 😀😀
It deserves a like phi* sure
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
Thanks guys. CSS is a mine field so these resources/references are extremely useful in the real world.
I like these kind of videos. They are very informative and useful. Please make such more..
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
empty, overscroll-behavior and @counter-style are genius.
So happy to say that i knew and used most of those before :D
Ohh the @counter-style ive never heard of or seen. Same w matrix3d. So cool. ❤
Great stuff really useful 👍
This is neat, thanks for the video and info. :)
I love it, thanks Mr. Kevin
Awesome video!
Super interesting guys!!!
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.
breathtaking collabs
Didn't know about the media query for hover devices, that's really useful
Awesome, many thanks
Very enlightening! I would add currentColor value to the list, it comes in handy to change color to properties universally.
wow access-color is great. thank you
Thanks!
Thanks so much!
Thank you for this
Wow text-wrap pretty was so cool 😁😁
This is fun!!!
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.
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,.
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!
Nice one
top 3 for me:
overscroll-behavior
border-image
inset + margin
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.
My CSS sensei with his CSS sensei
Amaaazing video.....
Awesome
Pure gold
since we're talking about centering things. display: grid; place-items: center;
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.
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.
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
I don't know how many times i gonna watch it?
maybe a 1000🧐
Filter drop-shadow just killed me. I was yesterday I was dealing with this thinking that only way was photoshop!
Great🎉
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.
What is the difference of using in header and body.
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 …!
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!
Just found a use case, used for folding "h" and "p" tags in html instead od "div"
CEO of openheimer!!
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.
is there some difference between any-link and a[href] ?
I don't think so...
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!
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
Nice examples. However, it is clearly visible who among you has the gift of teaching ;)
5 minutes in and im already updating my websites
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.
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 😁
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) :)
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 : /
Adam is so flirty and handsome 😅
What about css houdini, @property
That's a great one 😀
OMGosh only was using :last-child and :last-of-type so far :S
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.
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.
when a high iq person goes - "i can not spell proximity/mandatory, oh my god.." - thanks guys - this was super fun tutorial
Wow, thanks for showing `:any-link`, I think I have something that would be shorter or easier to write using this pseudo-class.
:focus-within should be deprecated IMO. :has(:focus) is equivalent and the better :has(:focus-visible) solves stuck focus
I don't think they'll deprecate it, just like they won't deprecate :focus either... but a :focus-visible-within might be nice (or update the current version to work that way).
Dude, are you @itsKingChris father?
🤣
Wish I could reply with something witty, but I have no idea who that is 😅
Why talk about :focus-within when you can use the far more useful :has
Delete mdn and just give me this guys to show me everything!
noooo mdn has the best docs!
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
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
Thanks!