3 More Life-Changing CSS Tips

[@david-mata]

Scroll-padding is gold 🔥

[@9kopb]

For sure👍

[@wolverine4489]

don't forget to add scroll-behavior: smooth; on the element for smooth scroll animation. one line of css, no js needed!

[@xeon7879]

@@wolverine4489 Sadly, scroll-behaviour: smooth is not supported by safari yet.

[@CoryTheSimmons]

Can someone make a CodePen of this? I can't get it working. -_-

[@david-mata]

​@@CoryTheSimmons Sure, I added the property to the html, body tags a higher value than the fixed nav height codepen.io/dv-mata/pen/JjEZWdM

[@ste-fa-no]

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

[@skyracer-mk8hg]

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

[@skylark.kraken]

I am 😸

[@skyracer-mk8hg]

@@skylark.kraken you are ;)

[@bloodbrothers1313]

@@skyracer-mk8hg he is!

[@skylark.kraken]

@@bloodbrothers1313 She is

[@nsharma4981]

Getting my first comment on this channel featured in a video is nothing short of an honour, so hell yeah I'm proud! Also, not a guy :)

[@krtirtho]

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

[@Kevin-jc1fx]

Congratulations, you have a good taste for quality content.

[@justoffy.535]

100 seconds of Haskell! 100 seconds of Heroku! 100 seconds of Bootstrap! Thank you of you choose any of these!

[@shk8089]

100 seconds of Rust would be cool too

[@justoffy.535]

@@shk8089 I wanted to write that too but i saw someone already asking for it so I didn't write it in.

[@tytywuu]

100 seconds of Haskell PLEASE ~~~

[@justoffy.535]

@@tytywuu I said haskell because I heard about it but i never seem to understand it.

[@lars2299]

HEROKU! Bootstrap too...

