Skip to content

Commit

Permalink
[css-cascade] Re-sync across levels.
Browse files Browse the repository at this point in the history
  • Loading branch information
@fantasai
fantasai committed Mar 12, 2021
1 parent 5ca75a6 commit aba0111
Show file tree
Hide file tree
Showing 3 changed files with 121 additions and 75 deletions.
48 changes: 33 additions & 15 deletions css-cascade-3/Overview.bs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ Title: CSS Cascading and Inheritance Level 3
Shortname: css-cascade
Level: 3
Status: ED
Work Status: Testing
Implementation Report: https://drafts.csswg.org/css-cascade-3/implementation-report.html
Work Status: Completed
Implementation Report: https://drafts.csswg.org/css-cascade-3/implementation-report
Group: csswg
ED: https://drafts.csswg.org/css-cascade-3/
TR: https://www.w3.org/TR/css-cascade-3/
Expand Down Expand Up @@ -42,6 +42,20 @@ spec:css-fonts-4
<h2 id="intro">
Introduction</h2>

CSS defines a finite set of parameters,
called <dfn export for=CSS lt="property">properties</dfn>,
that direct the rendering of a document.
Each [=property=] has a name
(e.g., 'color', 'font-size', or 'border-style'),
a value space
(e.g., <<color>>, <<length-percentage>>, ''[ solid | dashed | dotted | &hellip; ]''),
and a defined behavior on the rendering of the document.
Properties values are assigned to various parts of the document
via [=property declarations=],
which assign the property a value
(e.g. ''red'', ''12pt'', ''dotted'')
for the associated element or box.

One of the fundamental design principles of CSS is <a lt="cascade">cascading</a>,
which allows several style sheets to influence the presentation of a document.
When different declarations try to set a value for the same element/property combination,
Expand Down Expand Up @@ -257,7 +271,7 @@ Shorthand Properties</h2>
to its initial value of ''border-image/none'',
but has no syntax to set it to anything else. [[css-backgrounds-3]]</span>

If a <a>shorthand</a> is specified as one of the <a href="https://www.w3.org/TR/css3-values/#common-keywords">CSS-wide keywords</a> [[!css-values-3]],
If a <a>shorthand</a> is specified as one of the <a href="https://www.w3.org/TR/css-values/#common-keywords">CSS-wide keywords</a> [[!css-values-3]],
it sets all of its <a>sub-properties</a> to that keyword,
including any that are <a>reset-only sub-properties</a>.
(Note that these keywords cannot be combined with other values in a single declaration, not even in a shorthand.)
Expand All @@ -277,12 +291,12 @@ Resetting All Properties: the 'all' property</h3>
The 'all' property is a <a>shorthand</a>
that resets <em>all</em> CSS properties
except 'direction' and 'unicode-bidi'.
It only accepts the <a href="https://www.w3.org/TR/css3-values/#common-keywords">CSS-wide keywords</a>.
It only accepts the <a href="https://www.w3.org/TR/css-values/#common-keywords">CSS-wide keywords</a>.
It does not reset <a>custom properties</a> [[css-variables-1]].

Note: The excepted CSS properties 'direction' and 'unicode-bidi'
are actually markup-level features,
and <a href="https://www.w3.org/TR/css3-writing-modes/#text-direction">should not be set in the author's style sheet</a>.
and <a href="https://www.w3.org/TR/css-writing-modes-3/#text-direction">should not be set in the author's style sheet</a>.
(They exist as CSS properties only to style document languages not supported by the UA.)
Authors should use the appropriate markup, such as HTML's <code>dir</code> attribute, instead.
[[css-writing-modes-3]]
Expand Down Expand Up @@ -356,7 +370,7 @@ Value Processing</h2>
Declared Values</h3>

Each property declaration <a href="#filtering">applied to an element</a>
contributes a <dfn export>declared value</dfn> for that property
contributes a <dfn export local-lt="declared">declared value</dfn> for that property
associated with the element.
See <a href="#filtering">Filtering Declarations</a> for details.

Expand All @@ -366,7 +380,8 @@ Declared Values</h3>
<h3 id="cascaded">
Cascaded Values</h3>

