diff --git a/modules/@angular/compiler/src/shadow_css.ts b/modules/@angular/compiler/src/shadow_css.ts
index e8fdcc5ab2..e93a10b05d 100644
--- a/modules/@angular/compiler/src/shadow_css.ts
+++ b/modules/@angular/compiler/src/shadow_css.ts
@@ -332,7 +332,7 @@ export class ShadowCss {
       if (rule.selector[0] != '@' || rule.selector.startsWith('@page')) {
         selector =
             this._scopeSelector(rule.selector, scopeSelector, hostSelector, this.strictStyling);
-      } else if (rule.selector.startsWith('@media')) {
+      } else if (rule.selector.startsWith('@media') || rule.selector.startsWith('@supports')) {
         content = this._scopeSelectors(rule.content, scopeSelector, hostSelector);
       }
       return new CssRule(selector, content);
diff --git a/modules/@angular/compiler/test/shadow_css_spec.ts b/modules/@angular/compiler/test/shadow_css_spec.ts
index d8dd3f95fc..ee07bf40ea 100644
--- a/modules/@angular/compiler/test/shadow_css_spec.ts
+++ b/modules/@angular/compiler/test/shadow_css_spec.ts
@@ -60,6 +60,12 @@ export function main() {
       expect(s(css, 'a')).toEqual(expected);
     });
 
+    it('should handle support rules', () => {
+      var css = '@supports (display: flex) {section {display: flex;}}';
+      var expected = '@supports (display:flex) {section[a] {display:flex;}}';
+      expect(s(css, 'a')).toEqual(expected);
+    });
+
     // Check that the browser supports unprefixed CSS animation
     it('should handle keyframes rules', () => {
       var css = '@keyframes foo {0% {transform:translate(-50%) scaleX(0);}}';