CSSSyntax and nonstandard properties

[wbamberg]

With the new CSSSyntax macro, we have a problem with nonstandard properties.

The new CSSSyntax macro fetches syntax from the specs, but of course nonstandard properties aren't in the specs, so the syntax does not exist.

As far as I can tell this applies to the following pages:

https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-float-edge
https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-force-broken-image-icon
https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-image-rect
https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-image-region
https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-orient
https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-outline-radius
https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-outline-radius-bottomleft
https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-outline-radius-bottomright
https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-outline-radius-topleft
https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-outline-radius-topright
https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-user-focus
https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-user-input
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-border-before
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-attachment
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-box-image
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-composite
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-position-x
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-position-y
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-repeat-x
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-repeat-y
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-fill-color
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-security
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke-color
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke-width
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-touch-callout

I can think of three options here, in order of difficulty, easy to hard:

1. omit formal syntax for nonstandard properties
2. hardcode formal syntax in the page for nonstandard properties
3. keep a stripped-down version of the mdn/data JSON somewhere (maybe in https://github.com/mdn/content/tree/main/files/jsondata) and teach CSSSyntax to look there as a fallback.

(2) seems like a reasonably pragmatic option. One drawback is that the formal syntax would not get syntax highlighting.
(3) isn't particularly hard to do but means we don't get to make the platform simplification that we would like.

[teoli2003]

For these properties, we "invented" the formal syntax in mdn/data.

There is not much usefulness in point 3. (Note that this doesn't mean we will strip these formal syntaxes in mdn/data, so third-party can continue to use them; they are low-maintenance as they change rarely).

This leaves us with 1. and 2. For coherence with other pages, I would say, let's hardcode them. The missing syntax highlighting looks like a minor annoyance.