Making the CSS property `appliesto` values more specific
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 787
- Forks
- 216
- Avg merge
- 1d 5h
- Merged PRs (30d)
- 6
Description
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:
- Does everyone agree that the
appliestoproperty should be as specific as possible for all properties? - Is there interest in expanding the
appliestoenum to make it able to cover more cases? For example, there is nogridAndFlexContainervalue now, but it would be useful in thealign-contentcase. In fact, it might become useful, at some point, to allow more complex values than just strings. For instance:gridContainer AND flexContainerseems 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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing the appliesto enum in css/properties.schema.json and the related entries in css/properties.json, using align-items, grid-auto-columns, and align-content as comparison cases. Review the linked inactive-css data and determine whether the existing enum can express the requested specificity. Done means reaching agreement on the scope and representation before updating the data.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100