Skip to content

[css-properties-values-api] Generally ignore syntax in APIs. #912

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 22, 2019
Merged

[css-properties-values-api] Generally ignore syntax in APIs. #912

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d6c483b
[css-properties-values-api] Generally ignore syntax in APIs.
andruud Jul 2, 2019
eb37a02
supports()
andruud Jul 16, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 9 additions & 71 deletions css-properties-values-api/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -711,21 +711,10 @@ Conditional Rules {#conditional-rules}
--------------------------------------

<div class=note>
''@supports'' rules and the {{CSS/supports(conditionText)}} method
''@supports'' rules and the {{CSS/supports()}} method
behave as specified in [[!css-variables]],
without distinguishing between registered and unregistered custom properties,
and paying no attention to registered properties' syntaxes.

{{CSS/supports(property, value)}},
as specified in [[css-conditional-1]],
<em>does</em> pay attention to the syntax of registered custom properties.

The general principle in use
is that anything which evaluates the validity of a CSS property value on its own
will pay attention to the syntax of registered custom properties,
but anything parsing any larger construct
(such as declarations, or entire stylesheets)
will ignore the syntax.
</div>

Relative URLs {#relative-urls}
Expand Down Expand Up @@ -820,57 +809,12 @@ string.
CSSOM {#cssom}
==============

{{CSSStyleDeclaration}} Behavior {#css-style-declaration-behavior}
------------------------------------------------------------------

The <a>set a CSS declaration</a> algorithm gains an additional constraint
for registered custom properties:

* The target declaration must have a value that matches the registered
[=syntax descriptor|syntax=] of the property.

This means that once a property is registered, it is not possible to use
{{setProperty()}} with a value that violates the registered syntax of the
property.

Note: Registering a property with a particular syntax
does not invalidate already-specified values for the property
(that is, they're not thrown out at parse-time,
like invalid properties usually are),
even if those would violate the registered syntax.
The registration <em>does</em> prevent new invalid values from being set,
and affects how the custom property calculates its [=computed value=].

<div class='example'>
For example,
in the following code snippet,
the ''--x'' property is set to a value
that doesn't match the later-registered syntax:

<pre class="lang-javascript">
document.body.style.setProperty('--x', '10px');
CSS.registerProperty({
name: '--x',
syntax: '&lt;color>',
initialValue: 'white',
inherits: false
});

// This still outputs "10px", as existing values aren't
// re-evaluated after a syntax is registered.
console.log(document.body.style.getPropertyValue('--x'));

// This silently fails, like any other property would
// when one attempts to set it to an invalid value.
document.body.style.setProperty('--x', '20px');

// Because ''--x'' is still set to "10px", which isn't
// a valid <<color>>, it will be "<l>[=invalid at computed-value time=]</l>",
// falling back to the registered initial value of "white".
// 'background-color' will then receive that color and get
// set to "white".
document.body.style.backgroundColor = "var(--x)";
</pre>
<div class=note>
The value specified for a registered custom property is not
interpreted until computed-value time. This means that only APIs that
retrieve computed values are affected. Other APIs must ignore the
{{[[registeredPropertySet]]}} slot of the associated {{Document}}, and
treat all custom properties as unregistered.
</div>

{{CSSStyleValue}} Reification {#css-style-value-reification}
Expand All @@ -880,14 +824,8 @@ and affects how the custom property calculates its [=computed value=].
To <dfn>reify a registered custom property value</dfn> given a property
|property| and [=syntax descriptor=] |syntax|, run these steps:

For specified values:

1. If the value is a <<declaration-value>>, and |syntax| is not the
[=universal syntax descriptor=], attempt to [=CSS/parse=]
the value according to |syntax|. If this succeeds, [=reify=]
the result as if it were a computed value, and return that result.
2. Otherwise, [=reify a list of component values=] from the value, and
return the result.
For specified values, [=reify a list of component values=] from the value,
and return the result.

For computed values:

Expand Down