.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;
}

}