CSS container query support (`@container`)

[yhatt]

CSS container query is now available in all modern browsers. We can consider to treat the slide container as the CSS container.

If supported, the Markdown author can tweak style with the container query that is matching the size defined by the theme.

It might be not helpful because Marpit is not designed that the theme has multiple sizes, but it will be helpful in some variations of Marpit (e.g. Marp Core: the theme may have defined multiple sizes).

[EdwardPrentice]

I think this would be helpful for a media query around font size to basically allow the author to say "font-size to fit contents into slide please" and avoid overflowing. At least that's what I was trying yesterday, I might have been barking up the wrong tree though.

[yhatt]

@EdwardPrentice You already can test CSS container query by defining container-type: size within the section selector.

section {
  container-type: size;
}

/* Container query */
@container (width > 1000px) {
  h1 {
    color: red;
  }
}

h1 {
  font-size: 5cqw; /* Container-based unit */
}

I'm wondering if should add CSS container query support at the framework level, or should leave container-type declaration up to the theme/document author. We want more opinions from community.