CSS property "appearance" is not supported

[terrierscript]

-webkit-appearance and -moz-appearance is supported
appearance property is not supported?

• https://drafts.csswg.org/css-ui-4/#propdef-appearance
• http://css-infos.net/property/appearance

[aeschli]

appearance is not supported by most browsers yet: https://developer.mozilla.org/en-US/docs/Web/CSS/appearance

[Harry-Harrison]

Hate to be that guy, but it not being supported by "most browsers" isn't really an excuse. Especially in this modern world where everyone and their dog uses an autoprefixer or some sort.

An ideal option might be to allow overrides for such rules? The following works for me as a catchall, but it's not ideal.

"css.lint.unknownProperties": "ignore",
"scss.lint.unknownProperties": "ignore"

[praveenpuglia]

@aeschli I don't know how but if the prefixed version of a property is supported, I think it makes sense to have the standard property in there. Not having the standard one is in a way giving devs a push to write prefixed code, which is definitely a bad thing to do when we have tools like autoprefixer.

[praveenpuglia]

One thing I realized is that the way browser.js is generated, any property that has browsers="none" in the schema xml, will be filtered out.

Here's the dilemma.

We have to write none for the standard appearance property as no browser supports it.
But we need to get the appearance property to show up fine in text editor.

Can we have an attribute like non-standard or something more meaningful, which when applied to an entry in css-schema.xml doesn't filter it out?

@aeschli - thoughts?

[aeschli]

@praveenpuglia I'd suggest to just remove 'browsers="none" but add a comment.

[praveenpuglia]

Will be sending a PR then!

[praveenpuglia]

@aeschli - is the entry for appearance removed from css-schema.xml? I don't see it in that file.

[aeschli]

@praveenpuglia I haven't removed anything. I don't think appearance ever was in there.

[praveenpuglia]

This is urging me to think if the language service should have tiny icons to indicate properties/values that are non-standard/experimental.
Example - MDN has a flask icon indicating experimental feature.

I, however, also think that it will then have to be done for a lot of properties which just increases maintenance overhead for support data.

[praveenpuglia]

I thought i would start working on this today. But I have bunch of doubts.
The spec - https://drafts.csswg.org/css-ui-4/#appearance-switching
defines the appearance property to have just two values. auto | none. The prefixed versions however has tons of values.

https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance#Values

If we do need to include this, which the spec says isn't ready for shipping, should we do this?

[aeschli]

We only want to add established properties, or this won't be maintainable.
If you want to add an experimental tag, I'm fine with that, and I add UI for that, but it should only happen for properties that are very close to become standard.

[praveenpuglia]

Then I think this can stay at the very bottom of the backlog. It's way far from becoming a standard anytime soon!

[piotr-cz]

Is it possible to make builtin linter ignore some part of a file like so?

button {
  appearance: none; /* csslint allow: known-properties */
}

I'm using CSS compiler which adds vendor prefixes at build, so it doesn't make sense for me add all vendor perfixed properties by hand (I'm likely to forget some)

[marchershey]

Wow.. this still hasn't been resolved yet?

[praveenpuglia]

@aeschli can we just add the entry for appearance for now and when we have the MDN data integration by @octref we can remove that entry from there.

I think we can probably also add a "non-standard" attribute to the entry and set it to true for it. In UI, we can show a warning about the same?

[aeschli]

appearance got added for April