[@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 !

[@WilsontheWolf]

Can't have enough css tips.

[@richardd9634]

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!

[@bananerer]

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.

[@leoingson]

It's CSS, after all.

[@jlopezg8]

Safari is the new Internet Explorer

[@escape0707]

@@jlopezg8 I second this.

[@akash-kumar737]

Yup, something is still better than Nothing.

[@migueldomingos4570]

@@jlopezg8 Yeah for sure. It took *ages* to finally support the flexbox gap property compared to other browsers

[@faustinopedrofaustin]

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

[@thomaskhlebovitch6198]

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!

[@olafkliemt1145]

scroll-padding is a real relief

[@sullenpuffin]

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

[@adeleke5140]

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.

[@shivamgavandi2665]

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

[@Probler]

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

[@semrasipal7679]

😊

[@dimboump]

Holy moly! Thank you for the feature!

[@Brunoenribeiro]

scroll-padding-top is a game changer

[@jayantjagtap2976]

That scroll padding top is a live saver 🔥🔥

[@adeelfitness4993]

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

[@birdbrainsolutions6112]

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!

[@lakshaysharma10]

Scroll padding changed my life

[@angelozuniga9766]

you saved my life with that scroll padding thank you so muchhhhh!

[@ErrorSulake]

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

[@skyhappy]

Could you explain what it is exactly, are navbars as big as in the video? are fixed navbars bad?

[@skylark.kraken]

@@skyhappy Fixed navbars are standard and while they are evil they are also necessary. Think about applications that aren't browsers, they all (that I have open currently) have fixed content usually at the top sometimes on the side. They can be ignored if the content is more important than navigating around, such as content with reading (also scrolling slightly less). However while there is no hard limit to navbar sizes if it's just navigation and logo then it should be no bigger than 2 or 3 rem (i.e. 1.75rem font size with 0.25em padding); but if you need more complex content fixed (such as for web-apps) you can make them bigger but be conscious about the size and how much space is left for the main content

[@felixenghofer4616]

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!

[@m3po22]

The first tip is what I started doing after 2 years of web development. I liked to design while working in CSS and `em` units just made it easier to change things around.

[@m3po22]

If you're making a component library for external consumption, DO NOT USE REM UNITS.

[@PatricioHondagneuRoig]

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

[@mrbreadman]

that display: flex tshirt is amazing

[@KevinVandyTech]

* { display: none; }

[@sambhavjain1104]

Scroll-padding is 🔥

[@Glavin883]

The scroll padding trick has just saved me from writing my standard jQuery click events to handle the same problem

[@planetmall2]

Love that you use the community for such great updates!

[@iskeyrin]

Scroll pading exploded my mind, thank you

[@MattPolaniecki]

character clamp idea is brilliant. thank you

[@darshannaik8558]

To center a element use display : grid ; along with place-items:center ;

[@AdarshSingh-qd6mq]

Scroll-padding was new for me...👍

[@skylark.kraken]

Same, had no idea it existed. Here I was adding a nonsense element with the id using position relative to scoot it up.

[@_modiX]

scroll padding will change my life.

[@karamelizesogan]

Your videos are truly golden. Condensed gold nuggets.

[@danielgiven1264]

Currently doing an escape room game project for uni and some of these tips are great, thanks for your help!

[@ash.mystic]

Great tip! I never knew why this happened and always compensated for it by adding extra margin/padding to the top of the element I was scrolling to. Using scroll-padding-top will be so much better!

[@pronayguha7099]

rem is really a life saving and scroll-padding will be an interesting one to implement

[@MindlessTurtle]

Not gonna lie. Those are good tips.

[@IshanKesharwani]

Woah !!! That last one was amazing. I had no idea it exists

[@massimo8408]

The last one was very useful

[@RusuTraianCristian]

Regarding the fixed header of the website -- having a fixed positioned one will always obfuscate content so it's bad. In contrast, having a relative one is also bad if you have lots of content to scroll through, imagine you scroll down a lot and then you need the navigation that the header is providing, it means you need to scroll all the way back up. So to address this issue, in literally all of my projects, I'm using what I like to call a 'smart header'. If I scroll down, it slides up out of the view, after a threshold is met. Similarly, if I scroll up, it comes back into view, even if I'm at the bottom of a page and I scroll up a minimum of x pixels (the threshold). I'm sure lots of you know about this, it was just a reminder since it's so easily achieved with JS and even within React.

[@ChandraSekhar-mz8xy]

Pro tip: Use rem as per this video. And in css create html{ font-size : 62.5% } So this will make your font size 10px , now insted of 2px use 2 rem , Benefit? -> In media query just maintain the font-size of html to 40%, according to your style and you'll have to write just very few lines of media query 😄

[@yblackfrost]

you can also set body{font-size:1.6rem;} to restore the default browser font size

[@realgarmingo]

Real Pro's center things horizontally with the tag

[@playstore-so2xm]

First of all, thank you very much for saving time with this information. Could you please continue this series at least for another three episodes?

[@nukemonk]

Here's another life-changing tip: *subscribe to Fireship!* It even rhymes.

[@aymanehrouch]

the hsl tip can save me a lot of time!!! thanks!

[@MrCalacianu]

I find the last one very useful 👍

[@adamgonzales8677]

First time I've heard of scoll-padding

[@avatr7109]

What a generous man He's giving credit to others ..... 😥😥😥

[@MaxProgramming]

200 likes and 0 dislikes. You are a true legend!

[@AdamsTaiwan]

I prefer the hex format, because I store color strings in a DB and also can share nicely with WPF.

[@_erfanm96]

Actually, 'em' relative to the element's font size, not the parent! But since 'font-size' is an inherited property, most of the time it would be as same as the parent's font size (because we don't change it much!)

[@Dominik-K]

Thanks a lot, nice tricks! I'll try to use them in my next project

[@alexandrgoncharov5074]

the best channel about tricks

[@Mohamed-nt2hf]

100 second of *ssg* (Static Site Generation)

[@sudeepkumarsatpathy6104]

I wish I could tag N Sharma to thank him personally for this scroll-padding tip! And thank you Fireship for this compilation! Cheers! :)

[@midtowncomics3613]

The real question after watching these css videos is : Fireship and Web Dev Simplified, who is stealing from who? Or even better are they working together? (No disrespect to either, both are great channels that I subscribe to)

[@fgsaldanha]

I am subscribed to both and feel my CSS knowledge has doubled in the last week

[@nsharma4981]

Haha, the scroll-padding-top is something I've discussed with Kyle (WDS) in the past on his discord server so I can take some of the credit for that bit of overlap in content, hah!

[@albirtarsha5370]

Thank you for scroll-padding! I had a less elegant work around.

[@albirtarsha5370]

I take it back. Scroll-padding is not so great. I thought it could be used for a fixed nav-bar to navigate to content that is parsed into sections of unequal size. My work around still reigns supreme.

[@cristiansuarez1313]

This is amazing! I'll use them all! Thank you

[@wolfrayet81]

WoW!!! i was about to deal with the bug of the 3rd tip! You were just about time :D

[@paulwhiterabbit]

Flexbox/Flexgrid changed me, but I'm still surprised that a lot of people still uses px for everything even today. My tip was to keep exploring and not stick to what you already know.

[@Bog0sso]

Just coming back to push the like button 🔥💯Thank u for all of these contents

[@Alexey-Yoshimitsu]

Классные советы, моя жизнь изменилась до неузнаваемости, спасибо вам

[@AsadIqbal-ee8vu]

Thank you very much I will try all these.

[@DreadKyller]

That last trick I usually deal with via negative vertical margin and padding equal to the height of the navbar, so if the top nav bar is 24px, then I may have: margin-top: -24px; padding-top: 24px; And if I wanted 8 actual padding, I'd use 32px for the padding to move it the additional 8px. The trick in the video is a bit cleaner, though it's not as well supported as the margin+padding trick.

[@cro-guy]

Or just use position:sticky to avoid all those hacks

[@skylark.kraken]

I would have an element that had no purpose other than to have the id and would use position relative to scoot it up 😹

[@kettenbach]

Best web dev channel on youtube imo. 😍🙏

[@usernamechangeinprogress]

100 seconds of Coq 100 seconds of Verilog 100 seconds of Pytorch u lit fam much love thank you so much 🔥❤️😛

[@albertsun3393]

Verilog in 100 seconds? Uhhhhhh

[@ashkanahmadi]

Would be cool if someone made a video or compiled all those css tips in the comments of the previous video

[@jenniferward6821]

Love the para one

[@somebrid2147]

Congrats to the people with the free T-Shirts.

[@jebenobesmrtanbatica8085]

i love css so much

[@gabrielkarczewski4453]

The first point is incorrect. Em and REM are responsive units, but they respond to the browser font size, hence they should only be used on text and things that depend on text. If someone changes the font size in the browser and goes on a website that only uses REM, the site will be all zoomed instead of having larger text. Please do not encourage incorrect usage of em and rem.

[@AlexSpieslechner]

yesss more css tips. too many frontend devs skip over css

[@itsjoseluis]

This just saved me 20+ hours

[@Carlosgzz93]

scroll padding how com I never knew that one, last project i had to do a func to calulate the height of my nav and remove that from the scroller.

[@nerothos]

Unfortunately, 45 ch does not actually equal 45 characters. It equals the width of 45 zeroes in that typeface. For a monospaced font that works perfectly, but for anything else your results may vary and it's not a foolproof way to follow the mentioned guidelines. Worst case scenario; count the amount of characters you end up with on one line and adjust your ch value based on that. Or don't because it's probably close enough :P

[@TheGawel91]

I love those short videos, nice work as always.

[@MrRobotUy]

Awesome, the first one is the one that I needed!

[@oskrm]

scroll-padding doesn't work well with safari (the new IE)

[@ilijailicic4702]

Your CSS tips are life-saving stuff! =)))

