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

00:04:17
https://www.youtube.com/watch?v=A89FMtIkWKc

Summary

TLDRThe video highlights significant updates to CSS that alleviate many of its historic challenges. It showcases a new logo, features such as the aligned content property for easier design alignment without flexbox or grid, and the property at rule for CSS variables with specified types. The new starting style property enhances animations by allowing styling when an element first appears. Other updates include new math functions, a simplified way to handle light/dark mode styles, and user-focused pseudo-classes for form validation. Additionally, the interpolate size property enables animation of properties with undefined sizes. The CSS logo color featured, Rebecca Purple, holds sentimental value as a tribute to the daughter of a CSS pioneer. These updates suggest CSS is evolving to be more user-friendly and powerful for developers.

Takeaways

  • 🎨 CSS has a new logo color: Rebecca Purple.
  • ✨ New aligned content property simplifies layout design.
  • 🏃‍♂️ CSS Houdini's property at rule improves animations.
  • 🖼 Starting style property aids in smoother animations.
  • 🧮 Updated math functions enhance CSS calculations.
  • 🌗 Light/Dark mode styles are now easier to manage.
  • 📝 Form validation improved with user interaction pseudo-classes.
  • 📏 Interpolate size enables better animations for variable sizes.
  • 💡 CSS evolves with powerful features for developers.
  • 👩‍💻 CSS is recognized as being more awesome with these updates.

Timeline

  • 00:00:00 - 00:04:17

    The video discusses the challenges faced by developers, including blue light exposure, excessive sitting, and updating legacy CSS code. However, a major update to CSS introduces new features that aim to alleviate some of these issues. The video highlights the new CSS logo and seven features that modern browsers support to improve CSS: aligned content property, property attribute in CSS Houdini for animations, starting style rule for initial element rendering, new math functions like round, REM, mod, light/dark mode CSS properties, and user interaction pseudo-classes. Additionally, it mentions interpolate size for animating properties like drop-down height. The color Rebecca Purple, linked to a personal story of a CSS Pioneer's late daughter, represents the new logo, symbolizing a touching memorial integrated into web standards.

Mind Map

Mind Map

Frequently Asked Question

  • What are some of the new CSS features introduced in the video?

    The video introduces features like aligned content property, property at rule, starting style, additional math functions, light dark mode handling, user valid/invalid pseudo-classes, and interpolate size property.

  • Why is the color of the new CSS logo significant?

    The color Rebecca Purple is named after Rebecca Meyer, the daughter of Eric Meyer, a CSS pioneer. Rebecca passed away at a young age, and the color honors her memory.

  • How does the starting style property improve CSS animations?

    The starting style property allows for defining a style when an element is first rendered, facilitating smoother transitions in animations for elements initially hidden with display none.

  • What problem does the interpolate size property solve?

    Interpolate size allows for animating properties like height even when they are set to auto, which was previously not possible.

  • How has CSS improved handling of form validation styles?

    CSS now includes user valid and user invalid pseudo-classes, which are triggered only after user interaction with a form, improving user experience.

View more video summaries

