├── .gitignore
├── README.md
├── __COMPILED
    └── CSS.supports.js
└── __SRC
    └── CSS.supports.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .sass-cache
2 | .idea
3 | *.DS_Store
4 | *.swp
5 | .project
6 | .settings
7 | *.iml
8 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | CSS.supports
 2 | 
 3 | A polyfill to add window.CSS.supports JavaScript API support to browsers without support @supports. It uses window.supportsCSS if available.
 4 | 
 5 | window.CSS.supports is the proposed object defined in the [CSS Conditional Rules Module Level 3](http://www.w3.org/TR/css3-conditional/) specification. Opera added support for window.supportsCSS() in version 12.10 of the browser. Though @support is enabled in Firefox 17.0 behind a flag, the JavaScript API is not yet available.
 6 | 
 7 | Other browsers have not yet added support ([check current support tables](http://caniuse.com/#feat=css-featurequeries)).
 8 | 
 9 | This polyfill bring both syntax of CSS.supports:
10 | ```
11 | interface CSS {
12 |   boolean supports(DOMString property, DOMString value);
13 |   boolean supports(DOMString declaration);
14 | }
15 | ```
16 | so you can write:
17 | ```javascript
18 | CSS.supports("(display: none) and(display:flex)") == (CSS.supports("display", "none") && CSS.supports("display", "flex"))
19 | ```
20 | 


--------------------------------------------------------------------------------
/__COMPILED/CSS.supports.js:
--------------------------------------------------------------------------------
1 | /* CSS.supports polyfill | @version 0.4 | MIT License | github.com/termi/CSS.supports */
2 | ;(function(){"use strict";function s(l){function e(){var b=d.length-1;0>b&&(t=!1);return d[b]}function a(c){var l=d.length-1;0>l&&(t=!1);b=d[l]=c}function m(b,c,a,d){r=a||h;var e,f,g;d&&r--;do if(a=l.charAt(++r),d)(g=a&&(e||f),"'"==a||'"'==a)?g=e=!e:e||(f||"("!=a?f&&")"==a&&(f=!1,g=!0):g=f=!0);while(g||a&&!(b&&a==b||c&&a!=c));if(null==b||a==b)return r}l||s.a();var d=[],f,b,t=!0,k,n,q,w,u,g=41,c,h=-1,r,v=l.length;for(d.push(void 0);++h<v;){1==c?g=40:2==c||4==c||32==c?g=41:64==c?g=39:16==c?g=103:8==c&&(g=16);f=l.charAt(h);
3 | if(g&1&&"n"==f&&"not"==l.substr(h,3))c=1,h+=2;else if(g&2&&"a"==f&&"and"==l.substr(h,3))c=2,h+=2;else if(g&4&&"o"==f&&"or"==l.substr(h,2))c=4,h++;else if(g&32&&"("==f&&m("("," "))c=32,h=r-1;else if(g&64&&")"==f&&1<d.length)c=64;else if(g&8&&"("==f&&(n=m(null," "))&&m(":",null,n)){c=8;h=r-1;q=l.substr(n,h-n+1).trim();n=0;w=null;continue}else if(g&16&&(n=m(null," "))&&m(")",null,n,!0))c=16,h=r,w=l.substr(n,h-n).trim(),n=0,f=" ";else if(" "==f)continue;else c=0;t&&f&&c&g||s.a();t=!0;if(4==c)!1===b?(a(),
4 | u=!1):!0===b&&(u=!0);else if(!u)if(b=e(),1==c)k=!0;else if(2==c)!1===b?u=!0:a();else{if(!1!==b||c&96)32==c?d.push(void 0):64==c?(u=!1,d.pop(),void 0!==e()&&(b=!!(b&e())),k=!1):16==c&&(a(p(q,w)),k&&(b=!b),k=!1,w=q=null);a(b)}}(!t||void 0===b||1<d.length)&&s.a();return b}var a=window,p,v,q,k=a.CSS;k||(k=a.CSS={});p=k.supports;!p&&a.supportsCSS&&(p=k.supports=a.supportsCSS.bind(a),a.__proto__&&delete a.__proto__.supportsCSS);if("function"===typeof p){var x;a:{try{p.call(k,"(a:a)");x=!(a=p=null);break a}catch(y){}x=
5 | void 0}if(x)return}else v="runtimeStyle"in document.documentElement,a=a.document.createElement("_"),q={},p=function(a,e,k,m,d){var f=m+"\\/"+d;if(f in q)return q[f];a=(m+"").replace(this,a);var b=m&&d&&a in e;if(b)if(v)if(/\(|\s/.test(d))try{e[a]=d,b=!!e[a]}catch(p){b=!1}else e.cssText="display:none;height:0;width:0;visibility:hidden;position:absolute;position:fixed;"+m+":"+d,document.documentElement.appendChild(k),b=k.currentStyle[a]==d,document.documentElement.removeChild(k);else e.cssText=m+":"+
6 | d,b=e[a],b=b==d||b&&0<e.length;e.cssText="";return q[f]=b}.bind(/(-)([a-z])/g,function(a,e,k){return k.toUpperCase()},a.style,v?a:null);s.a=function(){throw Error("SYNTAX_ERR");};k.supports=function(a,e){if(!arguments.length)throw Error("WRONG_ARGUMENTS_ERR");return 1==arguments.length?s(a):p(a,e)};a=a=null})();
7 | 


--------------------------------------------------------------------------------
/__SRC/CSS.supports.js:
--------------------------------------------------------------------------------
  1 | /** @license CSS.supports polyfill | @version 0.4 | MIT License | github.com/termi/CSS.supports */
  2 | 
  3 | // ==ClosureCompiler==
  4 | // @compilation_level ADVANCED_OPTIMIZATIONS
  5 | // @warning_level VERBOSE
  6 | // @jscomp_warning missingProperties
  7 | // @output_file_name CSS.supports.js
  8 | // @check_types
  9 | // ==/ClosureCompiler==
 10 | 
 11 | /*
 12 | TODO::
 13 | 1. element.style.webkitProperty == element.style.WebkitProperty in Webkit (Chrome at least), so
 14 | CSS.supporst("webkit-animation", "name") is true. Think this is wrong.
 15 | */
 16 | 
 17 | ;(function() {
 18 | 	"use strict";
 19 | 
 20 | 	var global = window
 21 | 		, _CSS_supports
 22 | 		, msie
 23 | 		, testElement
 24 | 		, prevResultsCache
 25 | 		, _CSS = global["CSS"]
 26 | 	;
 27 | 
 28 | 	if( !_CSS ) {
 29 | 		_CSS = global["CSS"] = {};
 30 | 	}
 31 | 
 32 | 	// ---=== HAS CSS.supports support ===---
 33 | 	_CSS_supports = _CSS.supports;
 34 | 
 35 | 	// ---=== HAS supportsCSS support ===---
 36 | 	if( !_CSS_supports && global["supportsCSS"] ) {// Opera 12.10 impl
 37 | 		_CSS_supports = _CSS.supports = global["supportsCSS"].bind(global);
 38 | 		if( global.__proto__ ) {
 39 | 			delete global.__proto__["supportsCSS"];
 40 | 		}
 41 | 	}
 42 | 
 43 | 
 44 | 	if(typeof _CSS_supports === "function") {
 45 | 		if( (function() {
 46 | 			// Test for support [supports condition](http://www.w3.org/TR/css3-conditional/#supportscondition)
 47 | 			try {
 48 | 				_CSS_supports.call(_CSS, "(a:a)");
 49 | 				// SUCCESS
 50 | 				return !(global = _CSS_supports = null);//return true
 51 | 			}
 52 | 			catch(e) {//FAIL
 53 | 				//_CSS_supports = _CSS_supports.bind(global);
 54 | 			}
 55 | 		})() ) {
 56 | 			// EXIT
 57 | 			return;// Do not need anything to do. Exit from polyfill
 58 | 		}
 59 | 	}
 60 | 	else {
 61 | 		// ---=== NO CSS.supports support ===---
 62 | 
 63 | 		msie = "runtimeStyle" in document.documentElement;
 64 | 		testElement = global["document"].createElement("_");
 65 | 		prevResultsCache = {};
 66 | 
 67 | 		_CSS_supports = function(ToCamel_replacer, testStyle, testElement, propertyName, propertyValue) {
 68 | 			var name_and_value = propertyName + "\\/" + propertyValue;
 69 | 			if( name_and_value in prevResultsCache ) {
 70 | 				return prevResultsCache[name_and_value];
 71 | 			}
 72 | 
 73 | 			/* TODO:: for IE < 9:
 74 | 			 _ = document.documentElement.appendChild(document.createElement("_"))
 75 | 			 _.currentStyle[propertyName] == propertyValue
 76 | 			*/
 77 | 			var __bind__RE_FIRST_LETTER = this
 78 | 				, propertyName_CC = (propertyName + "").replace(__bind__RE_FIRST_LETTER, ToCamel_replacer)
 79 | 			;
 80 | 
 81 | 			var result = propertyName && propertyValue && (propertyName_CC in testStyle);
 82 | 
 83 | 			if( result ) {
 84 | 				/*if( msie ) {
 85 | 
 86 | 					try {
 87 | 						testElement.style[propertyName] = propertyValue;// IE throw here, if unsupported this syntax
 88 | 						testElement.style.cssText = "";
 89 | 					}
 90 | 					catch(e) {
 91 | 						result = false;
 92 | 					}
 93 | 
 94 | 					if( result ) {
 95 | 						testElement.id = uuid;
 96 | 						_document.body.appendChild(testElement);
 97 | 
 98 | 						if( (prevPropValue = testElement.currentStyle[propertyName]) != propertyValue ) {
 99 | 							_document.body.insertAdjacentHTML("beforeend", "<br style='display:none' id='" + uuid + "br'><style id='" + uuid + "style'>" +
100 | 								"#" + uuid + "{display:none;height:0;width:0;visibility:hidden;position:absolute;position:fixed;" + propertyName + ":" + propertyValue + "}" +
101 | 								"</style>");
102 | 
103 | 							if( !(propertyName in testElement.currentStyle) ) {
104 | 								partOfCompoundPropName
105 | 							}
106 | 
107 | 							if( /\(|\s/.test(propertyValue) ) {
108 | 								currentPropValue = testElement.currentStyle[propertyName];
109 | 								result = !!currentPropValue && currentPropValue != prevPropValue;
110 | 							}
111 | 							else {
112 | 								result = testElement.currentStyle[propertyName] == propertyValue;
113 | 							}
114 | 							//_document.documentElement.removeChild(document.getElementById(uuid + "br"));
115 | 							//_document.documentElement.removeChild(document.getElementById(uuid + "style"));
116 | 						}
117 | 
118 | 						//_document.documentElement.removeChild(testElement);
119 | 					}*/
120 | 
121 | 				if( msie ) {
122 | 					if( /\(|\s/.test(propertyValue) ) {
123 | 						try {
124 | 							testStyle[propertyName_CC] = propertyValue;
125 | 							result = !!testStyle[propertyName_CC];
126 | 						}
127 | 						catch(e) {
128 | 							result = false;
129 | 						}
130 | 					}
131 | 					else {
132 | 						testStyle.cssText = "display:none;height:0;width:0;visibility:hidden;position:absolute;position:fixed;" + propertyName + ":" + propertyValue;
133 | 						document.documentElement.appendChild(testElement);
134 | 						result = testElement.currentStyle[propertyName_CC] == propertyValue;
135 | 						document.documentElement.removeChild(testElement);
136 | 					}
137 | 				}
138 | 				else {
139 | 					testStyle.cssText = propertyName + ":" + propertyValue;
140 | 					result = testStyle[propertyName_CC];
141 | 					result = result == propertyValue || result && testStyle.length > 0;
142 | 				}
143 | 			}
144 | 
145 | 			testStyle.cssText = "";
146 | 
147 | 			return prevResultsCache[name_and_value] = result;
148 | 		}.bind(
149 | 			/(-)([a-z])/g // __bind__RE_FIRST_LETTER
150 | 			, function(a, b, c) { // ToCamel_replacer
151 | 				return c.toUpperCase()
152 | 			}
153 | 			, testElement.style // testStyle
154 | 			, msie ? testElement : null // testElement
155 | 		);
156 | 	}
157 | 
158 | 	// _supportsCondition("(a:b) or (display:block) or (display:none) and (display:block1)")
159 | 	function _supportsCondition(str) {
160 | 		if(!str) {
161 | 			_supportsCondition.throwSyntaxError();
162 | 		}
163 | 
164 | 		/** @enum {number} @const */
165 | 		var RMAP = {
166 | 			NOT: 1
167 | 			, AND: 2
168 | 			, OR: 4
169 | 			, PROPERTY: 8
170 | 			, VALUE: 16
171 | 			, GROUP_START: 32
172 | 			, GROUP_END: 64
173 | 		};
174 | 
175 | 		var resultsStack = []
176 | 			, chr
177 | 			, result
178 | 			, valid = true
179 | 			, isNot
180 | 			, start
181 | 			, currentPropertyName
182 | 			, expectedPropertyValue
183 | 			, passThisGroup
184 | 			, nextRuleCanBe = 
185 | 				RMAP.NOT | RMAP.GROUP_START | RMAP.PROPERTY
186 | 			, currentRule
187 | 			, i = -1
188 | 			, newI
189 | 			, len = str.length
190 | 		;
191 | 
192 | 		resultsStack.push(void 0);
193 | 
194 | 		function _getResult() {
195 | 			var l = resultsStack.length - 1;
196 | 			if( l < 0 )valid = false;
197 | 			return resultsStack[ l ];
198 | 		}
199 | 
200 | 		/**
201 | 		 * @param {string=} val
202 | 		 * @private
203 | 		 */
204 | 		function _setResult(val) {
205 | 			var l = resultsStack.length - 1;
206 | 			if( l < 0 )valid = false;
207 | 			result = resultsStack[ l ] = val;
208 | 		}
209 | 
210 | 		/**
211 | 		 * @param {string?} that
212 | 		 * @param {string?} notThat
213 | 		 * @param {number=} __i
214 | 		 * @param {boolean=} cssValue
215 | 		 * @return {(number|undefined)}
216 | 		 * @private
217 | 		 */
218 | 		function _checkNext(that, notThat, __i, cssValue) {
219 | 			newI = __i || i;
220 | 
221 | 			var chr
222 | 				, isQuited
223 | 				, isUrl
224 | 				, special
225 | 			;
226 | 
227 | 			if(cssValue) {
228 | 				newI--;
229 | 			}
230 | 
231 | 			do {
232 | 				chr = str.charAt(++newI);
233 | 
234 | 				if(cssValue) {
235 | 					special = chr && (isQuited || isUrl);
236 | 					if(chr == "'" || chr == "\"") {
237 | 						special = (isQuited = !isQuited);
238 | 					}
239 | 					else if(!isQuited) {
240 | 						if(!isUrl && chr == "(") {
241 | 							// TODO:: in Chrome: $0.style.background = "url('http://asd))')"; $0.style.background == "url(http://asd%29%29/)"
242 | 							isUrl = true;
243 | 							special = true;
244 | 						}
245 | 						else if(isUrl && chr == ")") {
246 | 							isUrl = false;
247 | 							special = true;
248 | 						}
249 | 					}
250 | 				}
251 | 			}
252 | 			while(special || (chr && (!that || chr != that) && (!notThat || chr == notThat)));
253 | 
254 | 			if(that == null || chr == that) {
255 | 				return newI;
256 | 			}
257 | 		}
258 | 
259 | 		while(++i < len) {
260 | 			if(currentRule == RMAP.NOT) {
261 | 				nextRuleCanBe = RMAP.GROUP_START | RMAP.PROPERTY;
262 | 			}
263 | 			else if(currentRule == RMAP.AND || currentRule == RMAP.OR || currentRule == RMAP.GROUP_START) {
264 | 				nextRuleCanBe = RMAP.GROUP_START | RMAP.PROPERTY | RMAP.NOT;
265 | 			}
266 | 			else if(currentRule == RMAP.GROUP_END) {
267 | 				nextRuleCanBe = RMAP.GROUP_START | RMAP.NOT | RMAP.OR | RMAP.AND;
268 | 			}
269 | 			else if(currentRule == RMAP.VALUE) {
270 | 				nextRuleCanBe = RMAP.GROUP_END | RMAP.GROUP_START | RMAP.NOT | RMAP.OR | RMAP.AND;
271 | 			}
272 | 			else if(currentRule == RMAP.PROPERTY) {
273 | 				nextRuleCanBe = RMAP.VALUE;
274 | 			}
275 | 
276 | 			chr = str.charAt(i);
277 | 
278 | 			if(nextRuleCanBe & RMAP.NOT && chr == "n" && str.substr(i, 3) == "not") {
279 | 				currentRule = RMAP.NOT;
280 | 				i += 2;
281 | 			}
282 | 			else if(nextRuleCanBe & RMAP.AND && chr == "a" && str.substr(i, 3) == "and") {
283 | 				currentRule = RMAP.AND;
284 | 				i += 2;
285 | 			}
286 | 			else if(nextRuleCanBe & RMAP.OR && chr == "o" && str.substr(i, 2) == "or") {
287 | 				currentRule = RMAP.OR;
288 | 				i++;
289 | 			}
290 | 			else if(nextRuleCanBe & RMAP.GROUP_START && chr == "(" && _checkNext("(", " ")) {
291 | 				currentRule = RMAP.GROUP_START;
292 | 				i = newI - 1;
293 | 			}
294 | 			else if(nextRuleCanBe & RMAP.GROUP_END && chr == ")" && resultsStack.length > 1) {
295 | 				currentRule = RMAP.GROUP_END;
296 | 			}
297 | 			else if(nextRuleCanBe & RMAP.PROPERTY && chr == "(" && (start = _checkNext(null, " ")) && _checkNext(":", null, start)) {
298 | 				currentRule = RMAP.PROPERTY;
299 | 				i = newI - 1;
300 | 				currentPropertyName = str.substr(start, i - start + 1).trim();
301 | 				start = 0;
302 | 				expectedPropertyValue = null;
303 | 				continue;
304 | 			}
305 | 			else if(nextRuleCanBe & RMAP.VALUE && (start = _checkNext(null, " ")) && _checkNext(")", null, start, true)) {
306 | 				currentRule = RMAP.VALUE;
307 | 				i = newI;
308 | 				expectedPropertyValue = str.substr(start, i - start).trim();
309 | 				start = 0;
310 | 				chr = " ";
311 | 			}
312 | 			else if(chr == " ") {
313 | 				continue;
314 | 			}
315 | 			else {
316 | 				currentRule = 0;
317 | 			}
318 | 
319 | 			if(!valid || !chr || !(currentRule & nextRuleCanBe)) {
320 | 				_supportsCondition.throwSyntaxError();
321 | 			}
322 | 			valid = true;
323 | 
324 | 			if(currentRule == RMAP.OR) {
325 | 				if(result === false) {
326 | 					_setResult();
327 | 					passThisGroup = false;
328 | 				}
329 | 				else if(result === true) {
330 | 					passThisGroup = true;
331 | 				}
332 | 
333 | 				continue;
334 | 			}
335 | 
336 | 			if( passThisGroup ) {
337 | 				continue;
338 | 			}
339 | 
340 | 			result = _getResult();
341 | 
342 | 			if(currentRule == RMAP.NOT) {
343 | 				isNot = true;
344 | 
345 | 				continue;
346 | 			}
347 | 
348 | 			if(currentRule == RMAP.AND) {
349 | 				if(result === false) {
350 | 					passThisGroup = true;
351 | 				}
352 | 				else {
353 | 					_setResult();
354 | 				}
355 | 
356 | 				continue;
357 | 			}
358 | 
359 | 			if(result === false && !(currentRule & (RMAP.GROUP_END | RMAP.GROUP_START))) {
360 | 				_setResult(result);
361 | 				continue;
362 | 			}
363 | 
364 | 			if( currentRule == RMAP.GROUP_START ) { // Group start
365 | 				resultsStack.push(void 0);
366 | 			}
367 | 			else if( currentRule == RMAP.GROUP_END ) { // Group end
368 | 				passThisGroup = false;
369 | 
370 | 				resultsStack.pop();
371 | 				if( _getResult() !== void 0) {
372 | 					result = !!(result & _getResult());
373 | 				}
374 | 
375 | 				isNot = false;
376 | 			}
377 | 			else if( currentRule == RMAP.VALUE ) { // Property value
378 | 				_setResult(_CSS_supports(currentPropertyName, expectedPropertyValue));
379 | 				if(isNot)result = !result;
380 | 
381 | 				isNot = false;
382 | 				expectedPropertyValue = currentPropertyName = null;
383 | 			}
384 | 
385 | 			_setResult(result);
386 | 		}
387 | 
388 | 		if(!valid || result === void 0 || resultsStack.length > 1) {
389 | 			_supportsCondition.throwSyntaxError();
390 | 		}
391 | 
392 | 		return result;
393 | 	}
394 | 	_supportsCondition.throwSyntaxError = function() {
395 | 		throw new Error("SYNTAX_ERR");
396 | 	};
397 | 
398 | 	/**
399 | 	 * @expose
400 | 	 */
401 | 	_CSS.supports = function(a, b) {
402 | 		if(!arguments.length) {
403 | 			throw new Error("WRONG_ARGUMENTS_ERR");//TODO:: DOMException ?
404 | 		}
405 | 
406 | 		if(arguments.length == 1) {
407 | 			return _supportsCondition(a);
408 | 		}
409 | 
410 | 		return _CSS_supports(a, b);
411 | 	};
412 | 
413 | 	global = testElement = null;// no need this any more
414 | })();
415 | 


--------------------------------------------------------------------------------