directives-bubling.css

.parent {
  color: green;
}
@document url-prefix() {
  .parent .child {
    color: red;
  }
}
@supports (sandwitch: butter) {
  .inside .top {
    property: value;
  }
}
@supports (sandwitch: bread) {
  .in1 .in2 {
    property: value;
  }
}
@supports (sandwitch: ham) {
  .inside .top {
    property: value;
  }
}
@supports (font-family: weirdFont) {
  @font-face {
    font-family: something;
    src: made-up-url;
  }
}
@font-face {
  @supports not (-webkit-font-smoothing: subpixel-antialiased) {
    font-family: something;
    src: made-up-url;
  }
}
@supports (property: value) {
  @media (max-size: 2px) {
    @supports (whatever: something) {
      .outOfMedia  {
        property: value;
      }
    }
  }
}
@supports (property: value) {
  @media (max-size: 2px) {
    @supports (whatever: something) {
      .onTop  {
        property: value;
      }
    }
  }
}
@media print {
  html {
    in-html: visible;
  }
  @supports (upper: test) {
    html {
      in-supports: first;
    }
    html div {
      in-div: visible;
    }
    @supports not (-webkit-font-smoothing: subpixel-antialiased) {
      html div {
        in-supports: second;
      }
      @media screen {
        html div {
          font-weight: 400;
        }
        html div nested {
          property: value;
        }
      }
    }
  }
}
@media print and (max-size: 2px) {
  .in1 {
    stay: here;
  }
  @supports not (-webkit-font-smoothing: subpixel-antialiased) {
    @supports (whatever: something) {
      .in2 .in1 {
        property: value;
      }
    }
  }
}
html {
  font-weight: 300;
  -webkit-font-smoothing: subpixel-antialiased;
}
@supports not (-webkit-font-smoothing: subpixel-antialiased) {
  html {
    font-weight: 400;
  }
  html nested {
    property: value;
  }
}
.onTop {
  animation: "textscale";
  font-family: something;
}
@font-face {
  font-family: something;
  src: made-up-url;
}
@keyframes "textscale" {
  0% {
    font-size: 1em;
  }
  100% {
    font-size: 2em;
  }
}