Get instant access to free YouTube video summaries powered by AI!
Subtitles
en
Auto Scroll:
  • 00:00:00
    if you decide to become a developer
  • 00:00:01
    you'll be introduced to a wide variety
  • 00:00:03
    of new types of headaches triggered by
  • 00:00:05
    the stressors of blue light exposure
  • 00:00:07
    excessive sitting and unrealistic
  • 00:00:08
    deadlines but the worst type of headache
  • 00:00:10
    you can experience is the one that's
  • 00:00:12
    triggered when attempting to update some
  • 00:00:13
    Legacy CSS code luckily though CSS just
  • 00:00:16
    got a massive update that will help you
  • 00:00:18
    forget about all of its pain points a
  • 00:00:20
    beautiful new logo in the color of
  • 00:00:22
    Rebecca purple a color with a special
  • 00:00:24
    backstory in much the same way flame
  • 00:00:26
    stickers make your cargo faster this new
  • 00:00:28
    logo will make CSS not suck anymore more
  • 00:00:30
    because it serves as a reminder that CSS
  • 00:00:32
    is actually awesome when you use
  • 00:00:34
    features on the modern Baseline path
  • 00:00:36
    which is supported by all major browsers
  • 00:00:38
    in today's video we'll look at seven new
  • 00:00:40
    features you can use as a web developer
  • 00:00:42
    that you didn't know exist it is
  • 00:00:44
    November 18th 2024 and you're watching
  • 00:00:46
    the code report I'm not going to sit
  • 00:00:48
    here and beat a dead horse showing you a
  • 00:00:49
    bunch of memes about how to center a div
  • 00:00:52
    because those memes are now totally
  • 00:00:53
    obsolete thanks to the aligned content
  • 00:00:55
    property which doesn't require flexbox
  • 00:00:57
    or grid and just works in any block
  • 00:00:59
    layer out why nobody thought to make
  • 00:01:01
    this a thing 25 years ago I have no idea
  • 00:01:04
    but that's not the only game Cher
  • 00:01:05
    another new feature you need to know
  • 00:01:06
    about is the property at rule which is a
  • 00:01:09
    part of CSS Houdini we can easily create
  • 00:01:11
    a variable in CSS like so but the
  • 00:01:14
    problem here is that the browser
  • 00:01:15
    interprets its value as a string and
  • 00:01:17
    that makes it impossible to achieve
  • 00:01:19
    certain types of animations with
  • 00:01:20
    variables like the percentage of a
  • 00:01:22
    gradient with property you can now give
  • 00:01:23
    your variables a specific type like
  • 00:01:26
    number color percentage and so on which
  • 00:01:28
    not only makes your code safer but also
  • 00:01:30
    allows the browser to use that value in
  • 00:01:32
    animations speaking of animations
  • 00:01:34
    another powerful new out rule is
  • 00:01:36
    starting style which allows you to
  • 00:01:38
    define a style when an element is first
  • 00:01:40
    rendered in a page it's especially
  • 00:01:42
    useful when you have something like a
  • 00:01:43
    dialogue or popover or anything hidden
  • 00:01:46
    with display none because once you flip
  • 00:01:48
    display none it immediately appears in
  • 00:01:50
    the page even if you defined a
  • 00:01:51
    transition animation that's pretty
  • 00:01:53
    annoying but now with starting style we
  • 00:01:55
    can easily position an element as the
  • 00:01:57
    starting point for an animation like for
  • 00:01:59
    example we might translate a dialogue
  • 00:02:01
    off the screen but then transition it
  • 00:02:03
    into the middle of the screen when it's
  • 00:02:04
    open now the haters out there will tell
  • 00:02:06
    you that CSS is not a real programming
  • 00:02:08
    language but I disagree you can already
  • 00:02:10
    do math directly in CSS but now there's
  • 00:02:12
    additional math functions of round REM
  • 00:02:14
    and mod REM and mod work like the
  • 00:02:16
    modulus operator in JavaScript and round
  • 00:02:19
    lets you use different rounding
  • 00:02:20
    strategies like floor ceiling and trunk
  • 00:02:22
    it that could come in useful but one
  • 00:02:24
    little feature that's way more powerful
  • 00:02:26
    in my opinion is light dark when you
  • 00:02:28
    have a website that toggles between
  • 00:02:29
    light and dark mode it can be really
  • 00:02:31
    annoying to manage the styles for these
  • 00:02:33
    two modes but now you can easily write
  • 00:02:35
    these Styles side by side by providing
  • 00:02:37
    two different values depending on
  • 00:02:39
    whether or not the user system is set to
  • 00:02:41
    light or dark but one thing that's even
  • 00:02:43
    more difficult than dark mode is
  • 00:02:45
    designing the UI for form validation
  • 00:02:47
    it's already possible to render
  • 00:02:49
    conditional content using the valid and
  • 00:02:51
    invalid pseudo classes the problem
  • 00:02:53
    though is that these pseudo classes are
  • 00:02:54
    triggered immediately which means your
  • 00:02:56
    form might show an error message before
  • 00:02:58
    the user has even touched it but now now
  • 00:03:00
    we have pseudo classes for user valid
  • 00:03:02
    and user invalid which will only trigger
  • 00:03:04
    after the user has actually interacted
  • 00:03:06
    with a form and that provides a better
  • 00:03:08
    user experience with far less code
  • 00:03:10
    pretty cool and there's a bunch of other
  • 00:03:11
    CSS features I could have mentioned in
  • 00:03:13
    this video like container queries sub
  • 00:03:15
    Grid or the has selector but the thing
  • 00:03:17
    I'm most excited about is this little
  • 00:03:19
    property called interpolate size if
  • 00:03:21
    you've ever built a drop- down menu one
  • 00:03:23
    thing you might want to do is animate
  • 00:03:25
    the height when the user clicks to open
  • 00:03:27
    or close it but you'll be disappointed
  • 00:03:29
    to find out that that's not possible
  • 00:03:30
    when you have the height set to Auto
  • 00:03:32
    well now with interpolate size you can
  • 00:03:34
    use the allow keywords option to easily
  • 00:03:37
    animate that property or really any
  • 00:03:39
    other value that doesn't have an
  • 00:03:40
    explicit size awesome but at the
  • 00:03:42
    beginning of the video I mentioned that
  • 00:03:44
    there's something special about the
  • 00:03:45
    color of the new CSS logo Rebecca purple
  • 00:03:48
    is actually named after the daughter of
  • 00:03:50
    prolific CSS Pioneer and writer Eric
  • 00:03:53
    Meyer it was originally going to be
  • 00:03:54
    called Becca purple but at the age of
  • 00:03:56
    six she wanted everyone to start calling
  • 00:03:58
    her Rebecca and made it to six for
  • 00:04:00
    almost 12 hours before she passed away
  • 00:04:02
    as the parent of a 6-year-old myself
  • 00:04:04
    right now I can't even imagine the pain
  • 00:04:06
    but it's cool to know that her memory
  • 00:04:08
    will likely outlive all of us for
  • 00:04:09
    hundreds of years as a standard color in
  • 00:04:11
    CSS this has been the code report thanks
  • 00:04:13
    for watching and I will see you in the
  • 00:04:15
    next one
Tags
  • CSS update
  • web development
  • Rebecca purple
  • aligned content
  • CSS Houdini
  • form validation
  • light dark mode
  • animations
  • interpolate size