Skip to content

Commit 09ddf6f

Browse files
fantasaifantasai
committed
[css-cascade][css-syntax-3] Improve importance cross-linking.
1 parent 493f001 commit 09ddf6f

3 files changed

Lines changed: 45 additions & 36 deletions

File tree

‎css-cascade-3/Overview.bs‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -659,18 +659,20 @@ Cascade Order</h3>
659659
<dt id='cascade-origin'>Origin and Importance
660660
<dd>
661661
The <a>origin</a> of a declaration is based on where it comes from
662-
and its <a lt="important">importance</a> is whether or not it is declared ''!important'' (see below).
662+
and its <a lt="important">importance</a> is
663+
whether or not it is declared with ''!important''
664+
(see [[#importance|below]]).
663665
The precedence of the various <a>origins</a> is, in descending order:
664666

665667
<ol>
666668
<li>Transition declarations [[!css-transitions-1]]
667-
<li>Important user agent declarations
668-
<li>Important user declarations
669-
<li>Important author declarations
669+
<li>[=Important=] user agent declarations
670+
<li>[=Important=] user declarations
671+
<li>[=Important=] author declarations
670672
<li>Animation declarations [[!css-animations-1]]
671-
<li>Normal author declarations
672-
<li>Normal user declarations
673-
<li>Normal user agent declarations
673+
<li>[=Normal=] author declarations
674+
<li>[=Normal=] user declarations
675+
<li>[=Normal=] user agent declarations
674676
</ol>
675677

676678
Declarations from <a>origins</a> earlier in this list win over declarations from later <a>origins</a>.
@@ -757,31 +759,32 @@ Important Declarations: the ''!important'' annotation</h3>
757759
CSS attempts to create a balance of power between author and user style sheets.
758760
By default, rules in an author's style sheet override those in a user's style sheet,
759761
which override those in the user-agent's default style sheet.
760-
To balance this, a declaration can be made <dfn export>important</dfn>,
762+
To balance this, a declaration can be marked [=important=],
761763
which increases its weight in the cascade and inverts the order of precedence.
762764

763-
A declaration is <a>important</a> if it has a <dfn export id='bang-important'>!important</dfn> annotation,
764-
as defined by [[css-syntax-3]].
765+
A declaration is <dfn export>important</dfn> if it has a ''!important'' annotation
766+
as defined by [[css-syntax-3]],
765767
i.e. if the last two (non-whitespace, non-comment) tokens
766768
in its value are the delimiter token ''!'' followed by the identifier token ''important''.
769+
All other declarations are <dfn>normal</dfn> (non-[=important=]).
767770

768771
<div class='example'>
769772
<pre class='lang-css'>[hidden] { display: none !important; }</pre>
770773
</div>
771774

772-
An <a>important</a> declaration takes precedence over a normal declaration.
773-
Author and user style sheets may contain ''!important'' declarations,
774-
with user ''!important'' declarations overriding author ''!important'' declarations.
775+
An <a>important</a> declaration takes precedence over a [=normal=] declaration.
776+
Author and user style sheets may contain [=important=] declarations,
777+
with user [=important=] declarations overriding author [=important=] declarations.
775778
This CSS feature improves accessibility of documents by giving users with special requirements
776779
(large fonts, color combinations, etc.)
777780
control over presentation.
778781

779-
Important declarations from all origins take precedence over animations.
782+
[=Important=] declarations from all origins take precedence over animations.
780783
This allows authors to override animated values in important cases.
781784
(Animated values normally override all other rules.)
782785
[[css-animations-1]]
783786

784-
User agent style sheets may also contain ''!important'' declarations.
787+
User agent style sheets may also contain [=important=] declarations.
785788
These override all author and user declarations.
786789

787790
<div class='example'>

‎css-cascade-4/Overview.bs‎

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -772,18 +772,20 @@ Cascade Order</h3>
772772
<dt id='cascade-origin'>Origin and Importance
773773
<dd>
774774
The <a>origin</a> of a declaration is based on where it comes from
775-
and its <a lt="important">importance</a> is whether or not it is declared ''!important'' (see below).
775+
and its <a lt="important">importance</a> is
776+
whether or not it is declared with ''!important''
777+
(see [[#importance|below]]).
776778
The precedence of the various <a>origins</a> is, in descending order:
777779

778780
<ol>
779781
<li>Transition declarations [[!css-transitions-1]]
780-
<li>Important user agent declarations
781-
<li>Important user declarations
782-
<li>Important author declarations
782+
<li>[=Important=] user agent declarations
783+
<li>[=Important=] user declarations
784+
<li>[=Important=] author declarations
783785
<li>Animation declarations [[!css-animations-1]]
784-
<li>Normal author declarations
785-
<li>Normal user declarations
786-
<li>Normal user agent declarations
786+
<li>[=Normal=] author declarations
787+
<li>[=Normal=] user declarations
788+
<li>[=Normal=] user agent declarations
787789
</ol>
788790

789791
Declarations from <a>origins</a> earlier in this list win over declarations from later <a>origins</a>.
@@ -795,7 +797,7 @@ Cascade Order</h3>
795797
such as the nested [=tree contexts=] of [=shadow trees=] in the [[!DOM]].
796798
When comparing two declarations
797799
that are sourced from different [=encapsulation contexts=],
798-
then for normal rules
800+
then for [=normal=] rules
799801
the declaration from the outer context wins,
800802
and for [=important=] rules
801803
the declaration from the inner context wins.
@@ -809,15 +811,15 @@ Cascade Order</h3>
809811

810812
If the <a>scoping elements</a> of two declarations
811813
have an ancestor/descendant relationship,
812-
then for normal rules the declaration whose <a>scoping element</a> is the descendant wins,
813-
and for important rules the declaration whose <a>scoping element</a> is the ancestor wins.
814+
then for [=normal=] rules the declaration whose <a>scoping element</a> is the descendant wins,
815+
and for [=important=] rules the declaration whose <a>scoping element</a> is the ancestor wins.
814816

815-
Note: In other words, for normal declarations the inner scope's declarations override,
817+
Note: In other words, for [=normal=] declarations the inner scope's declarations override,
816818
but for ''!important'' rules <em>outer</em> scope's override.
817819

818820
For the purpose of this step,
819821
all unscoped declarations are considered to be <a>scoped</a> to the root element.
820-
Normal declarations from style attributes
822+
[=Normal=] declarations from style attributes
821823
are considered to be <a>scoped</a> to the element with the attribute,
822824
whereas important declarations from style attributes
823825
are considered to be <a>scoped</a> to the root element.
@@ -908,31 +910,32 @@ Important Declarations: the ''!important'' annotation</h3>
908910
CSS attempts to create a balance of power between author and user style sheets.
909911
By default, rules in an author's style sheet override those in a user's style sheet,
910912
which override those in the user-agent's default style sheet.
911-
To balance this, a declaration can be made <dfn export>important</dfn>,
913+
To balance this, a declaration can be marked [=important=],
912914
which increases its weight in the cascade and inverts the order of precedence.
913915

914-
A declaration is <a>important</a> if it has a <dfn export id='bang-important'>!important</dfn> annotation,
915-
as defined by [[css-syntax-3]].
916+
A declaration is <dfn export>important</dfn> if it has a ''!important'' annotation
917+
as defined by [[css-syntax-3]],
916918
i.e. if the last two (non-whitespace, non-comment) tokens
917919
in its value are the delimiter token ''!'' followed by the identifier token ''important''.
920+
All other declarations are <dfn>normal</dfn> (non-[=important=]).
918921

919922
<div class='example'>
920923
<pre class='lang-css'>[hidden] { display: none !important; }</pre>
921924
</div>
922925

923-
An <a>important</a> declaration takes precedence over a normal declaration.
924-
Author and user style sheets may contain ''!important'' declarations,
925-
with user ''!important'' declarations overriding author ''!important'' declarations.
926+
An <a>important</a> declaration takes precedence over a [=normal=] declaration.
927+
Author and user style sheets may contain [=important=] declarations,
928+
with user [=important=] declarations overriding author [=important=] declarations.
926929
This CSS feature improves accessibility of documents by giving users with special requirements
927930
(large fonts, color combinations, etc.)
928931
control over presentation.
929932

930-
Important declarations from all origins take precedence over animations.
933+
[=Important=] declarations from all origins take precedence over animations.
931934
This allows authors to override animated values in important cases.
932935
(Animated values normally override all other rules.)
933936
[[css-animations-1]]
934937

935-
User agent style sheets may also contain ''!important'' declarations.
938+
User agent style sheets may also contain [=important=] declarations.
936939
These override all author and user declarations.
937940

938941
<div class='example'>

‎css-syntax-3/Overview.bs‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3218,7 +3218,10 @@ Defining Block Contents: the <<declaration-list>>, <<rule-list>>, and <<styleshe
32183218
and with what specificity.
32193219
If they don't interact with the cascade,
32203220
properties containing <code>!important</code> are automatically invalid;
3221-
otherwise using <code>!important</code> is valid and has its usual effect on the cascade origin of the property.
3221+
otherwise using <code>!important</code> is valid
3222+
and causes the declaration to be [=important=]
3223+
for the purposes of the [=cascade=].
3224+
See [[!CSS-CASCADE-3]].
32223225

32233226
<div class='example'>
32243227
For example, the grammar for ''@font-face'' in the previous example must,

0 commit comments

Comments
 (0)