Skip to content

Instantly share code, notes, and snippets.

@codler
Last active October 8, 2022 09:32
Show Gist options
  • Save codler/03a0995195aa2859465f to your computer and use it in GitHub Desktop.
Save codler/03a0995195aa2859465f to your computer and use it in GitHub Desktop.
CSS.supports() Polyfill
/*! CSS.supports() Polyfill
* https://gist.github.com/codler/03a0995195aa2859465f
* Copyright (c) 2014 Han Lin Yap http://yap.nu; MIT license */
if (!('CSS' in window)) {
window.CSS = {};
}
if (!('supports' in window.CSS)) {
window.CSS._cacheSupports = {};
window.CSS.supports = function(propertyName, value) {
var key = [propertyName, value].toString();
if (key in window.CSS._cacheSupports) {
return window.CSS._cacheSupports[key];
}
function cssSupports(propertyName, value) {
var style = document.createElement('div').style;
// 1 argument
if (typeof value == 'undefined') {
function mergeOdd(propertyName, reg) {
var arr = propertyName.split(reg);
if (arr.length > 1) {
return arr.map(function(value, index, arr) {
return (index % 2 == 0) ? value + arr[index+1] : '';
}).filter(Boolean);
}
}
// The regex will do this '( a:b ) or ( c:d )' => ["( a:b ", ")", "(", " c:d )"]
var arrOr = mergeOdd(propertyName, /([)])\s*or\s*([(])/gi);
if (arrOr) {
return arrOr.some(function(supportsCondition) { return window.CSS.supports(supportsCondition); });
}
var arrAnd = mergeOdd(propertyName, /([)])\s*and\s*([(])/gi);
if (arrAnd) {
return arrAnd.every(function(supportsCondition) { return window.CSS.supports(supportsCondition); });
}
// Remove the first and last parentheses
style.cssText = propertyName.replace('(','').replace(/[)]$/, '');
// 2 arguments
} else {
style.cssText = propertyName + ':' + value;
}
return !!style.length;
}
return window.CSS._cacheSupports[key] = cssSupports(propertyName, value);
};
}
@zzarcon
Copy link

zzarcon commented Sep 13, 2016

Nice one! I like the mergeOdd part, maybe the only thing I'll change is to move _cacheSupports into a private variable instead of polluting the CSS scope? just to be consistent with the real implementation.

Anyways, thanks for sharing 👍

@amilajack
Copy link

Is it possible to list all the supported CSS values? For example, block would return flex, block, etc

@behnammodi
Copy link

nice

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