The <dfn export>cascaded value</dfn> represents the result of <a href="#cascade">the cascade</a>:
The <dfn export local-lt="cascaded">cascaded value</dfn>
represents the result of <a href="#cascade">the cascade</a>:
it is the <a>declared value</a> that wins the cascade
(is sorted first in the <a>output of the cascade</a>).
If the <a>output of the cascade</a> is an empty list,
Expand All @@ -375,7 +390,8 @@ Cascaded Values</h3>
<h3 id="specified">
Specified Values</h3>

The <dfn export>specified value</dfn> is the value of a given property that the style sheet authors intended for that element.
The <dfn export local-lt="specified">specified value</dfn> is
the value of a given property that the style sheet authors intended for that element.
It is the result of putting the <a>cascaded value</a> through the <a href="#defaulting">defaulting</a> processes,
guaranteeing that a <a>specified value</a> exists for every property on every element.

Expand All @@ -390,7 +406,8 @@ Specified Values</h3>
<h3 id="computed">
Computed Values</h3>

The <dfn export>computed value</dfn> is the result of resolving the <a>specified value</a>
The <dfn export local-lt="computed">computed value</dfn> is
the result of resolving the <a>specified value</a>
as defined in the “Computed Value” line of the property definition table,
generally absolutizing it in preparation for <a>inheritance</a>.

Expand Down Expand Up @@ -444,7 +461,8 @@ Computed Values</h3>
<h3 id='used'>
Used Values</h3>

The <dfn export>used value</dfn> is the result of taking the <a>computed value</a>
The <dfn export local-lt="used">used value</dfn> is
the result of taking the <a>computed value</a>
and completing any remaining calculations to make it the absolute theoretical value
used in the formatting of the document.

Expand Down Expand Up @@ -487,7 +505,8 @@ Actual Values</h3>
and may therefore have to approximate the <a lt="used value">used</a> width.
Also, the font size of an element may need adjustment based on the availability of fonts
or the value of the 'font-size-adjust' property.</span>
The <dfn export>actual value</dfn> is the used value after any such adjustments have been made.
The <dfn export local-lt="actual">actual value</dfn> is
the used value after any such adjustments have been made.

Note: By probing the actual values of elements,
much can be learned about how the document is laid out.
Expand Down Expand Up @@ -638,7 +657,7 @@ Filtering</h2>
It belongs to a style sheet that currently applies to this document.

<li>
It is not qualified by a conditional rule [[!CSS3-CONDITIONAL]] with a false condition.
It is not qualified by a conditional rule [[!CSS-CONDITIONAL-3]] with a false condition.

<li>
It belongs to a style rule whose selector matches the element. [[!SELECT]]
Expand Down Expand Up @@ -714,7 +733,6 @@ Cascade Sorting Order</h3>
are considered to have a specificity higher than any selector.
The declaration with the highest specificity wins.


<dt id='cascade-order'>Order of Appearance
<dd>
The last declaration in document order wins.
Expand All @@ -739,7 +757,7 @@ Cascade Sorting Order</h3>
<h3 id='cascading-origins'>
Cascading Origins</h3>

Each style rule has a <dfn id=origin export local-lt=origin>cascade origin</dfn>,
Each style rule has a <dfn id=origin export local-lt="origin">cascade origin</dfn>,
which determines where it enters the cascade.
CSS defines three core <a>origins</a>:

Expand Down Expand Up @@ -940,7 +958,7 @@ Explicit Defaulting</h3>

Several CSS-wide property values are defined below;
declaring a property to have these values explicitly specifies a particular defaulting behavior.
As specified in <a href="https://www.w3.org/TR/css3-values/#common-keywords">CSS Values and Units Level 3</a> [[!css-values-3]],
As specified in <a href="https://www.w3.org/TR/css-values/#common-keywords">CSS Values and Units</a> [[!css-values-3]],
all CSS properties can accept these values.

<h4 id="initial">
Expand Down
62 changes: 20 additions & 42 deletions css-cascade-4/Overview.bs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,9 +141,9 @@ Importing Style Sheets: the ''@import'' rule</h2>
<div class="example">
The following <a href="#conditional-import">conditional <css>@import</css> rule</a>
only loads the style sheet when the UA
<a href="https://www.w3.org/TR/css3-conditional/#support-definition">supports</a> ''display: flex'',
<a href="https://www.w3.org/TR/css-conditional-3/#support-definition">supports</a> ''display: flex'',
and only applies the style sheet on a <a href="https://www.w3.org/TR/CSS2/media.html#media-types">handheld</a> device
with a <a href="https://www.w3.org/TR/css3-mediaqueries/#width">maximum viewport width</a> of 400px.
with a <a href="https://www.w3.org/TR/mediaqueries-4/#width">maximum viewport width</a> of 400px.

