<!-- include these elements at the top of your pen and hook up the CSS -->
<div class="support-flexbox"></div>
<div class="support-grid"></div>
<div class="support-initial-letter"></div>
<div class="support-backdrop-filter"></div>
<div class="support-css-shapes"></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.";
}

@supports (display: flex) {
  .support-flexbox::after {
    display: none;
  }
}


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

@supports (display: grid) {
  .support-grid::after {
    display: none;
  }
}

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

@supports (initial-letter: 1) or (-webkit-initial-letter: 1) {
  .support-initial-letter::after {
    display: none;
  }
}

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

@supports (backdrop-filter: blur()) or (-webkit-backdrop-filter: blur()) {
  .support-backdrop-filter::after {
    display: none;
  }
}

/* css shapes */
.support-css-shapes::after {
    content: "🤢 Sorry mate, CSS shapes are unsupported in your browser.";
}

@supports (shape-margin: 0px) or (-webkit-shape-margin: 0px) {
  .support-css-shapes::after {
    display: none;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.