Recipes For Detecting Assist For CSS At-Guidelines

The @helps at-rule has been prolonged a number of instances since its preliminary launch. As soon as solely able to checking help for property/worth pairs, it may well now test for a selector utilizing the selector() wrapper operate and totally different font codecs and techs utilizing font-format() and font-tech(), respectively. Nevertheless, one function the neighborhood nonetheless longs for is testing different at-rules help.

@helps at-rule(@new-rule) {
  /* @new-rule is supported */
}

The CSSWG determined in 2022 so as to add the prior at-rule() wrapper operate. Whereas that is welcome and fantastic information, right here we’re two years later and we don’t have quite a lot of updates on when it will likely be added to browsers. So, how can we test for help within the meantime?

Humorous coincidence: Simply yesterday the Chrome staff modified the standing from “new” to “assigned” as in the event that they knew I used to be fascinated about it.

On the lookout for a solution, I discovered this publish by Bramus that provides a workaround: whereas we are able to’t test for a CSS at-rule within the @helps at-rule, we are able to take a look at a property that was shipped with a specific at-rule in its place, the pondering being that if a associated function was launched that we can take a look at and it’s supported, then the function that we’re unable to check is more likely to be supported as effectively… and vice versa. Bramus offers an instance that checks help for the animation-timeline property to test if the @scroll-timeline at-rule (which has been discontinued) is supported because the two had been shipped collectively.

@helps (animation-timeline: works) {
  /* @scroll-timeline is supported*/
}

/* Be aware: @scroll-timeline does not exist anymore */

Bramus calls these “telltale” properties, which is a enjoyable manner to consider this as a result of it resembles a puzzle of deduction, the place we’ve to discover a associated property to test if its at-rule is supported.

I wished to see what number of of those puzzles I may remedy, and within the course of, know which at-rules we are able to reliably take a look at right now. So, I’ve recognized a full record of supportable at-rules that I may discover.

I’ve excluded at-rules that provide no browser help, like @color-profile, @when, and @else, in addition to deprecated at-rules, like @doc. Equally, I’m excluding older at-rules which have loved huge browser help for years — like @web page, @import, @media, @font-face, @namespace and @keyframes — since these are extra apparent.

@container dimension queries (baseline help)

Testing help for dimension queries is pretty trivial because the module introduces a number of telltale properties, notably container-type, container-name and container. Select your favourite as a result of they need to all consider the identical. And if that property is supported, then @container must be supported, too, because it was launched on the similar time.

@helps (container-type: dimension) {
  /* Measurement queries are supported! */
}

You possibly can mix each of them by nesting a @helps question inside a @container and vice versa.

@helps (container-type: dimension) {
  @container (width > 800px) {
    /* Kinds */
  }
}

@container fashion queries (partial help)

Measurement queries give us quite a lot of telltale properties to work with, however the identical can’t be mentioned about fashion queries. Since every factor has a mode containment by default, there isn’t a property or worth particular to them. We will work round that by forgetting about @helps and writing the types inside a mode question as a substitute. Fashion queries work in supporting browsers however in any other case are ignored, so we’re in a position to write some base types for older browsers that will likely be overridden by fashionable ones.

.container {
  --supports-style-queries: true;
}

.container .baby {
  /* Base types */
}

@container fashion(--supports-style-queries: true) {
  /* Container queries are supported! */
  .baby {
    /* We will override the bottom types right here */
  }
}

@counter-style (partial help)

The @counter-style at-rule permits us to make {custom} counters for lists. The types are outlined inside a @counter-style with {custom} title.

@counter-style triangle {
  system: cyclic;
  symbols: ‣;
  suffix: " ";
}

ul {
  list-style: triangle;
}

We don’t have a telltale property to assist us remedy this puzzle, however reasonably a telltale worth. The list-style-type property used to just accept just a few predefined key phrase values, however now helps extra values since @counter-style was launched. Meaning we must always be capable to test if the browser helps <custom-ident> values for list-style-type.

@helps (list-style: custom-ident) {
  /* @counter-style is supported! */
}

@font-feature-values (baseline help)

Some fonts embody alternate glyphs within the font file that may be custom-made utilizing the @font-feature-values at-rule. These {custom} glyphs may be displayed utilizing the font-variant-alternatesl, in order that’s our telltale property for checking help on this one:

@helps (font-variant-alternates: swash(custom-ident)) {
  /* @font-feature-values is supported! */
}

@font-palette-values (baseline help)

The identical idea may be utilized to the @font-palette-values at-rule, which permits us to switch multicolor fonts utilizing the font-palette property that we are able to use as its telltale property.

@helps (font-palette: regular) {
  /* @font-palette-values is supported! */
}

@position-try (partial help)

The @position-try at-rule is used to create {custom} anchor fallback positions in anchor positioning. It’s most likely the one at-rule on this record that wants extra help since it’s such a brand new function. Thankfully, there are various telltale properties in the identical module that we are able to attain for. Watch out, although, as a result of some properties have been renamed since they had been initially launched. I like to recommend testing help for @position-try utilizing anchor-name or position-try as telltale properties.

@helps (position-try: flip-block) {
  /* @position-try is supported! */
}

@scope (partial help)

The @scope at-rule appears difficult to check at first, however it seems can apply the identical technique we did with fashion queries. Create a base fashion for browsers that don’t help @scope after which override these types inside a @scope block that may solely be legitimate in supporting browsers. A progressive enhancement technique if there ever was one!

.foo .factor {
  /* Base fashion */
}

@scope (.foo) to (.bar) {
  :scope .factor {
    /* @scope is supported, override base fashion */
  }
}

@view-transition (partial help)

The final at-rule on this record is @view-transition. It’s one other function making fast strides into browser implementations, however it’s nonetheless a bit methods out from being thought-about baseline help.

The simplest manner can be to make use of its associated view-transition-name property since they launched shut collectively:

@helps (view-transition-name: custom-ident) {
  /* @view-transition is supported! */
}

However we could as effectively use the selector() operate to test for one among its many pseudo-elements help:

@helps selector(::view-transition-group(transition-name)) {
  /* @view-transition is supported! */
}

A little bit useful resource

I put this record right into a demo that makes use of @helps to fashion totally different at-rules primarily based on the take a look at recipes we lined:

The unsolved ones

Though I really feel like I put a stable record collectively, there are three at-rules that I couldn’t work out find out how to take a look at: @layer, @property, and @starting-style.

Fortunately, every one is fairly decently supported in fashionable browsers. However that doesn’t imply we shouldn’t take a look at for help. My hunch is that we are able to textual content @layer help much like the approaches for testing help for fashion() queries with @container the place we set a base fashion and use progressive enhancement the place there’s help.

The opposite two? I do not know. However please do let me know the way you’re checking help for @property and @starting-style — or the way you’re checking help for every other function otherwise than what I’ve right here. This can be a difficult puzzle!