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

For technical support for all editions of CSS HTML Validator. Includes bug reports.
Post Reply
TomHTML
Rank II - Novice
Rank II - Novice
Posts: 42
Joined: Sun Feb 04, 2018 10:19 am

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

Post by TomHTML » Tue Apr 23, 2019 1:23 am

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
Site Admin
Posts: 3397
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 » Tue Apr 23, 2019 11:00 am

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.
Image
Albert Wiersch

Post Reply