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!

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

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

Loved it. Expecting more of you two legends.

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!

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

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 😊

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!

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

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

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

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

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.

so many cool features! Love it

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.

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

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

@IceMetalPunk

Ай бұрын

It deserves a like phi* sure

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

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

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

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

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.

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.

You're marvelous! Thank you!!

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

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!

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

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!

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 like these kind of videos. They are very informative and useful. Please make such more..

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

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

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

I love it, thanks Mr. Kevin

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

Great stuff really useful 👍

Thanks!

@KevinPowell

Ай бұрын

Thanks so much!

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

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

breathtaking collabs

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

Awesome video!

wow access-color is great. thank you

Awesome, many thanks

Thank you for this

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 😃😃

Super interesting guys!!!

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

This is fun!!!

Wow text-wrap pretty was so cool 😁😁

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!

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

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,.

Pure gold

Awesome

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.

Amaaazing video.....

Nice one

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

@dennisjohnsen7908

Ай бұрын

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 KZread... will keep digging to figure it out so it doesn't happen again.

Great🎉

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.

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

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.

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

My CSS sensei with his CSS sensei

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!

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

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.

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 …!

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.

CEO of openheimer!!

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

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

What is the difference of using in header and body.

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!

Im such a noob. This is great; thank you :-)

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

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 ❤🙏🏻 ❤

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

@KevinPowell

Ай бұрын

I don't think so...

5 minutes in and im already updating my websites

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 😁

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) :)

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 : /

Adam is so flirty and handsome 😅

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

What about css houdini, @property

@KevinPowell

Ай бұрын

That's a great one 😀

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

@KevinPowell

Ай бұрын

It's been talked about, and is on the table for the level 4 spec of Grid.

@MichaelRichins

Ай бұрын

@@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.

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

18 күн бұрын

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.

@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.

Wow, thanks for showing `:any-link`, I think I have something that would be shorter or easier to write using this pseudo-class.

when a high iq person goes - "i can not spell proximity/mandatory, oh my god.." - thanks guys - this was super fun tutorial

:focus-within should be deprecated IMO. :has(:focus) is equivalent and the better :has(:focus-visible) solves stuck focus

@KevinPowell

Ай бұрын

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?

@lyon-dev

Ай бұрын

🤣

@KevinPowell

Ай бұрын

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!

@anxpara

Ай бұрын

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?

@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.

@precumming

Ай бұрын

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