feat(feature-detect): detect if backdrop-filter is supported

Currently `backdrop-filter` is only supported by Safari and it allows web developers to implement awesome background blur effects like a native iOS app

Author: manucorporat

src/util/feature-detect.ts

@@ -1,14 +1,14 @@
 
 export class FeatureDetect {
-  private _results: any = {};
+  private _results: {[featureName: string]: boolean} = {};
 
   run(window: Window, document: Document) {
     for (let name in featureDetects) {
       this._results[name] = featureDetects[name](window, document, document.body);
     }
   }
 
-  has(featureName: string) {
+  has(featureName: string): boolean {
     return !!this._results[featureName];
   }
 
@@ -18,10 +18,10 @@ export class FeatureDetect {
 
 }
 
-let featureDetects = {};
+let featureDetects: {[featureName: string]: Function} = {};
 
 
-FeatureDetect.add('hairlines', function(window: Window, document: Document, body: HTMLBodyElement) {
+FeatureDetect.add('hairlines', function(window: Window, document: Document, body: HTMLBodyElement): boolean {
   /**
   * Hairline Shim
   * Add the "hairline" CSS class name to the body tag
@@ -41,3 +41,18 @@ FeatureDetect.add('hairlines', function(window: Window, document: Document, body
   }
   return canDo;
 });
+
+FeatureDetect.add('backdrop-filter', function(window: Window, document: Document, body: HTMLBodyElement): boolean {
+  /**
+  * backdrop-filter Shim
+  * Checks if css backdrop-filter is implemented by the browser.
+  */
+  let styles = <any>body.style;
+  let backdrop = styles['backdrop-filter'] !== undefined ||
+    styles['-webkit-backdrop-filter'] !== undefined;
+  if (backdrop) {
+    body.classList.add('backdrop-filter');
+  }
+  return backdrop;
+});
+