CODEWITHSUNDEEP
validationoperator-keywordw3c
Benoit Adam
Benoit Adam

Reputation: 11

W3C Validator error: "Error: CSS: background-image: is an incorrect operator."

I tested my code on the W3C validator and got an error I couldn't understand. I simplified the code to get this:

<!DOCTYPE html>
<html lang="">
<head>
    <title>Test</title>
    <style>
        .class{background-image: linear-gradient(red 0 110px, blue 110px 200px, yellow 300px)}
    </style>
</head>

<body>
    <p></p>
</body>
</html>

And received the following error: Error: CSS: background-image: is an incorrect operator.

At line 6, column 85

x, yellow 300px)}↩</style>↩</h

The closing bracket being highlighted. I had a look in the explanations of the errors here (https://validator.w3.org/docs/errors.html) but didn't find anything.

Any idea of what's the issue (and how to solve it)?

Upvotes: 0

Views: 327

Answers (1)

dontcallmedom
dontcallmedom

Reputation: 2470

The HTML Validator uses the CSS validator under the hood to validate the content of <style> elements.

The construction you use for linear-gradient relies on the multiple color stops syntax, which is defined in the level 4 of the CSS Image module, while I believe the CSS validator only implements up to its level 3.

Rewriting it as linear-gradient(red 0, red 110px, blue 110px, blue 200px, yellow 300px) should make it pass validation while obtaining the same effect.

Upvotes: 1

Related Questions