Skip to content

Instantly share code, notes, and snippets.

@sndrs
Created January 10, 2017 15:19
Show Gist options
  • Save sndrs/f9f7bc54d0226dd2d505bdeea52364f7 to your computer and use it in GitHub Desktop.
Save sndrs/f9f7bc54d0226dd2d505bdeea52364f7 to your computer and use it in GitHub Desktop.
Generate scoping classes CSS properties and value support
function shimCssSupports() {
var cssToDOMregEx = /([a-z])-([a-z])/g;
function cssToDOMreplacer (str, m1, m2) {
return m1 + m2.toUpperCase();
}
function cssToDOM(name) {
return name.replace(cssToDOMregEx, cssToDOMreplacer).replace(/^-/, '');
}
var elm = document.createElement('test');
return function(prop, value) {
try {
var DOMProp = cssToDOM(prop);
var originalValue = elm.style[DOMProp];
if (originalValue === undefined) return false;
if (value === originalValue) return true;
elm.style[DOMProp] = value;
if (originalValue !== elm.style[DOMProp]) return true;
} catch (e) {
// noop
}
return false;
}
}
var getCssSupport = (function (window) {
var cssSupports = 'CSS' in window && 'supports' in window.CSS ?
window.CSS.supports : shimCssSupports();
return function(props, values) {
return props.some(function (prop) {
return values.some(function (value) {
return cssSupports(prop, value);
});
})
}
})(window);
function getCssSupportClass(feature) {
// If we're just testing for a property, use `inherit` for the value.
var values = feature.values || ['inherit'];
return (getCssSupport(feature.props, values) ? 'has-' : 'has-no-') + feature.className;
}
var cssSupportClasses = [{
className: 'asdf',
props: ['asdf'] // made up property
}, {
className: 'qwer',
props: ['position'],
values: ['qwer'] // made up value
}, {
className: 'flex',
props: ['flex', '-ms-flex', '-webkit-flex', '-moz-box-flex', '-webkit-box-flex']
}, {
className: 'flex-wrap',
props: ['flex-wrap', '-ms-flex-wrap', '-webkit-flex-wrap']
}, {
className: 'fixed',
props: ['position'],
values: ['fixed']
}, {
className: 'sticky',
props: ['position'],
values: ['sticky', '-webkit-sticky']
}].map(getCssSupportClass).join(' ');
console.log(cssSupportClasses)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment