non-webkit browsers ignore @media queries with webkit-specific features

Question

I'm trying to pass the following @media query, but it's ignored in all non-webkit browsers:

@media not all and (-webkit-transform-2d) and (-webkit-transform-3d) and (-webkit-transform) {[...]}

What I expect to happen is that all webkit browsers that do not return true to all three features are passed, which is also what happens.

Likewise, based on Safari documentation on @media queries, I expect all non-webkit browsers to return false on all three features since they don't support them, but the @media query is ignored instead.

I had a look at the W3C documentation, but I'm not sure how to interpret it correctly.

Can someone help me find the error or another way to style elements in browsers that do not return true in the query?

I'm not interested in JavaScript solutions.

Thank you.

Incidentally, vendor-specific @viewport queries were also ignored for some reason.

Answer 1

You could, instead use the conditionnal rules @support: http://www.w3.org/TR/css3-conditional/#at-supports