Skip to main
CSS Containment Module, Level 3 specification -
screenshot with W3C logo

CSS Language Development

Cascade Layers, Container Queries, Scope, and more

We were sponsored by the Google Chrome UI Fund in our work developing new web platform functionality and tooling for developers. Over the course of the grant, we helped standardized a range of new CSS features now shipping in browsers – like Cascade Layers, Container Queries, and CSS Scope – as well as polyfills for CSS Anchor Positioning and the Popover attribute.

Sponsor our open source work »

Working with Miriam and her team is a force multiplier for my engineering team. We ship higher quality APIs much faster than we had before.

What We Did

Working in the open, we researched the major pain-points and most highly-requested features in CSS – along with the existing tools and proposed solutions. That research led to a number of new proposals and explainers for new CSS features like Cascade Layers, Container Size & Style Queries, and CSS Scope.

As an Invited Expert on the CSS Working Group, Miriam was able to guide those proposals through the standardization process – incorporating feedback from web authors and browser implementors, as well as the W3C Technical Architecture Group. All three of the primary specifications have stabilized as ‘Working Drafts’ and begun shipping in browsers. Container Queries and Cascade Layers are both available in all major browsers, and the Cascade Layers specification has moved on to become a ‘Candidate Recommendation’ – the final stage for a spec to be considered complete.

[CSS Scope] looks amazing tbh. Simple and very easy to leverage in existing models. I can already see Vue SFCs using this under the hood.

So happy that this work is happening. Declarative style scoping will be a game changer.

In addition to leading those three features through the standards process, Miriam and the OddBird team have contributed to a range of other CSS and HTML specifications:

Developers who use our APIs are so happy with the results, even calling it a renaissance of CSS.

Services

Languages & Tools

Open Source Sponsors

Current Sponsors

A huge thank you to the individuals and organizations sponsoring OddBird’s open source work!

Open Collective Avatar for NorahOpen Collective Avatar for Zach LeathermanOpen Collective Avatar for Outline GbROpen Collective Avatar for basherOpen Collective Avatar for Mat MarquisOpen Collective Avatar for HiddeOpen Collective Avatar for Paul van BuurenOpen Collective Avatar for JohannesOpen Collective Avatar for William KillerudOpen Collective Avatar for Nikita DubkoOpen Collective Avatar for Eric Portis

Sponsor OddBird’s OSS Work

We love contributing back to the languages & tools that developers rely on, from CSS & Sass to browser polyfills and Python. Help us keep that work sustainable and focused on developer needs!

2024 Posts

  1. A cat sitting in a box
thinking OMG.
I have so many questions
for this damn box.
    Talk post type

    Cascading Layouts

    A workshop on resilient CSS layouts, June 24-26, 2024

    CSS layout techniques have come a long way since the early days of responsive design, but many websites are still using decade-old approaches that require more fragile code and more ongoing maintenance. Take your sites to the next level with this 3-session workshop on building more resilient and maintainable web…

    see all Talks & Workshops
  2. Two websites loaded on
the WWW Hypermedia Browser,
using the emulator hosted by Remy Sharp --
our workshop page, and the 11ty symposium site --
both rendered as plain text
    Talk post type

    Hints and Suggestions

    First, Do No Harm

    Past
    • – Online

      11ty International Symposium on Making Websites Real Good

    see all Talks & Workshops
  3. Mia from behind,
standing at a laptop -
speaking to a conference audience
and gesturing to one side
    Talk post type

    Cascading Style Systems

    A workshop on resilient & maintainable CSS

    Past
    • – Online

      Smashing Workshops

    • – Freiburg, Germany

      Smashing Workshops

    see all Talks & Workshops

2023

  1. Shop Talk Show Podcast
    Podcast post type

    Cascade Layers, CSS Functions, and More

    I drop by the show to talk about CSS updates and news on container queries, rolling out cascade layers, !important things to remember, custom properties, exit animations, CSS functions, state queries, and more.

    see all Podcast posts
  2. Video post type

    Demystifying CSS Container Queries

    CSS Container Queries promise even more powerful styling approaches, but… what the heck are they? How do they actually work? Miriam joined Jason to teach and explore Container Queries in live code.

    see all Video posts
  3. Grainy art-deco illustration of a rocket launch
    Podcast post type

    CSS Containers

    A web development podcast from LogRocket

    I talk with Noel Minchow about CSS Container Queries, why they took so long, how they work, and what to watch out for.

    see all Podcast posts
  4. Three mud turtles
end-to-end on a small branch
floating in the water
    Talk post type

    CSS Containers, What Do They Know?

    A deep-dive introduction to CSS container queries

    Past
    • – Freiburg, Germany

      Smashing Conf

    • – Zurich, Switzerland

      Front Conference

    see all Talks & Workshops
  5. The top front of a bright yellow shipping container with the door open and a blue sky behind it
    Article post type

    Can We Query the Root Container?

    The complexities of containment, overflow, and ‘propagation’

    I spoke about Container Queries at both Smashing Conference (San Francisco) and CSS Day (Amsterdam) – where I recommended setting up a root container to replace most media queries. Since then, Temani Afif pointed out a few issues with that approach, and sent me down a rabbit hole of overlapping…

    see all Article posts
  6. Online Together Fall Summit 2021, October 11-13
    Talk post type

    Styling the Intrinsic Web

    With Cascade Layers & Container Queries

    Past
    • – Victoria, BC

      Camosun College

    • – San Francisco, CA

      SmashingConf SF

    see all Talks & Workshops

2022

  1. fragment of an inverted triangle with the cascade --
