Re: [csswg-drafts] [all] Feature detection for CSS property support on certain elements (#4498)

This type of ability (detecting CSS property support in context of certain elements) is often requested from authors, so I definitely think it's worth discussing. But I don't see an easy solution.

Authors often want this as an extension to `@supports` rules, but it is beyond something the parser can test. Building in a fixed set of feature keywords that the browser knows about [has previously been tried & failed](https://developer.mozilla.org/en-US/docs/Web/API/DOMImplementation/hasFeature), because as soon as some browsers return bad results, the entire system becomes meaningless.

Reporting something at computed time is an interesting alternative. As mentioned above by faceless2, it needs to work with the fact that you can set properties on elements where they don't apply for inheritance. So changing the computed value doesn't work.

However, we do already have some properties where we maintain a distinction between [computed and resolved values for `getComputedStyle`](https://drafts.csswg.org/cssom/#resolved-values), so there is currently a bit of a way to detect that "applies to" distinction for those properties. The question is whether it is useful to expand or generalize that in any way: should there be a direct way to detect if a value is resolvable on a particular element?

As a declarative/at-rule feature, I am not optimistic that there will be a generalizable solution. As Oriol notes, "applies to" isn't always a clear question.  Different values for the same property may apply differently; e.g., for filter & mask, browsers have implemented support for different syntaxes at different times for the different rendering contexts (SVG or CSS box). And different rendering contexts aren't just related to markup, it also includes different CSS layout types (`gap` for flex layout) or pseudo-elements.

It might be more reasonable to have this as a DOM API, similar to getComputedStyle, that you can run on a specific element/pseudo-element & identify which style properties are used or unused.

But in the end, even detecting "unused" styles won't always help authors.  What if the style property is used, but not in the way you expect according to the latest specs?  It becomes a question of testing for correct rendering. Does this property, on this element, with these other styles in effect, have the layout impact or visual result that the author is expecting?  And the only way to approach that is with a Modernizr-style suite of JS tests that read back the rendering results.

-- 
GitHub Notification of comment by AmeliaBR
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4498#issuecomment-557190910 using your GitHub account

Received on Thursday, 21 November 2019 17:30:52 UTC