<pre>@import url("narrow.css") supports(display: flex) handheld and (max-width: 400px);</pre>
</div>
Expand Down Expand Up @@ -219,8 +219,8 @@ Conditional ''@import'' Rules</h3>
</div>

The evaluation and full syntax of the <a>import conditions</a>
are defined by the <a href="https://www.w3.org/TR/css3-mediaqueries/">Media Queries</a> [[!MEDIAQ]]
and <a href="https://www.w3.org/TR/css-conditional/">CSS Conditional Rules</a> [[!CSS3-CONDITIONAL]] specifications.
are defined by the <a href="https://www.w3.org/TR/mediaqueries/">Media Queries</a> [[!MEDIAQ]]
and <a href="https://www.w3.org/TR/css-conditional/">CSS Conditional Rules</a> [[!CSS-CONDITIONAL-3]] specifications.

<h3 id=import-processing>
Processing Stylesheet Imports</h3>
Expand Down Expand Up @@ -328,7 +328,7 @@ Shorthand Properties</h2>
to its initial value of ''border-image/none'',
but has no syntax to set it to anything else. [[css-backgrounds-3]]</span>

If a <a>shorthand</a> is specified as one of the <a href="https://www.w3.org/TR/css3-values/#common-keywords">CSS-wide keywords</a> [[!css-values-3]],
If a <a>shorthand</a> is specified as one of the <a href="https://www.w3.org/TR/css-values/#common-keywords">CSS-wide keywords</a> [[!css-values-3]],
it sets all of its <a>sub-properties</a> to that keyword,
including any that are <a>reset-only sub-properties</a>.
(Note that these keywords cannot be combined with other values in a single declaration, not even in a shorthand.)
Expand Down Expand Up @@ -404,12 +404,12 @@ Resetting All Properties: the 'all' property</h3>
The 'all' property is a <a>shorthand</a>
that resets <em>all</em> CSS properties
except 'direction' and 'unicode-bidi'.
It only accepts the <a href="https://www.w3.org/TR/css3-values/#common-keywords">CSS-wide keywords</a>.
It only accepts the <a href="https://www.w3.org/TR/css-values/#common-keywords">CSS-wide keywords</a>.
It does not reset <a>custom properties</a> [[css-variables-1]].

Note: The excepted CSS properties 'direction' and 'unicode-bidi'
are actually markup-level features,
and <a href="https://www.w3.org/TR/css3-writing-modes/#text-direction">should not be set in the author's style sheet</a>.
and <a href="https://www.w3.org/TR/css-writing-modes-3/#text-direction">should not be set in the author's style sheet</a>.
(They exist as CSS properties only to style document languages not supported by the UA.)
Authors should use the appropriate markup, such as HTML's <code>dir</code> attribute, instead.
[[css-writing-modes-3]]
Expand Down Expand Up @@ -500,7 +500,8 @@ Declared Values</h3>
<h3 id="cascaded">
Cascaded Values</h3>

The <dfn export local-lt="cascaded">cascaded value</dfn> represents the result of <a href="#cascade">the cascade</a>:
The <dfn export local-lt="cascaded">cascaded value</dfn>
represents the result of <a href="#cascade">the cascade</a>:
it is the <a>declared value</a> that wins the cascade
(is sorted first in the <a>output of the cascade</a>).
If the <a>output of the cascade</a> is an empty list,
Expand All @@ -509,7 +510,8 @@ Cascaded Values</h3>
<h3 id="specified">
Specified Values</h3>

The <dfn export local-lt="specified">specified value</dfn> is the value of a given property that the style sheet authors intended for that element.
The <dfn export local-lt="specified">specified value</dfn> is
the value of a given property that the style sheet authors intended for that element.
It is the result of putting the <a>cascaded value</a> through the <a href="#defaulting">defaulting</a> processes,
guaranteeing that a <a>specified value</a> exists for every property on every element.

Expand All @@ -524,7 +526,8 @@ Specified Values</h3>
<h3 id="computed">
Computed Values</h3>

The <dfn export local-lt="computed">computed value</dfn> is the result of resolving the <a>specified value</a>
The <dfn export local-lt="computed">computed value</dfn> is
the result of resolving the <a>specified value</a>
as defined in the “Computed Value” line of the property definition table,
generally absolutizing it in preparation for <a>inheritance</a>.

