@@ -711,21 +711,10 @@ Conditional Rules {#conditional-rules}
711711--------------------------------------
712712
713713<div class=note>
714- ''@supports'' rules and the {{CSS/supports(conditionText )}} method
714+ ''@supports'' rules and the {{CSS/supports()}} method
715715 behave as specified in [[!css-variables]] ,
716716 without distinguishing between registered and unregistered custom properties,
717717 and paying no attention to registered properties' syntaxes.
718-
719- {{CSS/supports(property, value)}} ,
720- as specified in [[css-conditional-1]] ,
721- <em> does</em> pay attention to the syntax of registered custom properties.
722-
723- The general principle in use
724- is that anything which evaluates the validity of a CSS property value on its own
725- will pay attention to the syntax of registered custom properties,
726- but anything parsing any larger construct
727- (such as declarations, or entire stylesheets)
728- will ignore the syntax.
729718</div>
730719
731720Relative URLs {#relative-urls}
@@ -820,57 +809,12 @@ string.
820809CSSOM {#cssom}
821810==============
822811
823- {{CSSStyleDeclaration}} Behavior {#css-style-declaration-behavior}
824- ------------------------------------------------------------------
825-
826- The <a>set a CSS declaration</a> algorithm gains an additional constraint
827- for registered custom properties:
828-
829- * The target declaration must have a value that matches the registered
830- [=syntax descriptor|syntax=] of the property.
831-
832- This means that once a property is registered, it is not possible to use
833- {{setProperty()}} with a value that violates the registered syntax of the
834- property.
835-
836- Note: Registering a property with a particular syntax
837- does not invalidate already-specified values for the property
838- (that is, they're not thrown out at parse-time,
839- like invalid properties usually are),
840- even if those would violate the registered syntax.
841- The registration <em> does</em> prevent new invalid values from being set,
842- and affects how the custom property calculates its [=computed value=] .
843-
844- <div class='example'>
845- For example,
846- in the following code snippet,
847- the ''--x'' property is set to a value
848- that doesn't match the later-registered syntax:
849-
850- <pre class="lang-javascript">
851- document.body.style.setProperty('--x' , '10px' );
852- CSS.registerProperty({
853- name: '--x' ,
854- syntax: '<color>' ,
855- initialValue: 'white' ,
856- inherits: false
857- });
858-
859- // This still outputs "10px", as existing values aren't
860- // re-evaluated after a syntax is registered.
861- console.log(document.body.style.getPropertyValue('--x' ));
862-
863- // This silently fails, like any other property would
864- // when one attempts to set it to an invalid value.
865- document.body.style.setProperty('--x' , '20px' );
866-
867- // Because ''--x'' is still set to "10px", which isn't
868- // a valid <<color>> , it will be "<l> [=invalid at computed-value time=] </l> ",
869- // falling back to the registered initial value of "white".
870- // 'background-color' will then receive that color and get
871- // set to "white".
872- document.body.style.backgroundColor = "var(--x)";
873- </pre>
812+ <div class=note>
813+ The value specified for a registered custom property is not
814+ interpreted until computed-value time. This means that only APIs that
815+ retrieve computed values are affected. Other APIs must ignore the
816+ {{[[registeredPropertySet]]}} slot of the associated {{Document}} , and
817+ treat all custom properties as unregistered.
874818</div>
875819
876820{{CSSStyleValue}} Reification {#css-style-value-reification}
@@ -880,14 +824,8 @@ and affects how the custom property calculates its [=computed value=].
880824 To <dfn>reify a registered custom property value</dfn> given a property
881825 |property| and [=syntax descriptor=] |syntax|, run these steps:
882826
883- For specified values:
884-
885- 1. If the value is a <<declaration-value>> , and |syntax| is not the
886- [=universal syntax descriptor=] , attempt to [=CSS/parse=]
887- the value according to |syntax|. If this succeeds, [=reify=]
888- the result as if it were a computed value, and return that result.
889- 2. Otherwise, [=reify a list of component values=] from the value, and
890- return the result.
827+ For specified values, [=reify a list of component values=] from the value,
828+ and return the result.
891829
892830 For computed values:
893831
0 commit comments