Exciting features coming to the web

Mac computer glowing in a dark room

I watched a couple videos from the Google I/O '24 on YouTube and had a blast. In this blog post, I would like to highlight some of the features that I learned about.

The new features

  • Size container queries

    • What's it for: Used to apply styles to an element based on the size of the element's container
    • Why I care: Can be used as an alternative to media queries

  • :has()

    • What is it: Selector that targets elements based on whether they contain specific child elements or selectors
    • Why I care: Easier way to select elements

  • Subgrid

    • What's it for: Allows child elements to inherit a grid layout from their parent, creating a more flexible and efficient grid system
    • Why I care: More control over the layout of child elements in a grid

  • CSS nesting

    • What's it for: Allows you to style elements within other elements, creating a more organized and efficient stylesheet
    • Why I care: Shorter and better organized CSS code

  • <search>

    • What is it: Custom element used to define a search field or input element
    • Why I care: Better accessibility (no need to input ARIA to specify search elements)

  • Responsive <video> (using <source>)

    • What's it for: Allows you to support various media types in the same video element (just like <audio>)
    • Why I care: More control over <video>

  • inert attribute

    • What is it: HTML attribute used to temporarily disable an element, preventing it from interacting with user events
    • Why I care: Easy way to disable elements

  • color-mix()

    • What is it: CSS function used to blend multiple colors together, creating new colors based on specified mixing modes and ratios
    • Why I care: More colors to mesmerize site visitors

  • :user-valid and :user-invalid

    • What is it: Pseudo-class used to style elements that have been marked as valid/invalid by the user
    • Why I care: Easier form validation

  • Compression streams

    • What is it: JavaScript objects that allow you to efficiently compress or decompress data in real-time, without having to buffer the entire data set in memory
    • Why I care: Easier audio manipulation, when I eventually get the time

  • Declarative shadow DOM

    • What is it: Method that allows developers to create a ShadowRoot without using JavaScript
    • Why I care: Easier way to incorporate web components into my designs

  • popover attribute

    • What is it: Customizable overlay element that appears on top of the page, often used to display information or options
    • Why I care: Can finally create tooltips, toasts, snackbars and popups with ease (no more z-index battles!)

  • Scroll-driven animations

    • What is it: Animations that trigger or change based on the user's scrolling position on the page
    • Why I care: Easy scrollytelling, all handled in CSS

  • View transitions

    • What's it for: Allow you to animate changes between different views or layouts on a webpage
    • Why I care: Cross document view transitions

  • Anchor positioning

    • What is it: Placement of an element relative to a specific anchor point, such as the top-left corner of the browser window or the parent element
    • Why I care: Easier positioning of elements on the page (reminds me of Qt Quick, which also uses anchors)

  • <select>

    • What is it: Element used to create a dropdown list of options for users to choose from
    • Why I care: Can customize dropdowns easily

Features not quite ready yet

  • The masonry layout

    • What is it: Layout technique that arranges elements in a staggered, multi-column grid, similar to the bricks in a masonry wall
    • Why I care: More eye candy for site visitors

  • Third-party cookie deprecation

    • What is it: Process of phasing out cookies set by websites other than the one being visited, aiming to protect user privacy and limit targeted advertising
    • Why I care: Cripples advertising, protects users

  • Scoped transitions

    • What is it: Allows you to limit the scope of animations to specific elements, preventing them from affecting other elements on the page
    • Why I care: More control

  • Gesture-driven transitions

    • What is it: Transitions that occur based on user gestures like swiping, pinching, or tapping.
    • Why I care: More control

  • @scope()

    • What's it for: Simplifies element selection by targeting specific DOM subtrees, avoiding overly specific selectors and reducing DOM coupling.
    • Why I care: Namespaces are finally in CSS, goodbye BEM!

Issues

My only issue with these features is that browser support is not universal yet. It may take a couple years 😢.

The bottom line

The web rocks. I'm happy to watch its growth and to be a contributor.

Long live the Wild Wild Web!

More resources

If you would like to reply to or comment on this blog post, feel free to email me at efe@mmhq.me.