report something about values and notations

[bartveneman]

font-family: 'A'; is the same as font-family: A;. The value as the browser interprets it is the same, but their notations are different. Is there something we could do with this?

Some more examples where values are the same, but different notations:

• #000 vs hsl(0, 0, 0)
• font-size: 1em vs font-size: 100%

[bartveneman]

Perhaps all values could also return their 'normalized' value. It's not too hard for most cases, but might be problematic for some:

Colors

Colors can be fine for keywords, hex, rgb and hsl. But what about different color spaces, like CMYK and LCH?

test-colors {
  color: black;
  background-color: #000;
  text-shadow: 0 0 rgb(0, 0, 0);
  box-shadow: 0 0 0 hsl(0, 0%, 0%);
}

Font-sizes

test-font-size {
  font-size: 1em;
  font-size: 100%;
}

font-families

Font-families can be quoted differently (or not at all), but does that mean they still equate to the same 'variable' for the browser?

test-ff {
  font: normal 1em/1 Arial;
  font-family: 'Arial';
  font-family: "Arial";
  font-family: 'Arial', sans-serif;
}

durations

test-durations {
  animation-duration: 200ms;
  animation-duration: 0.2s;
}