Expand Down Expand Up @@ -578,7 +581,8 @@ Computed Values</h3>
<h3 id='used'>
Used Values</h3>

The <dfn export local-lt="used">used value</dfn> is the result of taking the <a>computed value</a>
The <dfn export local-lt="used">used value</dfn> is
the result of taking the <a>computed value</a>
and completing any remaining calculations to make it the absolute theoretical value
used in the formatting of the document.

Expand Down Expand Up @@ -654,7 +658,8 @@ Actual Values</h3>
and may therefore have to approximate the <a lt="used value">used</a> width.
Also, the font size of an element may need adjustment based on the availability of fonts
or the value of the 'font-size-adjust' property.</span>
The <dfn export local-lt="actual">actual value</dfn> is the used value after any such adjustments have been made.
The <dfn export local-lt="actual">actual value</dfn> is
the used value after any such adjustments have been made.

Note: By probing the actual values of elements,
much can be learned about how the document is laid out.
Expand Down Expand Up @@ -805,7 +810,7 @@ Filtering</h2>
It belongs to a style sheet that currently applies to this document.

<li>
It is not qualified by a conditional rule [[!CSS3-CONDITIONAL]] with a false condition.
It is not qualified by a conditional rule [[!CSS-CONDITIONAL-3]] with a false condition.

<li>
It belongs to a style rule whose selector matches the element. [[!SELECT]]
Expand Down Expand Up @@ -893,34 +898,7 @@ Cascade Sorting Order</h3>
can set defaults that are easily overridden by the outer context,
while [=important=] declarations belonging to an [=encapsulation context=]
can enforce requirements that cannot be overridden by the outer context.
<!--
<dt id='cascade-scope'>Scope
<dd>
A declaration can be <dfn export>scoped</dfn> to a subtree of the document
so that it only affects its <dfn export>scoping element</dfn> and that element's descendants.
For example, [[HTML]] defines scoped <code>&lt;style&gt;</code> elements,
whose style sheets are scoped to the element's parent.
If the <a>scoping elements</a> of two declarations
have an ancestor/descendant relationship,
then for [=normal=] rules the declaration whose <a>scoping element</a> is the descendant wins,
and for [=important=] rules the declaration whose <a>scoping element</a> is the ancestor wins.

Note: In other words, for [=normal=] declarations the inner scope's declarations override,
but for ''!important'' rules <em>outer</em> scope's override.
For the purpose of this step,
all unscoped declarations are considered to be <a>scoped</a> to the root element.
[=Normal=] declarations from style attributes
are considered to be <a>scoped</a> to the element with the attribute,
whereas important declarations from style attributes
are considered to be <a>scoped</a> to the root element.
[[!CSSSTYLEATTR]]
Note: This odd handling of ''!important'' style attribute declarations
is to match the behavior defined in CSS Levels 1 and 2,
where style attributes simply have higher specificity than any other author rules. [[CSS2]]
-->
<dt id='cascade-specificity'>Specificity
<dd>
The <a href="https://www.w3.org/TR/selectors/#specificity">Selectors module</a> [[!SELECT]] describes how to compute the specificity of a selector.
Expand Down Expand Up @@ -1160,7 +1138,7 @@ Explicit Defaulting</h3>

Several CSS-wide property values are defined below;
declaring a property to have these values explicitly specifies a particular defaulting behavior.
As specified in <a href="https://www.w3.org/TR/css3-values/#common-keywords">CSS Values and Units Level 3</a> [[!css-values-3]],
As specified in <a href="https://www.w3.org/TR/css-values/#common-keywords">CSS Values and Units</a> [[!css-values-3]],
all CSS properties can accept these values.

<h4 id="initial">
Expand All @@ -1186,7 +1164,7 @@ Erasing All Declarations: the ''unset'' keyword</h4>
(or all longhands of a <a>shorthand</a>).

<h4 id="default">
Rolling Back The Cascade: the ''revert'' keyword</h4>
Rolling Back Cascade Origins: the ''revert'' keyword</h4>

If the <a>cascaded value</a> of a property is the <dfn for=all caniuse="css-revert-value">''revert''</dfn> keyword,
the behavior depends on the [=cascade origin=] to which the declaration belongs:
Expand Down
Loading

0 comments on commit aba0111

Please sign in to comment.