[Not release] [CSS] Support CSS round()

[hamishwillee]

Acceptance Criteria

• [ ] The listed features are documented sufficiently on MDN
• [ ] BCD is updated
• [ ] Interactive example and data repos are updated if appropriate
• [ ] The content has been reviewed as needed

For folks helping with Firefox related documentation

• [ ] Set bugs to dev-doc-complete
• [ ] Add entry to Firefox release notes if feature is enabled in release
• [ ] Add entry to Firefox experimental features page if feature is not yet enabled in release

Features to document

This supports the CSS round() func behind pref layout.css.round.enabled from FF108, which is default enabled on Nightly. The feature is already available on Safari, and planned for Chrome https://bugs.chromium.org/p/chromium/issues/detail?id=1284199

Needs:

• Document
• BCD update (note, fixed spec link in https://github.com/mdn/browser-compat-data/pull/18161)
• Experimental features

Related Gecko bugs

https://bugzilla.mozilla.org/show_bug.cgi?id=1764850

Other

• [ ] Check content open issues to see if any pertain to the subject matter. If there are any that can be closed because of the work, do so. If there are any that can be fixed relatively quickly because of the knowledge from completing this issue and you have time, feel free to go ahead and fix them.
• [ ] Check if glossary updates are required for the feature you're documenting - whether an existing term needs to be updated or a new term should be added.
• [ ] Check if BCD update means that content pages need to have experimental markup removed or deprecated markup added (front matter tags and macros).

[ramiy]

I'll handle it. I have documented all the new CSS math functions, I have 3 functions left to finish the job: round(), mod() and rem().

[hamishwillee]

Thanks very much @ramiy - you'll do a much better job than me!!!

[ramiy]

Documenting [css-value-4] round() function:

mdn/browser-compat-data:

• CSS round() - https://github.com/mdn/browser-compat-data/pull/18173

mdn/content:

• CSS round() - https://github.com/mdn/content/pull/22212
• Experimental Firefox Features - https://github.com/mdn/content/pull/22393

mdn/data:

• <round()> syntax - https://github.com/mdn/data/pull/593
• <rounding-strategy> syntax - https://github.com/mdn/data/pull/605

[hamishwillee]

@ramiy Awesome - thanks. Did you have a plan to also add the preference info to experimental features? https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Experimental_features#css

[hamishwillee]

The bulk of the work has been done by @ramiy .

Status (i.e. final checks):

• [x] BCD - Done
• [x] Docs
  • [x] Main docs done
  • [x] Additional work in https://github.com/mdn/content/pull/22212#issuecomment-1311975756
    • [x] make sure this is properly linked from parent docs
    • [x] Example - #22528
    • [x] Check is in sidebar
• [x] Experimental features - Done
• [x] dev-doc-complete

[ramiy]

@hamishwillee Where do you change the sidebar links? I guess it's not the content repo.

[hamishwillee]

@hamishwillee Where do you change the sidebar links? I guess it's not the content repo.

It doesn't matter, since a quick check shows it is in the sidebar :-)

But to answer, CSS sidebar is encoded in the CSSRef macro. All functions go into the Functions sidebar, based on their page-type metadata. You can see the data being added to the list here: https://github.com/mdn/yari/blob/main/kumascript/macros/CSSRef.ejs#L774

So nothing to do here since you already added the metadata.

[hamishwillee]

Bar final reviews, this looks like everything is done to me. Thanks @ramiy

Leaving open so can be closed by @Rumyra