Page 1 of 1

Validator throws error when CSS variable is used in border-bottom style rule

Posted: Tue Apr 23, 2019 1:23 am
by TomHTML
I've encountered an odd error that the Validator reports when I use the short version of the CSS border-bottom style employing a CSS variable.

The following code produces the error
The value being set with "var(--background-color)" has already been set by "3px" which appears earlier.

Code: Select all

<!DOCTYPE html>
<html lang=en>
<head>
<title>Test</title>
<style>
*:root {
    --background-color: #660066;
}
a {
    border-bottom: 3px solid var(--background-color);
}
</style>
</head>
<body>
<a href=https://example.com>example</a>
</body>
</html>
However, if I break the border-bottom rule apart into its constituents, the validator reports no error:

Code: Select all

<!DOCTYPE html>
<html lang=en>
<head>
<title>Test</title>
<style>
*:root {
    --background-color: #660066;
}

a {
    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-bottom-color: var(--background-color);
}
</style>
</head>
<body>
<a href=https://example.com>example</a>
</body>
</html>
Is this a bug within the Validator, or am I doing something syntactically incorrect in the use of the CSS var? (The CSS works fine in Chrome and Firefox using the short version.)

Many thanks!

Re: Validator throws error when CSS variable is used in border-bottom style rule

Posted: Tue Apr 23, 2019 11:00 am
by Albert Wiersch
Hello Tom,

Yes! It is a bug with the handling of var(). I've fixed it for the next update.

Thank you for reporting this issue.