Another quick tip, today! This time it’s about the CSS @supports rule. The rule checks for the browser support, or the lack of it, of a given CSS property/value and applies some style if that check is passed.

Normally, this is used in fallback styling.

One time, I needed a vertical text and preferred the upright orientation for the letters, which I accomplished with the property-value, text-orientation: upright.

Since text-orientation is not widely supported, in the event of fallback, i.e. when the letters don’t stay upright but fall sideways, I wanted some space between them. The following @supports rule lets me add that space when that happens:

The above code means when text-orientation isn’t supported, add letter-spacing to the title. As I said, this is a typical fallback styling use of @supports.

Another use this rule can be of is to group browser specific styles to separate them from the “main” code, streamlining the visual of the code, and to make it easier to update or remove any or all of the browser specific styles in case they’re no longer supported by the browsers.

CSS intrinsic sizing, for example, requires browser prefixes. So here’s how grouping the declaration of those browser specific values can be done with @supports:

The browser specific variant of the max-content value of width is grouped inside @supports. A more precise but unconsolidated @supports matching and declaration of the above is: