JSFiddle - React, Tailwind, and code Playground

by lshettyl

HTML

<h1>CSS Feature detection</h1>

CSS

/* fallback */
h1 {
   color: black;
}   
 
/* text-stroke support */
.textShadow h1 {
  color: white;
  -webkit-text-stroke: 2px black;
}

JavaScript

var supports = (function() {
   var div = document.createElement('div'),
      vendors = 'Khtml Ms O Moz Webkit'.split(' '),
      len = vendors.length;
 
   return function(prop) {
      if ( prop in div.style ) return true;
 
      prop = prop.replace(/^[a-z]/, function(val) {
         return val.toUpperCase();
      });
 
      while(len--) {
         if ( vendors[len] + prop in div.style ) {
            // browser supports box-shadow.
            return true;
         } 
      }
      return false;
   };
})();
 
if ( supports('textShadow') ) {
   document.documentElement.className += ' textShadow';
}