CSS containment

One of Open Web Docs's 2024 goals is to document features supported by the three major browser engines, including ensuring all Interop features are fully documented.

We are starting by documenting all the features of Interop 2021-22 and 2023. Later this year, we will focus on the Interop 2024 features that will, at that point, be newly supported.

CSS containment project

The first sub-project completed was CSS containment. CSS containment is part of both Interop 2022 and Interop 2023, and is still being worked on as part of Interop 2024.

Containment improves rendering performance by isolating sections of content for delayed layout and rendering. Container queries, also defined in the CSS containment specification, enable targeting styles based on a container's size or style features.

We created a new CSS containment module landing page and guides. The module landing page includes a reference with links to all the properties, at-rules and descriptors, CSS functions, events, interfaces defined in the CSS containment specification, and guides. All these references were reviewed and updated as necessary.

The larger component of this project included updating the existing containment guides and creating new ones.

CSS containment guides

There are now three CSS containment guides on MDN:

Open Web Docs

Thanks to the support of our sponsors, we, the OWD technical writers, are able to review and update existing content and dedicate the time needed to write in-depth articles when documentation is found to be lacking. We found a gap in the documentation of container style queries, and had the support to fill it!

If you use MDN and find these resources helpful, please consider sponsoring OWD on GitHub or becoming an Open Web Docs sponsor on Open Collective. Contributions are what make OWD and our documentation efforts possible.