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:
@supports not ((-webkit-text-orientation: upright) or (text-orientation: upright)) { | |
/* some in-between space if the letters are sideways */ | |
.title {letter-spacing: 5px;} | |
} |
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
:
@supports ((width: -moz-max-content) or (width: -webkit-max-content)) { | |
p { | |
width: -moz-max-content; | |
width: -webkit-max-content; | |
} | |
} |
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:
@supports (width: -moz-max-content) { p{width: -moz-max-content;} } | |
@supports (width: -webkit-max-content) { p{width: -webkit-max-content;} } |