CSS formal syntax - a basic question about how we render this currently

MDN
#1

I think there’s a problem with how this is currently being rendered, on a fundamental level. Consider the formal syntax as shown on the page for [shape-image-threshold](https://developer.mozilla.org/en-US/docs/Web/CSS/shape-image-threshold#Syntax):

<number>

That’s hardly complete. It’s not like the syntax for shape-image-threshold is something like:

#someid {
  width: 150px;
  height: 150px;
  0.7;
}

The actual usage is:

#someid {
  width: 150px;
  height: 150px;
  shape-image-threshold: 0.7;
}

As such, then, shouldn’t the formal syntax box actually show:

shape-image-threshold: <number>

Wouldn’t that be more accurate?

Sheppy

#2

I am in two minds about this. I think you make a reasonable point, and it would make things more readable for simple formal syntax examples.

However, in complex ones adding in the property name might just add to the noise and make it harder to parse? Something like this for example: https://developer.mozilla.org/en-US/docs/Web/CSS/transform

It is kind of unwritten knowledge that this is value syntax rather than syntax for the whole declaration. Couldn’t we just be more explicit about that, maybe change the “Formal syntax” heading to “Formal value syntax” ?

#3

I can’t imagine that adding the one word would overburden readers with information overload, and it would improve the readability of the vast majority of these.

#4

Maybe so. Would be good to get some more opinions here.