Re: [csswg-drafts] [css-contain-3] Provide a syntax to query a specific container-type (#6393)

A few options for a shared shorthand…

We current `container` property syntax relies on consistent order, and the `/` divider (eg `types / names`). In order to make that work with both sides optional, the delimiter needs to be used for all names, even when no type is given. Either using punctuation or a keyword:

```css
/* using the current `/` divider */
@container inline-size / my-name ( width > 30em ) { … }
@container inline-size ( width > 30em ) { … }
@container / my-name ( width > 30em ) { … }

/* using a single keyword, still ordered */
@container for inline-size as my-name ( width > 30em ) { … }
@container as my-name for inline-size ( width > 30em ) { … }
@container for inline-size ( width > 30em ) { … }
@container as my-name ( width > 30em ) { … }
```

But that order was based on the assumption that a type is required, and names are optional in the shorthand. That assumption is clearly false in the `@container` rule, but it may also be wrong for the shorthand property. If we consider re-using named containers for something like a scroll-timeline (see @@@), it doesn't seem like types should be required in those situations. That makes me want a more flexible syntax, where the order is less important. That could be done with two keywords (`'for' <types> || 'as' <names>`): 

```css
@container for inline-size as my-name ( width > 30em ) { … }
@container as my-name for inline-size ( width > 30em ) { … }
@container for inline-size ( width > 30em ) { … }
@container as my-name ( width > 30em ) { … }
```

But the more I stare at this, the more tempted I am to just use dashed-idents for names, and allow the two values to mingle completely: 

```css
@container inline-size --my-name ( width > 30em ) { … }
@container --my-name inline-size ( width > 30em ) { … }
@container inline-size ( width > 30em ) { … }
@container --my-name ( width > 30em ) { … }
```

That might also allow us to express and/or combinations, maybe with the `/` divider between container-selection and query logic (if that division needs more clarity). Something like:

```css
@container inline-size and --my-name / ( width > 30em ) { … }
@container (--my-name or --other-name) / ( width > 30em ) { … }
```

We could consider adding parenthesis around any of these options, if it helps.

-- 
GitHub Notification of comment by mirisuzanne
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6393#issuecomment-926965198 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 24 September 2021 23:15:53 UTC