diff --git a/css-cascade-5/Overview.bs b/css-cascade-5/Overview.bs index daa5995e33c..303972752f2 100644 --- a/css-cascade-5/Overview.bs +++ b/css-cascade-5/Overview.bs @@ -31,6 +31,7 @@ Informative Classes: ex spec:dom; type:dfn; text:shadow tree spec:css-color-4; type:property; text:color spec:css-values-3; type: value; text:ex +spec:css-values-5; type: function; text:if() spec:css-conditional-3; type:at-rule; text:@media spec:mediaqueries-4; type:type; for:@media; text:all spec:mediaqueries-4; type:type; text: @@ -1817,7 +1818,7 @@ Explicit Defaulting As specified in CSS Values and Units [[!css-values-3]], all CSS properties can accept these values. - The keywords ''revert'' and ''revert-layer'' + The keywords ''revert'', ''revert-layer'', and ''revert-rule'' are cascade-dependent keywords; some contexts may restrict their use while allowing the other [=CSS-wide keywords=]. @@ -1954,6 +1955,42 @@ Rolling Back Cascade Layers: the ''revert-layer'' keyword as it is for ''revert'', and thus effectively forms its own [=cascade layer=]. +

+Rolling Back Rules: the ''revert-rule'' keyword

+ + The revert-rule [=CSS-wide keyword=] + rolls back the cascade similar to ''revert'' and ''revert-layer'', + except it works by [=style rule=] + rather than [=cascade origin=] or [=cascade layer=]. + + If the cascaded value of a property is the ''revert-rule'' keyword, + the cascaded value is rolled back + such that the specified value is calculated + as if the current [=style rule=] had not been present at all. + +
+ The ''revert-rule'' keyword can be combined with ''if()'' + to conditionally ignore a declaration: + + 
+		div {
+		  border-radius: 5px;
+		}
+		.apply-sharp {
+		  border-radius: if(style(--mode:sharp): 0px; else: revert-rule);
+		}
+
+ + Given an element <div class=apply-sharp>, + the above style sets ''border-radius'' to 0px + only when the [=computed value=] of --mode + is sharp. + +
+ + The ''revert-rule'' keyword behaves like ''revert-layer'' + in the [=author origin=]. +

Layer APIs

@@ -2025,6 +2062,8 @@ Changes since the 13 Jan 2022 Candidate Recommendation Snapshot

Non-trivial changes since the 13 January 2022 Candidate Recommendation Snapshot: + * Added the ''revert-rule'' keyword. + (Issue 10443) * Clarify that all “aliases” of a property are reverted by ''revert''/''revert-layer''. * Clarify that style sheets are ordered in [[final CSS style sheets]] order. * Clarify that only ''@layer'' statement rules are ignored when checking validity of ''@import'', not empty ''@layer'' block rules.