Great tip from tuts+:
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
@supports
rule to make a handy reusable CodePen asset.
New to Feature Queries (e.g. @supports
)? Using Feature Queries in CSS will get you started.
The trick is to add a warning using ::after
, and then hide it when @supports
indicates the feature is supported. Like this:
/* CSS Grid */
.support-grid::after {
content: "😢 Sorry, CSS Grid is unsupported in your browser.";
}
@supports (display: grid) {
.support-grid::after {
display: none;
}
}
Here’s a demo pen:
See the Pen CSS Grid Layout: Fluid Columns and Better Gutters v by Envato Tuts+ (@tutsplus) on CodePen.