CSS3 Filter

For technical support for all editions of CSS HTML Validator. Includes bug reports.
Post Reply
User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 600
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

CSS3 Filter

Post by RSteinwand » Wed Oct 07, 2015 11:36 am

Hi Albert,

Came across this one a few days ago and finally had time to check into it today:

Code: Select all

filter:alpha(finishopacity=100, style=1)
It appears that CSE doesn't like "finishopacity", then I see it mentioned here (among other places): http://www.tagindex.net/css/filter/alpha.html
Rick

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 600
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: CSS3 Filter

Post by RSteinwand » Wed Oct 07, 2015 11:44 am

CSE also flags this as invalid:

Code: Select all

filter: gray();
More: http://www.tagindex.net/css/filter/index.html

Sorry, too busy to check into this further.
Last edited by RSteinwand on Thu Oct 08, 2015 8:55 am, edited 1 time in total.
Rick

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 600
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: CSS3 Filter

Post by RSteinwand » Wed Oct 07, 2015 12:02 pm

Rick

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3412
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: CSS3 Filter

Post by Albert Wiersch » Wed Oct 07, 2015 2:48 pm

Hi Rick,

CSE HTML Validator doesn't like those at all because I can't find a mention for them in the standards. They may be old IE filter stuff.

Have a look here:
https://developer.mozilla.org/en-US/docs/Web/CSS/filter
and
https://drafts.fxtf.org/filters/#FilterProperty

The MSDN link looks like it's referring to old IE filters in which case I think the usage is wrong because it doesn't match the examples they give on that page, like this CSS:

Code: Select all

INPUT.aFilter {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);}
If the above is used then CSE HTML Validator will only generate a warning:
This "filter" CSS property looks like an obsolete Internet Explorer property that is only supported by Internet Explorer 5.5 through IE9 (it was removed in IE10). This obsolete IE property should no longer be used (if it must be used, then consider using -ms-filter instead, but note that the syntax is slightly different). Other major browsers are unlikely to support this property. This message is displayed only once.

Finally, perhaps gray() should be grayscale()?
Image
Albert Wiersch

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 600
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: CSS3 Filter

Post by RSteinwand » Wed Oct 07, 2015 4:27 pm

Hi Albert,

... and I assumed it was cutting edge CSS3.... :shock:

I guess the next step is CanIUse....

I'll probably pass this onto the developer that this is obsolete code.

Thanks!
Rick

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3412
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: CSS3 Filter

Post by Albert Wiersch » Wed Oct 07, 2015 5:09 pm

Hi Rick,

It looks like there's a misunderstanding. Sorry about that.

The "filter" CSS property is confusing because there is the obsolete IE syntax/usage and then there is the new CSS3 syntax... so only the old IE "filter" values are obsolete while the newer CSS3 "filter" syntax is currently considered "experimental" (to the best of my knowledge anyway!). CSE HTML Validator supports the newer "experimental" stuff and generates that warning I mentioned in a previous reply if the value for "filter" looks like the obsolete IE syntax.

I've updated the message to this which should be clearer (I hope!):
This "filter" CSS property looks like it uses the obsolete Internet Explorer syntax that is only supported by Internet Explorer 5.5 through IE9 (it was removed in IE10). This obsolete IE syntax should no longer be used (if it must be used, then consider using -ms-filter instead, but note that the syntax is slightly different). NOTE: Most major browsers now support the experimental CSS3 "filter" syntax which is different than the obsolete IE syntax. This message is displayed only once.
Image
Albert Wiersch

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 600
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: CSS3 Filter

Post by RSteinwand » Thu Oct 08, 2015 8:54 am

I like the updated message better. Right now for both examples above I see this:

Code: Select all

The value for the CSS3 "filter" property is invalid. CSS3 allows this value to be "<filter-function> [<filter-function>]* | none". This experimental property applies effects like blurring or color shifting to an element before it is displayed. This property is not valid in CSS 2.1.
Rick

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3412
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: CSS3 Filter

Post by Albert Wiersch » Thu Oct 08, 2015 9:51 am

Hi Rick,

Yes, because CSE HTML Validator doesn't recognize the examples you provided as the old IE syntax. I'm not sure what syntax it is because the typical IE syntax would probably look more like what I posted earlier:

Code: Select all

INPUT.aFilter {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);}
If you try the above then you should see the message.

I just tried one of the "filter: alpha()" properties in IE (http://www.tagindex.net/css/filter/alpha.html) and it didn't work until I switched to compatibility mode and then it did so I will add some simple detection code to CSE HTML Validator so it will also consider that as the obsolete IE syntax and display the more appropriate message. Interestingly though, it doesn't look like most of the examples on that page work even in compatibility mode except for the first one that sets opacity to 30.
Image
Albert Wiersch

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 600
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: CSS3 Filter

Post by RSteinwand » Thu Oct 08, 2015 10:18 am

The examples I listed above were from the "experimental" section.... :?
Rick

Post Reply