Making the CSS property appliesto values more specific

[captainbrosset]

It feels to me like the appliesto property of the CSS properties data isn't defined very specifically at the moment.

For context, here is a concrete example:
https://developer.mozilla.org/en-US/docs/Web/CSS/align-items#formal_definition

MDN says that align-items applies to all elements (data is here). While true in the sense that it won't break if you apply it to any element, it actually won't do anything unless the element is not a grid container or a flex container.

Contrast this with this other example:
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns#formal_definition

MDN says that grid-auto-columns only applies to grid containers, which is true. But also, it won't cause any problem if you apply it to any other type of containers.

I would love if appliesto was more specific. There seems to be a lot of different values that the appliesto enum can take: https://github.com/mdn/data/blob/main/css/properties.schema.json#L162
and using the most specific one has advantages: it makes it easier for web authors to know why a property they're using isn't doing anything.

As an example, if you're confused about flexbox and you're trying to align items using align-content but you did not specify flex-wrap:wrap, then the property won't have any effects.

In this specific case, the data is actually very helpful. MDN says that align-content only applies to multi-line flex containers: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content#formal_definition
Although it's not entirely correct because it also applies to grid containers.

So I have two questions in this issue:

1. Does everyone agree that the appliesto property should be as specific as possible for all properties?
2. Is there interest in expanding the appliesto enum to make it able to cover more cases? For example, there is no gridAndFlexContainer value now, but it would be useful in the align-content case. In fact, it might become useful, at some point, to allow more complex values than just strings. For instance: gridContainer AND flexContainer seems like it would help.

As background to this, in the past I worked on this inactive-css repo with the hope to create a reusable dataset for exactly this case: https://github.com/captainbrosset/inactive-css
I'd be willing to transfer this data over to mdn/data (by mapping it to the appliesto field) if there is interest.

[captainbrosset]

As discussed on the Mozilla chat just now, it seems you folks are moving to webref for this data.
This is great, as it seems like the data found in the spec is actually really specific.

Example for align-content: https://github.com/w3c/webref/blob/main/tr/css/css-align.json#L11

"appliesTo": "block containers, multicol containers, flex containers, and grid containers"

[teoli2003]

Originally, we created mdn/data from the spec, but without a process to update it when the spec evolved.

I would like to take this directly from webref. Note that the fact that this is prose and not a real enum, makes it hard to ensure coherence (there is no real guarantee that different specs use the same wording for the same "appliesTo", and there may be edge cases where the prose is very specific), or to translate into other languages.

Maybe we should do some statistics to see if it could be an enum-like list, and eventually how many exceptions there would be.

[captainbrosset]

That sounds good to me. Fetching all of the webref data for CSS and checking all of the possible appliesto cases should be quick to do and would give a good idea of the complexity involved.

[captainbrosset]

I did a quick test, got all data from webref's CSS properties appliesTo fields and removed duplicates. Here is the list:

List

