When your CodePen demos rely on cutting edge CSS it’s a good idea to warn people. Let’s provide a notification when browsers don’t support our demos, using the @support rule to make a handy reusable CodePen asset.
End Result
Here’s what we’re working towards; a reusable notification to highlight unsupported CSS. It will be kept almost entirely in its own pen, which we can add to other demos via an External CSS link:
You’ll find we use it on Tuts+ for CSS tutorials like the following:
The @supports Rule
CSS @supports has been around for a few years and enjoys pretty decent browser support itself. It enables us to perform feature queries, applying CSS only if specified properties are supported by the browser at the time. This prevents half-executed style rules and even allows us to display a warning if we fancy it.
It works by wrapping style declarations in a condition, like this:
1 |
@supports (display: grid) { |
2 |
div { |
3 |
/* when CSS Grid is supported, do something */
|
4 |
}
|
5 |
}
|
Notifications
Let’s whip up a couple of quick notifications:
We’re adding the textual content via a pseudo element so that we can control it from one single place. These labels will ultimately be used on many demos, so keeping the content separate means we can change them all in one go.
1 |
.support-initial-letter::after { |
2 |
content: "✋🏼 Hold on there cowboy; initial-letter is unsupported in your browser."; |
3 |
}
|
Feel free to style these however you want.
Adding the @supports Condition
Our notifications are visible by default, but we only want them to be displayed when their respective properties aren’t supported. Let’s add a condition to do that:
1 |
@supports (initial-letter: 1) or (-webkit-initial-letter: 1) { |
2 |
.support-initial-letter::after { |
3 |
display: none; |
4 |
}
|
5 |
}
|
Here we’re saying “if initial-letter or -webkit-initial-letter are supported, don’t display the .support-initial-letter notification”.
We then repeat this for each of the notifications, giving us the following finished pen:
How many notifications can you see?
Reuse as an External CodePen Asset
With our pen saved we can reference it from other pens, giving us a super-useful external asset. Add it to a new pen as an external CSS file:
This will only pull in the CSS, ignoring any HTML or JS we have in there, so now add whichever notification element you need to the HTML of your new pen:
1 |
<div class="support-backdrop-filter"></div> |
And that’s it, done! Whenever you update your @supports pen, those changes will be reflected across all the demos you’ve used it on.
Conclusion
You’ll notice a lot of cutting edge CodePenners using a @supports notification on their pens; Jen Simmons does it, Rachel Andrew does it, and we do it. Pulling your notification styles into an external pen is the perfect way to manage things whilst keeping your markup sparkling clean. Update the messages, add new CSS properties, apply seasonal branding, go nuts! Let us know how you use @supports in the comments.
Further Resources
By
