<div class="css-check pass">
  <i class="fas fa-check"></i> CSS Check Pass
</div>

<div class="css-check fail">
  <i class="fas fa-times"></i> CSS Check Fail
</div>

<div class="js-check pass">
  <i class="fas fa-check"></i> JS Check Pass
</div>

<div class="js-check fail">
  <i class="fas fa-times"></i> JS Check Fail
</div>
@supports (background: paint(id)) {
  /* Paint API supported */
  .css-check.pass {
    display: block;
  }
}

@supports not (background: paint(id)) {
  /* Paint API not supported */
  .css-check.fail {
    display: block;
  }
}

/* the rest of this is just for looks */

html, body {
  height: 100%;
}

body {
  display: grid;
  grid-template-columns: repeat(2, 320px);
  align-content: center;
  justify-content: space-evenly;
  margin: 0;
  color: #fff;
  background: linear-gradient(to bottom right, #adb5bd, #f8f9fa);
  font: 2rem/1 'Mukta Mahee', sans-serif;
}

.pass, .fail {
  display: none;
  text-align: center;
  padding: 20px;
  border: 2px solid currentColor;
  background-color: rgba(255, 255, 255, 0.25);
}

.pass {
  color: #2b8a3e;
  background-color: #ebfbee;
}

.fail {
  color: #c92a2a;
  background-color: #ffe3e3;
}

.fas {
  margin-right: 10px;
}
let passEl = document.querySelector('.js-check.pass');
let failEl = document.querySelector('.js-check.fail');

if ('paintWorklet' in CSS) {
  // Paint API supported
  passEl.style.display = 'block';
} else {
  // Paint API not supported
  failEl.style.display = 'block';
}

External CSS

  1. https://use.fontawesome.com/releases/v5.0.6/css/all.css
  2. https://fonts.googleapis.com/css?family=Mukta+Mahee

External JavaScript

This Pen doesn't use any external JavaScript resources.