@@ -711,21 +711,10 @@ Conditional Rules {#conditional-rules}
711
711
--------------------------------------
712
712
713
713
<div class=note>
714
- ''@supports'' rules and the {{CSS/supports(conditionText )}} method
714
+ ''@supports'' rules and the {{CSS/supports()}} method
715
715
behave as specified in [[!css-variables]] ,
716
716
without distinguishing between registered and unregistered custom properties,
717
717
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.
729
718
</div>
730
719
731
720
Relative URLs {#relative-urls}
@@ -820,57 +809,12 @@ string.
820
809
CSSOM {#cssom}
821
810
==============
822
811
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.
874
818
</div>
875
819
876
820
{{CSSStyleValue}} Reification {#css-style-value-reification}
@@ -880,14 +824,8 @@ and affects how the custom property calculates its [=computed value=].
880
824
To <dfn>reify a registered custom property value</dfn> given a property
881
825
|property| and [=syntax descriptor=] |syntax|, run these steps:
882
826
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.
891
829
892
830
For computed values:
893
831
0 commit comments