Skip to content

Instantly share code, notes, and snippets.

@mhulse

mhulse/no-blend.js

Last active October 25, 2015 16:52
Show Gist options
  • Save mhulse/6ec4db51a61eb958b82d to your computer and use it in GitHub Desktop.
Save mhulse/6ec4db51a61eb958b82d to your computer and use it in GitHub Desktop.
Download ZIP
A simple JS check to see if CSS mix-blend-mode is supported.
Raw
gistfile1.html
<!doctype html>
<html class="no-blend">
<head>
<script>/* Put no-blend.js code here, sooner rather than later. */</script>
</head>
<body>
...
</body>
</html>
Raw
gistfile2.css
/* Example CSS usage: */
.blend body { background: #fff url(../images/grunge.gif) center top; }
Raw
no-blend.js
/*! no-blend | https://gist.github.com/mhulse/6ec4db51a61eb958b82d */
;(function(window, document) {
(window.getComputedStyle(document.head, null).mixBlendMode) && (document.documentElement.className = document.documentElement.className.replace(/\bno-blend\b/, 'blend'));
}(window, document));
/*! no-blend uglified | https://gist.github.com/mhulse/6ec4db51a61eb958b82d */!function(e,n){e.getComputedStyle(n.head,null).mixBlendMode&&(n.documentElement.className=n.documentElement.className.replace(/\bno-blend\b/,"blend"))}(window,document);
@mhulse
Copy link
Author

mhulse commented Sep 28, 2014

H/T: Basics of CSS Blend Modes

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment