/** * StyleFix 1.0.3 & PrefixFree 1.0.7 * @author Lea Verou * MIT license */ (function(){ if(!window.addEventListener) { return; } var self = window.StyleFix = { optIn: document.currentScript.hasAttribute("data-prefix"), link: function(link) { var url = link.href || link.getAttribute('data-href'); try { // Ignore stylesheets with data-noprefix attribute as well as alternate stylesheets or without (data-)href attribute if(!url || link.rel !== 'stylesheet' || link.hasAttribute('data-noprefix') || (self.optIn && !link.hasAttribute('data-prefix')) ) { return; } } catch(e) { return; } var base = url.replace(/[^\/]+$/, ''), base_scheme = (/^[a-z]{3,10}:/.exec(base) || [''])[0], base_domain = (/^[a-z]{3,10}:\/\/[^\/]+/.exec(base) || [''])[0], base_query = /^([^?]*)\??/.exec(url)[1], parent = link.parentNode, xhr = new XMLHttpRequest(), process; xhr.onreadystatechange = function() { if(xhr.readyState === 4) { process(); } }; process = function() { var css = xhr.responseText; if(css && link.parentNode && (!xhr.status || xhr.status < 400 || xhr.status > 600)) { css = self.fix(css, true, link); // Convert relative URLs to absolute, if needed if(css && base) { css = css.replace(/url\(\s*?((?:"|')?)(.+?)\1\s*?\)/gi, function($0, quote, url) { if(/^([a-z]{3,10}:|#)/i.test(url)) { // Absolute & or hash-relative return $0; } else if(/^\/\//.test(url)) { // Scheme-relative // May contain sequences like /../ and /./ but those DO work return 'url("' + base_scheme + url + '")'; } else if(/^\//.test(url)) { // Domain-relative return 'url("' + base_domain + url + '")'; } else if(/^\?/.test(url)) { // Query-relative return 'url("' + base_query + url + '")'; } else { // Path-relative return 'url("' + base + url + '")'; } }); // behavior URLs shoudn’t be converted (Issue #19) // base should be escaped before added to RegExp (Issue #81) var escaped_base = base.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g,"\\$1"); css = css.replace(RegExp('\\b(behavior:\\s*?url\\(\'?"?)' + escaped_base, 'gi'), '$1'); } var style = document.createElement('style'); style.textContent = '/*# sourceURL='+link.getAttribute('href')+' */\n/*@ sourceURL='+link.getAttribute('href')+' */\n' + css; style.media = link.media; style.disabled = link.disabled; style.setAttribute('data-href', link.getAttribute('href')); if(link.id) style.id = link.id; parent.insertBefore(style, link); parent.removeChild(link); style.media = link.media; // Duplicate is intentional. See issue #31 } }; try { xhr.open('GET', url); xhr.send(null); } catch (e) { // Fallback to XDomainRequest if available if (typeof XDomainRequest != "undefined") { xhr = new XDomainRequest(); xhr.onerror = xhr.onprogress = function() {}; xhr.onload = process; xhr.open("GET", url); xhr.send(null); } } link.setAttribute('data-inprogress', ''); }, styleElement: function(style) { if (style.hasAttribute('data-noprefix')) { return; } var disabled = style.disabled; style.textContent = self.fix(style.textContent, true, style); style.disabled = disabled; }, styleAttribute: function(element) { var css = element.getAttribute('style'); css = self.fix(css, false, element); element.setAttribute('style', css); }, process: function() { // Linked stylesheets $('link[rel="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link); // Inline stylesheets $('style').forEach(StyleFix.styleElement); // Inline styles $('[style]').forEach(StyleFix.styleAttribute); var event = document.createEvent('Event'); event.initEvent('StyleFixProcessed', true, true); document.dispatchEvent(event); }, register: function(fixer, index) { (self.fixers = self.fixers || []) .splice(index === undefined? self.fixers.length : index, 0, fixer); }, fix: function(css, raw, element) { if(self.fixers) { for(var i=0; i -1) { // Gradients are supported with a prefix, convert angles to legacy css = css.replace(/(\s|:|,)(repeating-)?linear-gradient\(\s*(-?\d*\.?\d*)deg/ig, function ($0, delim, repeating, deg) { return delim + (repeating || '') + 'linear-gradient(' + (90-deg) + 'deg'; }); } css = fix('functions', '(\\s|:|,)', '\\s*\\(', '$1' + prefix + '$2(', css); css = fix('keywords', '(\\s|:)', '(\\s|;|\\}|$)', '$1' + prefix + '$2$3', css); css = fix('properties', '(^|\\{|\\s|;)', '\\s*:', '$1' + prefix + '$2:', css); // Prefix properties *inside* values (issue #8) if (self.properties.length) { var regex = RegExp('\\b(' + self.properties.join('|') + ')(?!:)', 'gi'); css = fix('valueProperties', '\\b', ':(.+?);', function($0) { return $0.replace(regex, prefix + "$1") }, css); } if(raw) { css = fix('selectors', '', '\\b', self.prefixSelector, css); css = fix('atrules', '@', '\\b', '@' + prefix + '$1', css); } // Fix double prefixing css = css.replace(RegExp('-' + prefix, 'g'), '-'); // Prefix wildcard css = css.replace(/-\*-(?=[a-z]+)/gi, self.prefix); return css; }, property: function(property) { return (self.properties.indexOf(property) >=0 ? self.prefix : '') + property; }, value: function(value, property) { value = fix('functions', '(^|\\s|,)', '\\s*\\(', '$1' + self.prefix + '$2(', value); value = fix('keywords', '(^|\\s)', '(\\s|$)', '$1' + self.prefix + '$2$3', value); if(self.valueProperties.indexOf(property) >= 0) { value = fix('properties', '(^|\\s|,)', '($|\\s|,)', '$1'+self.prefix+'$2$3', value); } return value; }, prefixSelector: function(selector) { return self.selectorMap[selector] || selector }, // Warning: Prefixes no matter what, even if the property is supported prefix-less prefixProperty: function(property, camelCase) { var prefixed = self.prefix + property; return camelCase? StyleFix.camelCase(prefixed) : prefixed; } }; /************************************** * Properties **************************************/ (function() { var prefixes = {}, properties = [], shorthands = {}, style = getComputedStyle(document.documentElement, null), dummy = document.createElement('div').style; // Why are we doing this instead of iterating over properties in a .style object? Because Webkit. // 1. Older Webkit won't iterate over those. // 2. Recent Webkit will, but the 'Webkit'-prefixed properties are not enumerable. The 'webkit' // (lower case 'w') ones are, but they don't `deCamelCase()` into a prefix that we can detect. var iterate = function(property) { if(/^-[^-]/.test(property)) { properties.push(property); var parts = property.split('-'), prefix = parts[1]; // Count prefix uses prefixes[prefix] = ++prefixes[prefix] || 1; // This helps determining shorthands while(parts.length > 3) { parts.pop(); var shorthand = parts.join('-'); if(supported(shorthand) && properties.indexOf(shorthand) === -1) { properties.push(shorthand); } } } }, supported = function(property) { return StyleFix.camelCase(property) in dummy; } // Some browsers have numerical indices for the properties, some don't if(style && style.length > 0) { for(var i=0; i