On May 27, 2020, I learned...

There are six types of CSS values

When I think of values in CSS, I think of what’s set right after the property. So, if font-size is the property, then something like 16px would be the value.

It’s apparently a lot more nuanced than that and there are six types of values that CSS processes as it figures out what to display:

  • Declared: Any value that affects an element, whether it’s set on that element or not.
  • Cascaded: The “winning” value from the list of declared values.
  • Specified: A value that is set on a parent element that is intended to be inherited by the child. A cascaded value is often a specific value, assuming that cascaded result was intentional.
  • Computed: The value once all calculations have taken place, including ones for relative units.
  • Used: The value that winds up being used to render the element’s display. This is the point where all relative units resolve to absolute pixel values.
  • Actual: The final (final!) value. Usually this is the value, but it could be different after taking any other browser adjustments into consideration, say tweaks to the font size based on the fonts that are available.

These are super simplified definitions, of course, but who knew there were so many names for what winds up being used on the page!

Specification

Leave a Reply

Markdown supported