CSS just changed forever… plus 7 new features you don't know about

CSS just got a brand new official logo. Let's take a look at some of the coolest new features available to HTML and CSS programmers in 2024.

#webdevelopment #programming #thecodereport

💬 Chat with Me on Discord

🔗 Resources

📚 Chapters

🔥 Get More Content - Upgrade to PRO

Use code YT25 for 25% off PRO access

🎨 My Editor Settings

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

🔖 Topics Covered

- New features added to CSS in 2024
- Significance of the color Rebecca purple
- Modern CSS tips and tricks
- What are the browser's Baseline features?

[howardtaylor]

That's the first time a Fireship video brought a tear to my eye.

[l.halawani]

Purple was the favorite color of Rebecca Alison Meyer who passed away twelve hours into her sixth birthday from brain cancer. Rebecca was the daughter of prolific CSS standards pioneer Eric Meyer. Eric kept his online colleagues informed of the battle his daughter and family were waging through blog posts and brief updates on Twitter.

[No_onewillknow]

Going from happy that CSS got better to almost crying was not on my to do list Fireship

[phillllllllllll]

00:55 1. Align Content for Block Elements
01:07 2. @property at-rule
01:35 3. @starting-style
02:13 4. round(), rem(), mod()
02:27 5. light-dark function
02:46 6. :user-valid pseudo class
03:19 7. interpolate-size
03:41 is someone cutting onions?

[noobicorn_gamer]

That Rebecca purple emotional hit was not something I expected to be hit with on a Fireship video but I love it.

[alexwilkinsgames]

I will forever love this logo. I have a 4 year old son and would be so devastated if I lost him. I cried watching this, and it makes me wonder if while maintaining my CSS classes might be painful at times, it could never be as painful as losing your own child.

[MunyuShizumi]

As a backend dev, I look forward to less vehemently avoiding CSS.

[Islandstone]

0:47 align-content
1:05 @property
1:34 @starting-style
2:05 round(), rem() & mod() math functions
2:23 light-dark function
2:42 user-valid & user-invalid pseudo-classes
3:17 interpolate-size
3:41 the heart-wrenching story behind "rebeccapurple", the background color for the new official CSS logo 💜

[kiraaaaaa]

This video prompted me to seek out Eric Meyer's blog and read his posts from 2013 and 2014 and I was genuinely sobbing until I calmed down enough to write this comment. He is an incredible writer. He is so full of love and so full of grief, and he has such a beautiful way of writing about his love for his daughter. He has a unique ability to let me feel how much he loves Rebecca through just a couple of blog posts. Few things are more cruel than that she only got to experience being Rebecca for six hours, but no one could be a better witness of her life than her father Eric. No one could share the gift of Rebecca's life with the world better than Eric can.

[kulemantu]

We could align center 25 years ago because the whole page was a <table> element

[cosmiclattemusic]

we got dark-light mode in CSS before GTA VI

[nervesstudio]

I prefered the old logo until the end. May you rest in peace, Rebecca ❤️.

Now I'll cry every time i write CSS.

[jkibble]

I wasn't expecting to get a feels at the end of a Fireship video

[nitsanbh]

You *can* affectively interpolate from height: 0 to height: auto, by interpolating grid-template-columns: 0fr to grid-template-columns: 1fr (with overflow: hidden).
Kevin Powell showed that in one of his vids

[Devillman]

Man that video really made my eyes in tears. Thank you for sharing the story of the CSS creator with us i didn't know that. I am a father of 6 years old girl and i can't imagine the pain that he went through :(

[KevinxJin]

It's my forever test color! Hope whatever technology replaces CSS in 5-10 years will keep this color for ever!

[Loopmootin]

Awesome video as always!
Btw although you can't animate on height: auto; as you said, and sadly interpolate-size is only available in Chrome atm..
But you can animate on the fr unit, so if you make a grid container and change the row from 0fr to 1fr it will transition smoothly

[privacyvalued]

1:00 "Why nobody thought to make this a thing 25 years ago." But we still won't be able to use it for another 10 years because browser upgrade adoption takes forever.

[blissful]

Rebecca purple lore hit me different....

[chillingpaully]

Didn't expect to be bawling my eyes out at a fireship video