<!-- our notifications -->
<div class="support-flexbox"></div>
<div class="support-grid"></div>
<div class="support-initial-letter"></div>
<div class="support-backdrop-filter"></div>

body {
  background: #f2f2f2;  
}

[class^="support-"]::after {
    display: block;
    color: #afafaf;
    background: #19212a;
    margin-bottom: 5px;
    text-align: center;
    padding: 20px;
}

/* CSS Flexbox */
.support-flexbox::after {
    content: "💪🏼 Stop flexing; flexbox is unsupported in your browser.";
}

/* CSS Grid */
.support-grid::after {
    content: "😢 Sorry, CSS Grid is unsupported in your browser.";
}

/* initial-letter */
.support-initial-letter::after {
    content: "✋🏼 Hold on there cowboy; initial-letter is unsupported in your browser.";
}

/* backdrop-filter */
.support-backdrop-filter::after {
    content: "💀 No good, backdrop-filter is unsupported in your browser.";
}