5 More Must Know CSS Tricks That Almost Nobody Knows

My mouth literally fell open

Does he have a playlist for all these features? Nobody knows videos? Because if he doesn't you definitely should make them. For both CSS and JavaScript

Yo boi u doin a gr8 job

2 things: scroll-behavior saved me 20-39 lines of JavaScript that I took out of my pages! Note the spelling though English people - no u in behaviour - caught me out! And number 2: The anchor thing with a fixed top bar can also be solved by adding this to your CSS: :target { position: relative; top: -75px;} Don't know which is better though - if indeed one is better than the other.

Kyle is a bad-ass black-belt 7dan. Period.

ASPECT RATIO... LOVE!!! (91% support as of today too)

I have used all these CSS Properties many times

I just hovered on the progress bar then saw this "most replayed". then I was hooked to figuring out why, then I got back to it and replayed it as well.
isn't this a funny feature?

ASPECT RATIO WAS GREAT!!!! ALL OF THESE ARE GOOD FOR RESPONSIVE SITES

{2022-09-04
}

Awesome tips Kyle!

Thank you for this.

I was Searching for this

scroll-padding-top made my day

🔥

You have a beautiful site and are one of the best content makers on YT when it comes to web dev.

I've been watching the web change since the days of it's early development and it's people that are like-minded to yourself that have made it as wonderful as it is now.

I am doing CSS since 20+ years and I am still learning some cool tricks from your videos. Thanks a lot! CSS rocks!

Love the scrolling method so it does not overlay the header, I have had to hack the hell out of it in JS in the past!

thanks bro :)

Subscribed.. Great info. Always get to know something useful on your channel

THE SCROLL-PADDING-TOP BLEW MY MIND!!

Usually, I need to place the ID of my navigation content at the element above my navigation content itself. Does not make sense right? IT IS 🤣
So if i have div1 and div2 and I want my anchor tag to go to div2, I would place the ID of div2 in the div1 tag (or at the last element inside of div1). Such a pain to work with :')

smooth scroll is not supported in safari though right?

👌

Good video, thanks for sharing

That's amazing!!! Thank you so much and please do some more of such videos!

Wow. Just... wow.

you should use :root!

A great video, thank you.

Thanks man. Really helpful.

I had no idea you could use the variables like you did for transform. For some reason, I had only ever seen references to setting CSS variables in root, it never even occurred to me that you could bind them to classes.

What the fuck! Very useful thx!

scroll-padding-top is amazing.. I come back just to fix this issue. Thanks Kyle

I can´t believe the scroll-padding-top property exists, It's so useful!

Awesome video!

So good tutorial

Your amazing 🥰

Vs code dosent even know these properties see how it’s not blue

CSS Resize 🤯 MIND. BLOWN! 🤯

thanks a lot for the last trick

No body knows? That must be a joke title. Every developer knows. Only the problem which browsers are supported?

So cool and so useful!!! Thanks Kyle!

I'm so Wow!ing about scroll-padding-top and scroll-behaviour!

awesome, thanks!

gold <3

Thank you very much for useful content! Well explained.

Of all your "5 unknown tricks" videos, scroll-padding is the only thing that I was aware of. With that being said, great job as always!

The way I've solved this scrolling issue before is by adding a padding-top equals to the sticky nav (or 10 more pixels for breathing room, as you did) and a negative margin-top of the same value. It looks the same because these values cancel each other visually, but the browser finds the element sooner while scrolling... Your solution is way better assuming it's supported across-the-board, the way margin and padding are. Love your videos by the way.

very good video!! Thank you very much..

Whenever you say: "Nothing actually changed" I'm thinking: "Well, my understanding of the topic certainly did!"
Thanks! 🙃🖖