Skip to content

Instantly share code, notes, and snippets.

@atelierbram

atelierbram/feature-detect.js

Last active June 27, 2016 11:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save atelierbram/daf86f145835c5296735b50e514dfc18 to your computer and use it in GitHub Desktop.
Save atelierbram/daf86f145835c5296735b50e514dfc18 to your computer and use it in GitHub Desktop.
Download ZIP
feature detect snippet
Raw
feature-detect.js
var root = document.documentElement;
function featureDetect() {
"use strict";
root.className = root.className.replace(/\bno-js\b/g, '') + ' js ';
if ('querySelector' in document && 'addEventListener' in window && Array.prototype.forEach) {
root.className = root.className.replace(/\bcore\b/g, '') + ' enhanced ';
}
var s = document.body || document.documentElement,
s = s.style;
if (s.webkitFlexWrap == '' || s.msFlexWrap == '' || s.flexWrap == '') {
root.className = root.className.replace(/\bno-flexbox\b/g, '') + ' flexbox ';
}
}
featureDetect();
Raw
index.html
<!doctype html>
<html class="no-js core no-flexbox no-svg" lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="assets/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="test"/>
<script>if ( 'querySelector' in document && 'addEventListener' in window && Array.prototype.forEach ) { document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/g, '') + ' js '; }function featureDetect(){"use strict";"querySelector"in document&&"addEventListener"in window&&Array.prototype.forEach&&(document.documentElement.className=document.documentElement.className.replace(/\bcore\b/g,"")+" enhanced ");var a=document.body||document.documentElement,a=a.style;(""==a.webkitFlexWrap||""==a.msFlexWrap||""==a.flexWrap)&&(document.documentElement.className=document.documentElement.className.replace(/\bno-flexbox\b/g,"")+" flexbox ")}function supportsSVG(){"use strict";return!!document.createElementNS&&!!document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect}function addLoadEvent(a){var b=window.onload;"function"!=typeof window.onload?window.onload=a:window.onload=function(){b(),a()}}featureDetect(),supportsSVG()?document.documentElement.className+=" svg":document.documentElement.className+=" no-svg",supportsSVG(),addLoadEvent(function(){var a=document.documentElement;a.className=a.className+" is-loaded"});</script>
</head>
<body>
<main>
<p>stuff</p>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment