CSS Container Queries Notes

README.md

CSS Container Queries Notes

Detecting a layout container

1. If the target rule represents a style rule;
2. If the target rule style contains a fallback contain property; 1. If the fallback contain property represents a layout container;
   1. For each element matching the selector of the target rule;
   2. Add the element to the list of layout containers, then;
   3. Add a fallback layout containment rule for that specific element.

Detecting a fallback container query

1. If the target rule represents a fallback container query;
2. Parse the container query from the target rule, then,
3. For each inner rule of the target rule; 1. If the inner rule is a style rule,
   1. For each element matching the selector of the target rule;
   2. If the element is contained by a layout container; 1. Ensure activation of the layout container's resize observer, then; 2. Add a resize listener matching the parsed container query, which;
      1. On match, activates the inner rule for that specific element, otherwise;
      2. deactivates the inner rule for that specific element.

---

References

A fallback layout containment rule

A fallback layout containment rule is a zero-specificity rule with fallback properties for simulated layout containment; a transform property with a value of scale3d(1,1,1) used for positioning context and stacking context, and a width property with a value of either 0% or 100% based on the outer display of the element used for block formatting context.

A fallback container query

A fallback container query is a @media rule beginning with --css-container.

A fallback contain property

A fallback contain property is a --css-contain property.

A rule for "that specific element"

A rule for "that specific element" is a rule using :where, :root and :nth-child selectors to target a specific element.

---

Additional Code References

What does a polyfill-able layout container literally look like?

article {
  --css-contain: layout inline-size;
  contain: layout inline-size;
  display: flex;
}

The parseable fallback containment declaration could be statically generated.

What does a polyfill-able container query literally look like?

@media --css-container and (min-width: 520px) {
  p {
    box-shadow: 0 0 0 10px;
  }
}

@container (min-width: 520px) {
  p {
    box-shadow: 0 0 0 10px;
  }
}

The parseable fallback container query could be statically generated.

How would one detect support for container queries?

Support could be implicitly detected using CSS.supports('contain: layout inline-size').

Support could be explicitly detected using the CSSOM, inserting a @container rule, and then seeing whether the rule was successfully added.