You may already pay attention to how we will use characteristic detection in CSS to examine whether or not a selected property and worth mixture is supported. It is a fairly sensible option to go about writing sturdy CSS that caters for customers with an entire vary of browsers and units with totally different capabilities, and is infinitely preferable to consumer agent sniffing. We are able to examine whether or not a browser helps aspect-ratio, say, and supply a fallback in circumstances the place lack of help would hamper the consumer expertise.
.some-element {
max-height: 200px;
}
@helps (aspect-ratio: 1) {
.some-element {
aspect-ratio: 1;
max-height: none;
}
}This specific block of code units a max-height on a component, besides when aspect-ratio is supported, after we’ll use that as an alternative.
We may make this a bit extra concise through the use of the not key phrase, which basically reverses the above: We’ll solely set a max-hight when aspect-ratio is not supported.
.some-element {
aspect-ratio: 1;
}
@helps not (aspect-ratio: 1) {
.some-element {
max-height: 200px;
}
}The one drawback right here is that very outdated browsers that don’t help characteristic queries (in addition to not supporting aspect-ratio) gained’t get the fallback. That is a lot much less of an issue than it was once, provided that characteristic queries have been well-supported for a while, however value taking into account nonetheless, particularly if a number of your customers could be utilizing older units.
It would sound apparent, nevertheless it’s value noting: For @helps to guage true, each the property title and the worth should be supported. Neither of the expressions contained in the parentheses listed here are legitimate, that means that any kinds contained in the @helps statements won’t ever be utilized:
/* Invalid worth for aspect-ratio */
@helps (aspect-ratio: purple) {
}
/* Lacking worth */
@helps (aspect-ratio) {
}We are able to additionally mix circumstances utilizing the and and or operators, a lot the identical as we’d write a media question. The next will apply a side ratio solely when the browser helps each aspect-ratio and rotate (one of many new CSS remodel properties):
@helps (aspect-ratio: 1) and (rotate: 30deg) {
.some-element {
aspect-ratio: 1;
}
}Detecting selector help
CSS has given us some fairly cool selectors just lately within the type of pseudo-elements and pseudo-classes. For instance, :focus-visible permits us to fashion a component when it’s targeted with a keyboard. Help for :has() has just lately landed in Chrome and Safari, which permits us to use kinds to a component on account of its kids.
Fortunately, we will detect help for these selectors utilizing @helps, by prefixing the parentheses with selector. We’d need to change the main focus fashion of button when it receives focus from a mouse, however preserve the default focus ring when targeted with a keyboard, and if the browser doesn’t help :focus-visible.
@helps selector(:focus-visible) {
button:focus:not(:focus-visible) {
define: 2px strong limegreen;
}
}(This advanced selector doesn’t appear to work in Safari for some motive, regardless of Safari supporting each @helps selector() and :focus-visible.)
There seems to be a slight discrepancy between browser implementations when utilizing extra advanced pseudo-classes equivalent to :has(): Presently Safari requires :has() to incorporate another selector, however Chrome doesn’t.
/* This works in Chrome however not Safari */
@helps selector(:has()) {
}
/* This works in all places */
@helps selector(:has(.some-element)) {
}Browser help
@helps selector() is supported in all fashionable browsers, however solely previously 12 months or so. As ever, it’s value contemplating customers of older browsers, and utilizing it with care as a part of your progressive enhancement technique.
