Your browser may have trouble rendering this page. See supported browsers for more information.

This page shows the source for this entry, with WebCore formatting language tags and attributes highlighted.

Title

Terminology for CSS values

Description

<img attachment="image_(3).jpg" align="right">The article <a href="https://www.otsukare.info/2022/10/25/css-values-definitions" author="Karl Dubost" source="Otsukare">"Thousand" Values of CSS</a> clarifies the definitions for the various types of value in CSS. While there aren't a <i>thousand</i> different kinds of value in CSS, there are quite a few. Each has its <i>raison d'être</i>. The article is informative, but lists the values in what I consider to be an unintuitive order. I've changed the order and consolidated a bit. Each term links to the W3C documentation<fn> and each definition starts with the official description, a layman's translation, and a simple code example. Click to jump to the definition or read them in order to learn how they build on each other. <ul> <a href="#initial">Initial value</a> <a href="#declared">Declared value</a> <a href="#cascaded">Cascaded value</a> <a href="#specified">Specified value</a> <a href="#computed">Computed value</a> <a href="#used">Used value</a> <a href="#actual">Actual value</a> <a href="#resolved">Resolved value</a> </ul> <dl> <span id="initial"><a href="https://w3c.github.io/csswg-drafts/css-cascade-5/#initial-values" source="W3C">Initial value</a></span> <div><bq>Each property has an <i>initial value</i>, defined in the property’s definition table. </bq> I.e. the initial value could also be called the default value, as defined in the specification. <code> p { <hl>/* the initial value of <c>color</c> is <c>black</c> */</hl> } </code></div> <span id="declared"><a href="https://w3c.github.io/csswg-drafts/css-cascade-5/#declared" source="W3C">Declared value</a></span> <div><bq>Each property declaration applied to an element contributes a <i>declared value</i> for that property associated with the element.</bq> I.e. the declared value is the one that you've directly assigned to a property in a CSS element. <code> p { color: red; <hl>/* declared value is <c>red</c> */</hl> } </code></div> <span id="cascaded"><a href="https://w3c.github.io/csswg-drafts/css-cascade-5/#cascaded" source="W3C">Cascaded value</a></span> <div><bq>The <i>cascaded value</i> represents the result of the cascade: it is the declared value that wins the cascade (is sorted first in the output of the cascade). If the output of the cascade is an empty list, there is no cascaded value.</bq> I.e. the cascaded value is the declared value that sorts first in the list generated by the cascade of declared values that apply to that element. <code> p { color: red; <hl>/* declared value is <c>red</c> */</hl> } p { color: green; <hl>/* declared and cascaded value is <c>green</c> */</hl> } </code></div> <span id="specified"><a href="https://w3c.github.io/csswg-drafts/css-cascade-5/#specified" source="W3C">Specified value</a></span> <div><bq>The <i>specified value</i> is the value of a given property that the style sheet authors intended for that element. It is the result of putting the cascaded value through the defaulting processes, guaranteeing that a specified value exists for every property on every element.</bq> I.e., the specified value is the cascaded value, or the default value for that property, if there are no cascaded values. <code> p { color: red; <hl>/* declared value is <c>red</c> */</hl> } p { color: green; <hl>/* declared, cascaded, and selected value is <c>red</c>. */</hl> <hl>/* Also, the selected value for, e.g., <c>margin-left</c> is <c>0</c> because that's the default, and no value was specified. */</hl> } </code></div> <span id="computed"><a href="https://w3c.github.io/csswg-drafts/css-cascade-5/#computed" source="W3C">Computed value</a></span> <div><bq>The <i>computed value</i> is the result of resolving the specified value as defined in the “Computed Value” line of the property definition table, generally absolutizing it in preparation for inheritance.</bq> I.e., the computed value is the specified value, but converted to absolute units (e.g., <c>2em</c> converts to <c>32px</c> if the <c>font-size</c> is <c>16px</c>), or to a special value like <c>auto</c>. <code> html { font-size: 16px; } p { font-size; 2em <hl> /* declared, cascaded, and selected value are <c>2em</c>, but computed value is <c>32px</c>. */ /* computed value of <c>width</c> is <c>auto</c> because there is no declared value, so the selected value is the initial value. */</hl> } </code></div> <span id="used"><a href="https://w3c.github.io/csswg-drafts/css-cascade-5/#used" source="W3C">Used value</a></span> <div><bq>The <i>used value</i> is the result of taking the computed value and completing any remaining calculations to make it the absolute theoretical value used in the formatting of the document.</bq> I.e., the used value is the computed value, but special values are converted based on context. E.g., a computed value of <c>width: auto</c> will have a used value of <c>width: 100px</c> if the parent container is <c>100px</c> wide. <code> body { width: 100px; } p { width; auto <hl> /* declared, cascaded, selected, and computed value are <c>2em</c>, but used value is <c>100px</c>. */</hl> } </code></div> <span id="actual"><a href="https://w3c.github.io/csswg-drafts/css-cascade-5/#actual" source="W3C">Actual value</a></span> <div><bq>A used value is in principle ready to be used, but a user agent may not be able to make use of the value in a given environment. For example, a user agent may only be able to render borders with integer pixel widths and may therefore have to approximate the used width. Also, the font size of an element may need adjustment based on the availability of fonts or the value of the <c>font-size-adjust</c> property. The <i>actual value</i> is the used value after any such adjustments have been made.</bq> I.e., the actual value is the used value, but adjusted as necessary for the output device. <code> p { border-width: 1.1px; <hl> /* declared, cascaded, selected, computed, and used value are <c>1.1px</c>, but actual value is <c>1px</c>. */</hl> } </code></div> <span id="resolved"><a href="https://w3c.github.io/csswg-drafts/cssom-1/#resolved-values" source="W3C">Resolved value</a></span> <div>Despited the name, the value returned by the <c><a href="https://w3c.github.io/csswg-drafts/cssom-1/#dom-window-getcomputedstyle">getComputedStyle()</a></c> method will be either the computed or the used value, depending on the type of property. The result of this method is called the <i>resolved value</i>. <code> body { width: 100px; } p { width; auto } </code> <code> const p = document.querySelector('p')[0]; const <hl>resolvedValue</hl> = window.getComputedStyle(p).width; <hl>/* resolvedValue == 100px */</hl> </code></div> </dl> <hr> <ft>The W3C documentation lists the terms in the intuitive order, but is quite extensive and technical. The summary in this article is, I hope, easier to understand.</ft>