Skip to content

Commit 75ec921

Browse files
andruudtabatkins
authored andcommitted
[css-properties-values-api] Generally ignore syntax in APIs. (w3c#912)
* [css-properties-values-api] Generally ignore syntax in APIs. Resolves w3c#902. * supports()
1 parent 59cec90 commit 75ec921

File tree

1 file changed

+9
-71
lines changed

1 file changed

+9
-71
lines changed

css-properties-values-api/Overview.bs

Lines changed: 9 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -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

731720
Relative URLs {#relative-urls}
@@ -820,57 +809,12 @@ string.
820809
CSSOM {#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: '&lt;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

Comments
 (0)