cascade layers are highlighted below element-attached styles
and above specificity
    Talk post type

    Cascading Layers of !mportance

    Past
    • – San Francisco, CA

      An Event Apart

    • – Denver, CO

      An Event Apart

    see all Talks & Workshops
  2. see all Talks & Workshops
  3. see all Article posts
    Wireframe of card elements
in different sized containers --
some laid out vertically in small spaces,
others horizontal when there's room.
    Article post type

    Use the Right Container Query Syntax

    Size queries are stable, and shipping in browsers

    Since we got a first look at a Container Queries prototype back in April 2021, the syntax has changed a few times. But now the spec is stable, browsers are getting ready to ship, and it’s time to make sure you’re using the same syntax they are!

  4. Grainy art-deco illustration of a rocket launch
    Podcast post type

    Styling the intrinsic web

    A web development podcast from LogRocket

    I talk with Noel Minchow about how to style the intrinsic web, what that means, and how it’s compatible with responsive design.

    see all Podcast posts
  5. A scene wipe transition in Star Wars,
as Luke and C-3PO in a speeder
wipe across a close-up
of Luke and Obi-Wan talking.
Over top, a dotted line shows the transition edge,
and a red arrow shows the transition movement
in front of the speeder.
    Article post type

    Every Transition is a Page Transition?

    Experimenting with the shared element transitions API

    There’s a new web API proposal for transitioning shared-elements across pages. It’s great for making smooth page transitions, but what if we apply it to individual elements with changing styles on a single page?

    see all Article posts
  6. see all Article posts
  7. Word Wrap Show
    Podcast post type

    Teleportation, PapayaWhip, and Cookies

    This episode went a little off the rails…

    I talk with Claire and Steph about changes to the Container Query syntax, our feelings about web components, named CSS colors, how much we like eating cookies, and other wild tangents.

    see all Podcast posts
  8. Video post type

    Making Sense of CSS Layers and Scope

    CSS is evolving rapidly and new features come online all the time. Join Morten & Miriam to talk about what CSS layers and scope are all about and how they will change how we work with and think about the cascade in the future.

    see all Video posts
  9. see all Link posts
    fragment of an inverted triangle with the cascade --
cascade layers are highlighted below element-attached styles
and above specificity
    Link post type

    A Complete Guide to CSS Cascade Layers

    Cascade layers are a new CSS feature that allows us to define explicit contained layers of specificity, so that we have full control over which styles take priority in a project without relying on specificity hacks or !important. This guide is intended to help you fully understand what cascade layers are for, how and why you might choose to use them, the current levels of support, and the syntax.

2021

  1. Now What?
    Podcast post type

    Developing the Future of the Internet

    Miriam talks to Now What? about why the internet looks the way it does, why designers and developers need to collaborate and how the future of the web must be built around inclusivity and respect.

    see all Podcast posts
  2. Miriam Suzanne speaking at a conference
    Podcast post type

    What’s Happening in CSS & Sass

    A podcast focusing on front end development but also covering a wide range of web development and design topics. We talked about CSS, Sass, and work being done in the W3C CSS Working Group.

    see all Podcast posts
  3. Talk post type

    Container Queries & The Future of CSS

    Modernizing the cascade for responsive design systems

    Past
    • – Online

      Smashing Meets CSSummer

    • – Online

      CSS Café

    see all Talks & Workshops
  4. Back of a head, out of focus, looking at code
    Podcast post type

    Web Ecosystem Health Part VI

    Igalia’s Brian Kardell sits down to chat with Miriam and Rachel Andrew about who works on standards, and who pays for that work.

    see all Podcast posts
  5. see all Podcast posts
  6. Word Wrap Show
    Podcast post type

    CSSWG, Container Queries, Scope, and Layers

    I talk with Claire and Steph about my journey into webdev and onto the CSSWG, what I find frustrating about how others use CSS, and the three specs I’m working on.

    see all Podcast posts
  7. A large, carved, wooden hand
supporting a tree that has nearly fallen over
    Article post type

    Support (Not) Unknown

    Adding Container Query tests to CSS @support

    Working on a new CSS feature like Container Queries, one of the most important considerations is to ensure a “migration path” – a way for developers to start integrating the new code, without breaking their sites on legacy browsers. That looks different depending on the feature, but can often include…

    see all Article posts
  8. F-Word
    Podcast post type

    Container Queries & the CSSWG

    I chat with Bruce Lawson & Vadim Makeev about Sass & Susy, CSS Layers & compatibility, Container Queries, and the CSS Working Group.

    see all Podcast posts
  9. Smashing Podcast #36, Miriam Suzanne, What is the future of CSS?
    Podcast post type

    What Is The Future Of CSS?

    Starting a new season of the Smashing Podcast with a look at the future of CSS. What new specs will be landing in browsers soon? Drew McLellan talks to Miriam to find out.

    see all Podcast posts
  10. see all Article posts
    blockquote with magenta background and polygonal clip-path
    Article post type

    Container Queries: a Quick Start Guide

    Now is the time to begin experimenting with a long requested layout tool.

    The @container query, that elusive feature developers have been requesting and proposing for years, has finally made its debut in a browser. Well, sort of. Here we’ll explain what container queries are, how they work, and what other features they might come with once fully supported in browsers.

2020

  1. see all Article posts
    Article post type

    W3C Invited Expert on the CSS Working Group

    Helping define the future of styles on the web

    I’ve joined the CSS Working Group as a W3C Invited Expert to help to develop the next level of Cascading & Inheritance, in addition to other CSS standards. I’m also currently active in the CSS4 and Design Token Community Groups.