- From: 一丝 via GitHub <noreply@w3.org>
- Date: Fri, 06 Mar 2026 12:34:07 +0000
- To: public-css-archive@w3.org
yisibl has just created a new issue for https://github.com/w3c/csswg-drafts:
== [css-properties-values-api] Clarify whether `syntax: "<color> | "` is valid ==
Safari can correctly parse `<color> |`, Safari can correctly parse `<color> |`, while Firefox and Chrome will consider this invalid syntax.
The specification does not appear to provide explicit examples illustrating how such cases should be handled.
https://drafts.css-houdini.org/css-properties-values-api/#the-syntax-descriptor
```html
data:text/html;charset=UTF-8,<!doctype html>
<style>
@property --test1 {
syntax: "<color> |";
inherits: true;
initial-value: red;
}
@property --test2 {
syntax: "| <color>";
inherits: true;
initial-value: red;
}
div {
display: inline-block; width: 100px; height: 100px;
}
.test1 {
background-color: var(--test1, green);
}
.test2 {
background-color: var(--test2, green);
}
</style>
<p>You should see a green square below.</p>
<div class="test1"></div>
<div class="test2"></div>
```
<img width="714" height="402" alt="Image" src="https://github.com/user-attachments/assets/81771462-bcc4-4455-b8f0-9fd8baa77980" />
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13610 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 6 March 2026 12:34:08 UTC