>.
+
+: syntax descriptor
+:: An object consisting of a list of syntax components.
+
+: universal syntax descriptor
+:: A special descriptor which accepts any valid token stream.
+
+### Consume a syntax descriptor ### {#consume-syntax-descriptor}
+
+
+ This section describes how to
consume a syntax descriptor from a [=string=] |string|.
+ It either produces a
syntax descriptor
+ with a list of
syntax components, or the
universal syntax descriptor.
+
+ 1. [=Strip leading and trailing ASCII whitespace=] from |string|.
+
+ 2. If |string|’s [=string/length=] is 0,
+ return failure.
+
+ 3. If |string|’s [=string/length=] is 1,
+ and the only [=code point=] in |string| is U+002A ASTERISK (*),
+ return the [=universal syntax descriptor=].
+
+ 4. Let |stream| be an [=input stream=] created from the [=code points=] of |string|,
+ preprocessed as specified in [[css-syntax-3]].
+ Let |descriptor| be an initially empty [=list=] of
syntax components.
+
+ 5. Repeatedly consume the
next input code point:
+
+ :
whitespace
+ :: Do nothing.
+
+ : EOF
+ :: If |descriptor|’s [=list/length=] is greater than zero,
+ return |descriptor|;
+ otherwise, return failure.
+
+ : U+007C VERTICAL LINE (|)
+ ::
Consume a syntax component.
+ If failure was returned,
+ return failure;
+ otherwise,
+ [=list/append=] the returned value to |descriptor|.
+
+ : anything else
+ ::
Reconsume the current input code point.
+
Consume a syntax component.
+ If failure was returned,
+ return failure;
+ otherwise,
+ [=list/append=] the returned value to |descriptor|.
+
+
+### Consume a syntax component ### {#consume-syntax-component}
+
+
+ To
consume a syntax component from a stream of
code points |stream|:
+
+ Consume as much
whitespace as possible from |stream|.
+
+ Let |component| be a new
syntax component with its |name| and |multiplier| initially
+ empty.
+
+ Consume the
next input code point:
+
+ : U+003C LESS-THAN SIGN (<)
+ ::
Consume a data type name.
+ If it returned a [=string=], set |component|'s |name| to the returned value.
+ Otherwise, return failure.
+
+ :
name-start code point
+ : U+005C REVERSE SOLIDUS (\)
+ :: If the stream [=starts with an identifier=],
+
reconsume the current input code point
+ then [=consume a name=] from the stream,
+ and set |component|’s |name| to the returned <
>’s value.
+ Otherwise return failure.
+
+ : anything else
+ :: Return failure.
+
+ If |component|’s |name| is a [=pre-multiplied data type name=],
+ return |component|.
+
+ If the [=next input code point=]
+ is U+002B PLUS SIGN (+)
+ or U+0023 NUMBER SIGN (#),
+ consume the next input code point,
+ and set |component|’s |multiplier| to the [=current input code point=].
+
+ Return |component|.
+
+
+
+### Consume a data type name ### {#consume-data-type-name}
+
+
+ To
consume a data type name from a stream of
code points:
+
+ Note: This algorithm assumes that a U+003C LESS-THAN SIGN (<)
code point has already been consumed from the stream.
+
+ Let |name| initially be a [=string=] containing a single U+003C LESS-THAN SIGN (<)
code point.
+
+ Repeatedly consume the
next input code point:
+
+ : U+003E GREATER-THAN SIGN (>)
+ :: Append the
code point to |name|. If |name| matches one of the
+
data type names listed in [[#supported-names]], return |name|.
+ Otherwise return failure.
+
+ :
name code point
+ :: Append the
code point to |name|.
+
+ : anything else
+ :: Return failure.
+
+
Behavior of Custom Properties {#behavior-of-custom-properties}
==============================================================
@@ -595,9 +760,8 @@ Fallbacks in ''var()'' references {#fallbacks-in-var-references}
References to registered custom properties using the ''var()'' function may
provide a fallback. However, the fallback value must match the
-[[#supported-syntax-strings|registered syntax]] of the custom property being
-referenced, otherwise the declaration is
-invalid at computed-value time.
+syntax descriptor of the custom property being referenced, otherwise the
+declaration is invalid at computed-value time.
Note: This applies regardless of whether or not the fallback is being used.
@@ -608,16 +772,16 @@ Example 1: Using custom properties to add animation behavior {#example-1}
-------------------------------------------------------------------------
-<script>
+<script>
CSS.registerProperty({
name: "--stop-color",
- syntax: "<color>",
+ syntax: "<color>",
inherits: false,
initialValue: "rgba(0,0,0,0)"
});
-</script>
+</script>
-<style>
+<style>
.button {
--stop-color: red;
@@ -629,7 +793,7 @@ CSS.registerProperty({
--stop-color: green;
}
-</style>
+</style>