CODEWITHSUNDEEP
csswebkittarget
Nefiji
Nefiji

Reputation: 61

Target WebKit browsers only in CSS? (2019 Edition)

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?

Upvotes: 5

Views: 1405

Answers (2)

dakab
dakab

Reputation: 5875

You can still make use of the @supports at-rule and use its function syntax to check for a common WebKit-only pseudo-element selector:

@supports selector(::-webkit-scrollbar){
    span { color: SandyBrown; }
}
@supports not selector(::-webkit-slider-thumb){
    span { color: DeepSkyBlue; }
}
<span>If this is orange and not blue, you’re probably running WebKit.</span>

Note that this could be considered hacky, since it’s somewhat misemploying the feature’s intent as well as the possibility of non-standard vendor properties being removed in time from supporting user-agents. (They are treated as valid selectors, though not supported and not obviously on a Gecko standards track.)

(But due to a lack of proper rules to target misbehaving user-agents, maybe by the time the hack won’t work anymore, the issue it patched might be harmonized, thus rendering it obsolete.)

Upvotes: 0

Anon
Anon

Reputation: 1387

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 */
}

Upvotes: 1

Related Questions