W3C CSS validator: "Parse Error }"

Question

I use the following CSS:

.tm-navbar {
    position: relative;
    z-index: 9999;
}

@media (min-width: 768px) {
    .tm-navbar {
        background: -moz-linear-gradient(top, rgba(33, 33, 33, 0.25) 0%, rgba(33, 33, 33, 0) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(33, 33, 33, 0.25) 0%, rgba(33, 33, 33, 0) 100%);  /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(33, 33, 33, 0.25) 0%, rgba(33, 33, 33, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40212121', endColorstr='#00212121', GradientType=0);  /* IE6-9 */    
     }
}

@media (max-width: 767px) {
    .tm-navbar {
        position: relative;
        z-index: 9999;
        background-color: #212121!important;
    }
}

Acording to the W3C validator, it has an error on line 13:

Line 13 .tm-navbar Parse Error }

it seems this line is giving errors: filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40212121', endColorstr='#00212121',GradientType=0 ); /* IE6-9 */ — Shubham Agrawal
– Shubham Agrawal, Commented Oct 21, 2017 at 18:03

Rob · Accepted Answer · 2017-10-21 18:12:07Z

3

You are using a non-standard property value for filter

progid:DXImageTransform.Microsoft is obviously a Microsoft only property. Since it doesn't meet any standards value, it gets flagged.

The other values are properly vendor prefixed but they may be included in this because you shouldn't be using vendor prefixed CSS anymore.

https://developer.mozilla.org/en-US/docs/Web/CSS/filter

edited Oct 21, 2017 at 18:12

answered Oct 21, 2017 at 18:04

Rob

15.2k30 gold badges49 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

sideshowbarker Over a year ago

This is the right answer. But for the record here, I wanted to add that at github.com/w3c/css-validator/pull/134 I’ve raised a pull request against CSS validator sources which will cause the CSS validator to categorize the progid:DXImageTransform.Microsoft stuff as a “vendor extension” — which means that the snippet in the question would no longer cause an failure in the parser, and if you choose the option to treat “vendor extension” cases as warnings instead of errors, a warning would be emitted; otherwise an error message is emitted saying the value isn’t allowed.

Rob Over a year ago

@sideshowbarker But aren't vendor extensions supposed to be prefixed with a hyphen as in this case, -ms-? Is there a danger in setting precedent by allowing progid?

sideshowbarker Over a year ago

Yeah Microsoft should have prefixed it way back years ago when then added support for it to IE — but unfortunately they didn’t & we’re stuck with it now, as far as deciding how to deal with it. And the reality is that developers still use it in stylesheets a lot, to get filter effects to work for users of older IE versions, & it still appears in many stylesheets at major sites. So as far as choosing how to deal with it in the CSS checker, it came down to being pragmatic & not generating errors that those developers using it are just gonna see as noise, because they’re using it intentionally.

Collectives™ on Stack Overflow

W3C CSS validator: "Parse Error }"

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related