Detecting CSS Selector Help

You would possibly already concentrate on how we are able to use function detection in CSS to examine whether or not a specific property and worth mixture is supported. It is a fairly good technique to go about writing strong CSS that caters for customers with an entire vary of browsers and gadgets with totally different capabilities, and is infinitely preferable to person 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 assist would hamper the person 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, once we’ll use that as a substitute.

We might make this a bit extra concise by utilizing the not key phrase, which primarily 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 previous browsers that don’t assist function queries (in addition to not supporting aspect-ratio) received’t get the fallback. That is a lot much less of an issue than it was once, on condition that function queries have been well-supported for a while, however price allowing for nonetheless, particularly if a number of your customers is likely to be utilizing older gadgets.

It’d sound apparent, nevertheless it’s price 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 below are legitimate, which means that any kinds contained in the @helps statements won’t ever be utilized:

/* Invalid worth for aspect-ratio */
@helps (aspect-ratio: pink) {
}

/* 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 facet 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 assist

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 type a component when it’s centered with a keyboard. Help for :has() has just lately landed in Chrome and Safari, which permits us to use kinds to a component because of its kids.

Fortunately, we are able to detect assist for these selectors utilizing @helps, by prefixing the parentheses with selector. We would need to change the main target type of button when it receives focus from a mouse, however hold the default focus ring when centered with a keyboard, and if the browser doesn’t assist :focus-visible.

@helps selector(:focus-visible) {
  button:focus:not(:focus-visible) {
    define: 2px strong limegreen;
  }
}

(This complicated selector doesn’t appear to work in Safari for some purpose, regardless of Safari supporting each @helps selector() and :focus-visible.)

There seems to be a slight discrepancy between browser implementations when utilizing extra complicated pseudo-classes resembling :has(): At present Safari requires :has() to incorporate another selector, however Chrome doesn’t.

/* This works in Chrome however not Safari */
@helps selector(:has()) {
}

/* This works all over the place */
@helps selector(:has(.some-element)) {
}

Browser assist

@helps selector() is supported in all fashionable browsers, however solely previously 12 months or so. As ever, it’s price contemplating customers of older browsers, and utilizing it with care as a part of your progressive enhancement technique.