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.
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.
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:
A huge thank you to the individuals and organizations
sponsoring OddBird’s open source work!
Blue-Footed Boobies
Common Loons
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!
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…
What makes something a ‘grid’, and what’s at stake?
byMiriam Suzanneon
Back in 2020, Firefox released a prototype for doing ‘masonry’ layout in CSS. Now all the browsers are eager to ship something, but there’s a hot debate about the best syntax to use.
Over the last month, the CSS Working Group has determined we can loosen containment restrictions for query containers, and agreed on a syntax for special-case support queries (like support for the gap property in a flex context, or support for align-content in a block flow context).
The CSS Working Group has regular face-to-face meetings (hybrid online/in-person) throughout the year, and they always result in a flurry of activity! Here’s a rundown of some highlights from the last few months, with a focus on the features I maintain.
Take your time with new CSS, but don’t sleep on the essentials
byMiriam Suzanneon
Several people have asked recently why container queries aren’t being used more broadly in production. But I think we underestimate the level of legacy browser support that most companies require to re-write a code-base.
I joined Den Delimarsky on the Work Item podcast to talk about my path as a developer – from building a website for my theater company, to building a career and a company around it. In this show, we talk about the power of the web, and how CSS is…
The CSS Working Group has agreed to move forward with CSS-native mixins. But some recent mixin-like CSS tricks have an advantage that the official proposal doesn’t account for: they make it easy to remove a mixin after it’s already been mixed in.
In this episode of the Mechanical Ink podcast, host Schalk Neethling sits down with Miriam Suzanne, a multifaceted expert in web development, an invited expert to the CSS Working Group, and a founder of OddBird.
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.
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.
The complexities of containment, overflow, and ‘propagation’
byMiriam Suzanneon
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…
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!
Experimenting with the shared element transitions API
byMiriam Suzanneon
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?
Cascade layers are an exciting new addition to the CSS specification. A newly released polyfill now provides even greater browser support for the feature.
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.
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.
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.
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.
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 W3CCSS Working Group.
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.
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…
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.
Now is the time to begin experimenting with a long requested layout tool.
byDavid A. Herronon
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.
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.
