I didn’t realize the support for @supports determining selector support was so good! I usually think of @supports as a way to test for property: value pair support. But with the selector() function, we can test for selector support …
You can’t just do @media (prefers-reduced-data: no-preference) alone because, as Kilian Valkhof says:
…[…] that would be false if either there was no support (since the browser wouldn’t understand the media query) or if it was supported but the
It’s entirely possible to build custom checkboxes, radio buttons, and toggle switches these days, while staying semantic and accessible. We don’t even need a single line of JavaScript or extra HTML elements! It’s actually gotten easier lately than it has …
Yes, you can, and it doesn’t really matter in what order. A CSS preprocessor is not required. It works in regular CSS.
This works:
@supports(--a: b) {
@media (min-width: 1px) {
body {
background: red;
}
}
}And so …
Here’s a neat trick from Andy Bell where he uses CSS Custom Properties to check if a particular CSS feature is supported by using JavaScript.
Basically, he’s using the ability CSS has to check for browser support on a particular …
CSS has a neat feature that allows us to test if the browser supports a particular property or property:value combination before applying a block of styles — like how a @media query matches when, say, the width of the browser …
CSS is designed in a way that allows for relatively seamless addition of new features. Since the dawn of the language, specifications have required browsers to gracefully ignore any properties, values, selectors, or at-rules they do not support. Consequently, in …
In early 2017, I presented a couple of workshops on the topic of CSS feature detection, titled CSS Feature Detection in 2017.
A friend of mine, Justin Slack from New Media Labs, recently sent me a link to …
