3 More Life-Changing CSS Tips

#css #tips

00:00 Responsive relative units
00:58 The ch clamp trick
01:28 HSL color magic
02:25 Scroll padding quick fix

Yay, my comment was featured as a tip!

My VS Code Theme

- Atom One Dark
- vscode-icons
- Fira Code Font

[ste-fa-no]

@Fireship giving credit to their viewers as collaborators, AND giving them a free T-shirt: wholesome 🧡

[skyracer-mkhg]

Those 3 guys after getting in the video and also winning a shirt gotta be proud of themselves

[krtirtho]

Is this a problem or a blessing?! Why do I like each & every video of Fireship?

[justoffy.]

100 seconds of Haskell!
100 seconds of Heroku!
100 seconds of Bootstrap!

Thank you of you choose any of these!

[Nerwesta]

HSL is a life saver when you want to enter to the realm of theming in CSS via custom properties, just tweak your hue / lightness / saturation on your root variable or even better if you want to "darken" / " lighten " something ( for instance on a :hover button ) just like the Sass function, you can do those aswell.
No need to add an extra hex color property, it increases maintainbility in a large margin.
Highly recommend this !

[richardd]

This channel is the gift that keeps on giving and quite honestly the most informative one I've ever subscribed to. Thank you so much for all the incredibly useful content!

[sullenpuffin]

Damn, scroll-padding? That’s insane, I literally needed that today! Thanks!

[Probler]

me clicking on this video faster than the speed of light,

[faustinopedrofaustin]

I use rem and em all the time, easy way to responsive layouts

[dominikeitler]

A little heads-up to the scroll-padding trick:
It doesn't work on Safari and Safari mobile (therefore it doesn't work in iOS browsers at all), so it can't be relied on for websites that should run on mobile as well.

[thomaskhlebovitch]

I don't know whether you also cover some electronics and other stuff, but could you also show
100 seconds of Assembly
100 seconds of Arduino/RaspberryPi
100 seconds of Embedded C

And what would be really awesome (that might also take some more time than just 100 seconds)
100 seconds of Clean Code

This would be really helpful!

[adeleke]

Hsl is the best thing I've discovered this year. Phew, it's so easy to understand colors now. I'm definitely gonna be tehjgtour Scroll padding.

[PatricioHondagneuRoig]

Scroll-padding really was nothing short of life-changing. Keep these videos coming :D

[shivamgavandi]

That last one just fixed my current project. I love my recommendations!

[birdbrainsolutions]

Before watching: "Meh, it's just css. How life changing could it possibly be?"

After watching: "Holy shit, that just changed my life!"

lol, thank you so much for creating this video!

[felixenghofer]

I actually noticed that last problem today at work and wondered how that can be fixed. I'll try setting scroll-padding tomorrow :) Thanks for making such great videos Like this one!

[angelozuniga]

you saved my life with that scroll padding thank you so

[adeelfitness]

The scroll padding was something that I needed badly. You saved my life bro

[iskeyrin]

Scroll pading exploded my mind, thank you

[ErrorSulake]

Oh my god the last one os AMAZING, I've spent hours trying to fix that for dynamic header sizes and responsiveness