mdn
Document css-values-4 calc data types `<calc-sum>`, `<calc-product>`, `<calc-value>` and `<calc-constant>`
Proposed
9-19-2022
Accepted/Rejected
No response
Accepted/Rejected by
No response
Proposed by
@ramiy
Informed
@bsmth , @Rumyra
Proposal
Document calc-related data types.
Context
CSS-Values-4 spec introduced the following data types: <calc-sum>, <calc-product>, <calc-value> and <calc-constant>.
They are all calc-related data types and they should be documented, each in a separate page, and add to CSS data types page.
Some of the content currently documented in calc() should be moved to those data type pages.
Separating the information to several data type pages will help us document additional information like the math constant ( e | pi | infinity | NaN ). Those constant, for example, should be documented in the <calc-constant> page under the browser compatibility data table (https://github.com/mdn/browser-compat-data/pull/17828).
In addition, documenting the new data types in separate pages will make them clickable in the "formal syntax" sections for CSS functions that use those data types (https://developer.mozilla.org/en-US/docs/Web/CSS/calc#formal_syntax).
Consequences
Pros - More data types like in the spec. Cons - More work.
Alternatives Considered
We can document all the data types, all the constant and the other keyword inside the calc() function. Not the best way, but it's an alternative.
mdn/content:
- CSS data types - https://github.com/mdn/content/pull/21360
<calc-sum>- https://github.com/mdn/content/pull/21935<calc-product>-<calc-value>-<calc-constant>- https://github.com/mdn/content/pull/20856
mdn/browser-compat-data:
<calc-sum>-<calc-product>-<calc-value>-<calc-constant>-- https://github.com/mdn/browser-compat-data/pull/17828
- https://github.com/mdn/browser-compat-data/pull/17949
mdn/data:
- CSS Syntaxes -
- Some synaxes already implemented https://github.com/mdn/data/blob/main/css/syntaxes.json#L92-L100
- https://github.com/mdn/data/pull/604
Hey @ramiy - thanks so much for the proposal and following the process!
This is a new process and we're still tweaking it. I have one question (which we in due course can add to the proposal template):
What's the browser status of these features? We don't document features until they are in stable browser versions and not behind a pref. Thanks!
calc() function is well supported across all major browsers for a long time. So are the standard operator (+, -, / , *). My only concern was with the constants.
Firefox still behind a flag but I tested it with the flag on, and it works. Both margin: calc(e * 1px) and margin: calc(pi * 1px) work as expected.
As for Safari, they support all the CSS math functions.
Many of the math tests include e and pi constants, and they all pass.
For example, see those trig tests: https://wpt.fyi/results/css/css-values/sin-cos-tan-computed.html?label=master&label=experimental&aligned&view=subtest&q=cos
My only concern was with the constants.
Thank you for the info! How is support for the above in Safari?
@schalkneethling See the web platform tests link I attached above. Both Safari and Firefox support constants.
In any case, we need only one browser to support them.
In any case, we need only one browser to support them.
I believe the criteria is that it needs to be in two stable release browsers and not behind a flag. @Rumyra, am I correct here?
In any case, we need only one browser to support them.
I believe the criteria is that it needs to be in two stable release browsers and not behind a flag. @Rumyra, am I correct here?
I think you are talking about the criteria for accepting CSS specs. When two stable browsers support a spec, the spec is no longer a draft, it becomes a recommended spec.
The criteria for MDN is to have a BCD data.
The criteria for BCD is to have at least one stable browser to support the feature.
I believe the criteria is that it needs to be in two stable release browsers and not behind a flag. @Rumyra, am I correct here?
It's still a little wooly for content, but ideally minimum one stable browser release as long as bcd has been added.
For these features specifically I think it's ok to document as they have a lot of interest and are currently being implemented
@ramiy would it be ok to create a tracking issue on content for this work based on your list above? I can do it if you like
@ramiy would it be ok to create a tracking issue on content for this work based on your list above? I can do it if you like
@bsmth asked me to open it here.