`round()` - New CSS functional notation

[ramiy]

Description

Document the CSS round() functional notation.

Motivation

Safari 15.4 already supports this CSS function.

Firefox 108 is going to support this function too, behind layout.css.round.enabled flag.

Additional details

https://w3c.github.io/csswg-drafts/css-values/#round-func

Related issues and pull requests

• BCD - https://github.com/mdn/browser-compat-data/pull/18173
• Syntaxes - https://github.com/mdn/data/pull/593

Addition information:

• Fixes: https://github.com/mdn/content/issues/22114
• WPT:
  • https://wpt.fyi/results/css/css-values/round-function.html?label=master&label=experimental&aligned&view=subtest&q=round
  • https://wpt.fyi/results/css/css-values/round-mod-rem-computed.html?label=master&label=experimental&aligned&view=subtest&q=round

[github-actions[bot]]

Preview URLs

• /en-US/docs/Web/CSS/round

Flaws (2)

URL: /en-US/docs/Web/CSS/round Title: round() Flaw count: 2

• macros:
  • /en-US/docs/Web/CSS/mod does not exist
  • /en-US/docs/Web/CSS/rem does not exist

(this comment was updated 2022-11-22 21:45:29.122654)

[hamishwillee]

Thanks @ramiy - much appreciated - I have subedited this to make it more clear. This was done as suggestions so my reasoning should be clear.

I've left this open because we should:

• Add some live or interactive examples
• Perhaps get another independent review when it is finished.
• Is there a parent page we need to link this to? Like a CSS math functions page?

[ramiy]

@hamishwillee

1. I will add some examples.
2. Another review will be great.
3. The parent page is the CSS functions page and specifically the Math functions section.

I also try to use the same structure in all the math functions. See examples in the trig functions and the exponential functions.