Exciting features coming to the web

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

• The latest in Web UI - Una Kravets
• What's new in the Web - Rachel Andrews