Target WebKit browsers only in CSS? (2019 Edition)

Question

Have been using the neat little

@media screen and (-webkit-min-device-pixel-ratio:0) {}

selector until now, and it worked flawlessly. But since a few months, FireFox is also able to process this code, as well as Microsoft Edge apparently.

So yeah, are there any working alternatives left for a CSS-only approach?

Answer 1

To target Firefox Quantum use:

@-moz-document url-prefix() {
  @supports (animation: calc(0s)) {
      /* Firefox Quantum specific styles */
  }
}

for Edge, use:

@supports (-ms-ime-align: auto) {
  /* Edge specific styles */
}