:before and :after pseudo-elements
‘circle’ and ‘ellipse’ elements
‘circle’ element
‘ellipse’, ‘rect’
‘ellipse’, ‘rect’ elements
‘path’
‘svg’, ‘rect’, ‘image’, ‘foreignObject’ elements
‘text’
‘text’ elements
*
absolutely positioned elements
Absolutely positioned elements. In SVG, it applies to elements which establish a new viewport, pattern elements and mask elements.
all elements
all elements (but see prose)
all elements and pseudo-elements, but not ::first-line or ::first-letter.
all elements and text
all elements but non-replaced inline elements, table columns, and column groups
all elements but non-replaced inline elements, table rows, and row groups
all elements except elements with table display types other than table-caption, table and inline-table
all elements except inline boxes
all elements except inline boxes and internal ruby or table boxes
all elements except inline-level boxes, internal ruby boxes, table column boxes, table column group boxes, absolutely-positioned boxes
all elements except internal table elements, ruby base containers, and ruby annotation containers
all elements except non-replaced inlines
all elements except ruby base containers and ruby annotation containers
all elements except table row groups, rows, column groups, and columns
All elements except table row groups, table column groups, table rows, table columns, ruby base containers, ruby annotation containers
all elements except table-column-group and table-column
all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
all elements except: internal table elements other than table cells, ruby base containers, and ruby annotation containers
all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups.
all elements that accept width or height
all elements, and optionally to the ::before and ::after pseudo-elements
all elements, but not pseudo-elements
All elements, but not pseudo-elements such as ::first-line, ::first-letter, ::before or ::after.
all elements, but see prose
All elements, except internal table elements when border-collapse is collapse
all elements, except table element when border-collapse is collapse
all elements, tree-abiding pseudo-elements, and page margin boxes
all elements.
All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
All elements. In SVG, it applies to container elements without the defs element and all graphics elements
All elements. In SVG, it applies to container elements without the defs element, all graphics elements and the use element.
All elements. In SVG, it applies to container elements, graphics elements and graphics referencing elements. [SVG11]
all enabled elements
All filter primitives
All HTML elements
all, but see {visuren.html#dis-pos-flo}9.7{}
Applies to SVG graphics elements
block container elements
block containers
block containers [CSS2], flex containers [CSS3-FLEXBOX], and grid containers [CSS3-GRID-LAYOUT]
block containers and inline boxes
block containers and multicol containers
block containers except table wrapper boxes
block containers that establish an inline formatting context
block containers which are also fragmentation containers that capture region breaks
block containers, flex containers, and grid containers
block containers, inline boxes, table rows, grid containers, flex containers, and SVG text content elements
block containers, multi-column containers, flex containers, grid containers
block containers, multicol containers, flex containers, and grid containers
block-level boxes
block-level boxes and internal table elements except table cells
block-level boxes, absolutely-positioned boxes, and grid items
block-level boxes, grid items, flex items, table row groups, table rows (but see prose)
block-level elements
block-level elements (but see text)
block-level elements, floats, regions, pages
block-level elements.
block, flex and grid containers
boxes that create class A break points
certain inline-level boxes and ::first-letter and inside ::marker boxes (see prose)
container elements, graphics elements and ‘use’
container elements, graphics elements, gradient elements, ‘use’ and ‘animate’
CSS Regions
elements
elements for which layout containment can apply
elements that accept input
elements with 'display: list-item'
elements with overflow other than visible, and optionally replaced elements such as images, videos, and iframes
elements with size containment
feDiffuseLighting and feSpecularLighting elements
feFlood and feDropShadow elements
flex containers
flex items
flex items and grid items
flex items, grid items, and absolutely-positioned boxes
floats
fragment boxes
graphics elements and ‘use’
grid containers
grid containers with masonry layout
grid containers with masonry layout in their block axis
grid containers with masonry layout in their inline axis
grid items and absolutely-positioned boxes whose containing block is a grid container
images
in-flow block-level elements
inline boxes
inline boxes and block containers
inline boxes and text
inline boxes, but not ruby container boxes nor internal ruby boxes
inline-level and table-cell elements
inline-level boxes
inline-level boxes and flex items
inline-level boxes and SVG text content elements
inline-level boxes, flex items, grid items, table cells, and SVG text content elements
interlinear ruby annotation containers
list items
mask elements
multi-column containers, flex containers, grid containers
multi-line flex containers
multicol containers
multicol containers, flex containers, and grid containers
n/a
Non-replaced block containers. This might be expanded in future versions of the specification to allow other types of containers to receive flow content.
non-replaced inline boxes and SVG text content elements
positioned elements
replaced elements
ruby annotation containers
ruby bases, ruby annotations, ruby base containers, ruby annotation containers
Same as border-top-color
Same as border-top-left-radius
Same as border-top-style
Same as border-top-width
same as height and width
Same as height and width
Same as margin-top
Same as overflow-x and overflow-y
Same as padding-top
scroll container elements
scroll containers
scrolling boxes
See below
see individual properties
See individual properties
sensitive text inputs
shapes
shapes and text content elements
spatial navigation containers
SVG shapes
table and inline-table elements
table and inline-table elements*
table grid boxes
table grid boxes when border-collapse is separate
table-caption boxes
table-caption elements
table-cell boxes
table-cell elements
text
text and block containers
text and SVG shapes
text content elements
transformable elements

And here is a graph that shows how many times each prose appears in the WebRef repo: https://docs.google.com/spreadsheets/d/1VZGBOD1uT8IawXSiMBe_djWN5WrDOcSxQvNXMkM75p4/edit?usp=sharing

This shows that there is a long tail of really seldom used one-off prose. More than 50% of all "applies to" prose is made of only 9 different sentences:

• all elements
• *
• see individual properties
• text
• all elements and text
• text and SVG shapes
• all elements except ruby base containers and ruby annotation containers
• positioned elements
• block containers

[wbamberg]

Thanks for this analysis! I think it will be really helpful when we come to make CSSInfo use webref. The long tail makes it seem like we could have a hybrid approach, with a fairly small enumerated set plus a bailout "See prose" option for the rest.

If I'm reading the list correctly it seems like there are things that could be fed back into the specs here too, like values that differ only in punctuation or capitalization.

[captainbrosset]

If I'm reading the list correctly it seems like there are things that could be fed back into the specs here too, like values that differ only in punctuation or capitalization.

Totally! It would be a really good thing to harmonize across specs. That said, I don't know if there would be a way to ensure things don't start deviating again.

[ferdnyc]

Just to revive this a little, it doesn't seem like the current webref is entirely on par with the data in the repo here, in all cases.

For example, a user recently reported (mdn/content#31806) that margin-left does not apply to ::first-line, contrary to https://github.com/mdn/data/blob/main/css/properties.json which claims:

data/css/properties.json

Lines 6521 to 6540 in 4f43ef9

	"margin-left": {
	"syntax": "<length> | <percentage> | auto",
	"media": "visual",
	"inherited": false,
	"animationType": "length",
	"percentages": "referToWidthOfContainingBlock",
	"groups": [
	"CSS Box Model"
	],
	"initial": "0",
	"appliesto": "allElementsExceptTableDisplayTypes",
	"computed": "percentageAsSpecifiedOrAbsoluteLength",
	"order": "uniqueOrder",
	"alsoAppliesTo": [
	"::first-letter",
	"::first-line"
	],
	"status": "standard",
	"mdn_url": "https://developer.mozilla.org/docs/Web/CSS/margin-left"
	},

(It should just be "alsoAppliesTo": ["::first-letter"].)

...But looking at the equivalent data in https://github.com/w3c/webref/blob/main/tr/css/css-box.json, the fact that margin-left applies to ::first-letter doesn't seem to be expressed AT ALL:

    {
      "name": "margin-left",
      "value": "<length-percentage> | auto",
      "initial": "0",
      "appliesTo": "all elements except internal table elements, ruby base containers, and ruby annotation containers",
      "inherited": "no",
      "percentages": "refer to logical width of containing block",
      "computedValue": "the keyword auto or a computed <length-percentage> value",
      "canonicalOrder": "per grammar",
      "animationType": "by computed value type",
      "styleDeclaration": [
        "margin-left",
        "marginLeft"
      ]
    },

The information is simply not present.

So, while clearly https://github.com/mdn/data/blob/main/css/properties.json needs to be corrected, it appears that if it were to be replaced with the equivalent webref content, significant detail would be lost. Even ignoring the "free-form string vs. formal enum" issues discussed above.

[wbamberg]

Yes - as far as I know, webref/css doesn't include pseudo-elements here, I guess because it's not represented in the source: https://drafts.csswg.org/css-box/#margin-physical.

[ferdnyc]

webref/css doesn't include pseudo-elements here

Or anywhere, it seems — at least, not in detail.

I was hoping the information might be present somewhere else in the webref data, and could simply be extracted into the structure used by MDN. (For example, MDN's own reference pages for ::first-letter and ::first-line provide lists of properties each does accept.) But, no such luck.

webref's entire documentation for ::first-line, for example, is contained in https://github.com/w3c/webref/blob/main/tr/css/css-pseudo.json and consists of:

    {
      "name": "::first-line",
      "prose": "The ::first-line pseudo-element represents the contents "
               "of the first formatted line of its originating element."
    },

Beyond that, it gets a few mentions in other contexts (like https://github.com/w3c/webref/blob/main/tr/css/css-regions.json which sees fit to note that flow-into applies to "All elements, but not pseudo-elements such as ::first-line, ::first-letter, ::before or ::after."), but nothing formal enough for MDN use.