blur

##Cross-browser blur-effect (Chrome, Firefox, Safari, IE10+)

In this post I will show a technique that we use to make cross-browser blur-effect. You can use this solution with any framework as it's completely library-independent and it actually uses 1 line of JS code. 
With the latest versions of top notch browsers like Google Chrome, Firefox and Safari, you can always achieve blur-effect using CSS3 "filter"-property: 

	.cover-image {
		filter: blur(12px);
	}
	
###IE10+
For previous versions of IE we were able to use DX Filters (alternative to CSS3 filter-property), but starting from IE10 Microsoft removed their support and didn't present anything instead. That's why for now the only way to make blur-effect in IE10+ is to use SVG. Here is an example of how it could look like:
	
	<svg width="300" height="180">
		<defs>
		    <filter id="blur">
		        <feGaussianBlur stdDeviation="12"></feColorMatrix>
			</filter>
		</defs>
		<image xlink:href="{url}" width="300" height="180" filter="url(#blur)"></image>
	</svg>

###Making a demo
The idea here is to render markup for both solutions: CSS3 and SVG, but show only one that actually works in user's browser. In order to reduce complexity I've used browser-detection in CSS, which is possible because with JS we can store browser's userAgent as an attribute of html tag and in CSS we can actually use stored information to perform a detection.

JS:
		
	document.documentElement.setAttribute("data-agent", navigator.userAgent)

CSS:

	/* IE10+ detection */
	html[data-agent*="Trident"] .blur-wrapper .blur {
		display: none; 
	}
	/* IE10+ detection */
	html[data-agent*="Trident"] .blur-wrapper .blur-ie {
		display: block; 
	}

Check out our example here: https://jsbin.com/vujiximode/edit?html,css,js,output