Image rendering jQuery CSS hook

jquery.img-rend.js

/**
 * Image rendering jQuery CSS hook
 * Usage:
 * 	element.css("image-rendering", "crisp-edges");
 * 	element.css("image-rendering", "auto");
 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
 */
(function($) {
	if ( !$.cssHooks ) {
		throw("jQuery 1.4.3+ is needed for this plugin to work");
		return;
	}

	function getSupportedCSS(props, values){
		var prop, cssProp, i, length,
			div = document.createElement('div');
		for (i = 0, length = props.length; i < length; i++ ) {
			prop = props[i];
			// see http://modernizr.com/docs/#prefixedcss
			cssProp = prop.replace(/([A-Z])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-');
			div.style.cssText = cssProp + ": " + values[i] + ";";
			if ( div.style[prop] ) {
				return {
					prop: prop,
					value: values[i]
				};
			}
		}

		return null;
	}

	var supportedCSS, propName, autoValueName, crispEdgesValueName, pixelatedValueName;

	// Test support of `image-rendering: crisp-edges`
	supportedCSS = getSupportedCSS(
		"imageRendering imageRendering imageRendering msInterpolationMode imageRendering".split(" "),
		"-webkit-optimize-contrast -moz-crisp-edges -o-crisp-edges nearest-neighbor crisp-edges".split(" ")
	);
	propName = $.support.imageRendering = supportedCSS ? supportedCSS.prop : null;
	crispEdgesValueName = supportedCSS ? supportedCSS.value : null;

	// Test support of `image-rendering: auto`
	supportedCSS = getSupportedCSS(
		"imageRendering imageRendering imageRendering msInterpolationMode".split(" "),
		"optimizeQuality optimizeSpeed auto bicubic".split(" ")
	);
	autoValueName = supportedCSS ? supportedCSS.value : null;

	// Test support of `image-rendering: pixelated`
	supportedCSS = getSupportedCSS(
		"imageRendering".split(" "),
		"pixelated".split(" ")
	);
	pixelatedValueName = supportedCSS ? supportedCSS.value : null;

	$.support.imageRenderingValues = {
		auto: autoValueName,
		crispEdges: crispEdgesValueName,
		pixelated: pixelatedValueName
	};

	// Set cssHooks only for browsers that support a vendor-prefixed image-rendering or specific values
	if (propName && propName !== "imageRendering"
		|| autoValueName && autoValueName !== "auto"
		|| crispEdgesValueName && crispEdgesValueName !== "crisp-edges"
		|| pixelatedValueName && pixelatedValueName !== "pixelated") {
		$.cssHooks.imageRendering = {
			get: function( elem, computed, extra ) {
				var value = $.css( elem, propName );
				switch(value){
					case crispEdgesValueName:
						value = "crisp-edges";
						break;
					case pixelatedValueName:
						value = "pixelated";
						break;
					case "inherit":
						// let inherit
						break;
					case autoValueName:
					default:
						value = "auto";
				}
				return value;
			},
			set: function( elem, value ) {
				switch(value){
					case "crisp-edges":
						value = crispEdgesValueName;
						break;
					case "pixelated":
						value = pixelatedValueName;
						break;
					case "inherit":
						// let inherit
						break;
					case "auto":
					default:
						value = autoValueName;
				}
				elem.style[ propName ] = value;
			}
		};
	}
})(jQuery);