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

For technical support and bug reports for all editions of CSS HTML Validator, including htmlval for Linux and Mac.
Post Reply
TomHTML
Rank III - Intermediate
Posts: 75
Joined: Sun Feb 04, 2018 10:19 am

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

Post 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!
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

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

Post 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.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
Post Reply