[@siggy5687]

Pleae keep posting these! Great videos!

[@niteshkrsah2222]

You contents are really awesome Thank you for your hardwork and free contents.

[@vanviethieuanh2237]

💖 scroll padding

[@loading0004]

100 seconds of quantum computing please i need this

[@Viralvlogvideos]

please make a video on most used css elements

[@verified_tinker1818]

100 seconds of Heroku sounds good! Also 100 second of Rust, if it's used in the web field.

[@lucasfelipe-ze5sy]

Thanks! Please, make more css videos

[@joaocesarlima7339]

Wow! I wish I had discovered this ch unit before! Better yet mixed with clamp! :O

[@Rakesh-jz1zf]

Very informative, thanks for the video.

[@sherwing9054]

If only I knew these tips earlier, I could've saved like 2 weeks of QA from my student capstone project.

[@robertotonino2916]

Great video as always! Is there a store where we can buy that t-shirt? 👀

[@MM-vr8rj]

Often you still need media queries for things like font-sizes despite using REM or EM or even VH/VW but I can imagine that it takes more media queries if you use PX

[@beckybeck3888]

As always great and valuable content. Thank you!

[@21agdmnm]

DANG these tips are soo cool!! anybody knows any blogs/articles where I can find more??

[@pixiedev]

Don't forget 100 seconds of yoga 🤣️ because you are investing many hours for 100 seconds 👍️.

[@jeremythetechguy]

Omg scroll-padding what!? 🤯