CSS editor does not support webkit filter/filter

[jwang1919]

Popcode reads -webkit-filter and filter as invalid properties.

[outoftime]

@jwang1919 so, I have learned some things:

• filter is not part of a stable CSS spec. It’s a W3C working draft
• It’s not supported whatsoever by IE
• Only the most recent release of Chrome (end of August) started supporting it unprefixed

With that in mind, do you think Popcode should support it?

[jwang1919]

Yes because Cloud9 supports use of the filter property.
EX: https://raw.githubusercontent.com/jwang1919/ScriptEdBasketball/master/screenshot.png

Ultimately if we're going to transition students from Popcode to Cloud9, any CSS valid in Cloud9 should be valid in Popcode. My thought is that (in our past experiences) some students like to prototype their code in JSBin before deploying to Cloud9. If we invalidate the filter property in Popcode, students might assume it won't work in Cloud9.

Also filter has some cool effects that might appeal to students especially if they decide to use Popcode in hackathons.

[outoftime]

@jwang1919 But Cloud9 isn’t a learning tool—it’s just a coding environment. it also “supports” CSS properties like silliness and marshmallows, in the sense that it doesn’t complain if you use them, right? Ultimately students can use non-standard properties in Cloud9 as long as the browser they’re using supports them, but I think we need to figure out independently where Popcode should draw the line (for instance, I can guarantee lots of students at GWHS are using a version of Chrome that doesn’t support filter).

[outoftime]

Actually, I stand corrected that Cloud9 treats filter and marshmallows the same—it does pop up an “invalid property” warning for the latter.

My point remains, though, that depending on what laptop they use that day, students may still find that filter does not work for them in Cloud9…

[outoftime]

OK, giving it some more thought—the point of Popcode is to notify students of mistakes in their code. Using filter isn’t a mistake—it might not work in some browsers, but it’s not a mistake. So, Popcode should support it.

[jwang1919]

@outoftime The point about the outdated Chrome versions does make sense. I would still argue in favor of filter because it's more of a school IT issue than a Popcode issue. Also older versions of Chrome do support the -webkit-filter property,

Also forgot to reply about not supported in IE. I don't think that'll be an issue, no one uses IE except corporate businesses/government with computers running XP.

Maybe we can reach a middle ground and add a warning saying something like "The CSS property 'filter' is an experimental property that might not work in some browsers", with a link to the caniuse.com of that property.

I also thought of a over engineered example where we can sniff the browser and run CSS validations based on what that browser can support (thinking like how Modernizr.js does it).

[jwang1919]

Or we can figure this out democratically with a vote among contributors as well as from ScriptEd volunteers.

[outoftime]

Just to update since we moved back from Trello—the issue is band-aided, but ultimately we need to fix PrettyCSS upstream to get real validations.

[jwang1919]

Sounds fun. What about the alternative of using another CSS linter?

[outoftime]

@jwang1919 we would need to get rid of PrettyCSS entirely, and at this point I don’t know of another CSS linter that validates not just properties but values with respect to properties (e.g. it will tell you that color: 50% is not valid even though width: 50% is). I think for that reason it’s worth keeping around and worth contributing upstream (I already added Flexbox support, and it wasn’t too bad)

[jwang1919]

Already resolved this ticket! See PR #215