/home GitHub 12★

Write CSS rules for specific browsers

There are cases where we want styles to target a particular browser. We can use CSS feature queries with a declaration that is only available on the target browser.

For example, Firefox is only browser supporting -moz-appearance: none, the following snippet can be used to target Firefox only:

@support (-moz-appearance: none) {
/* Styles for Firefox only */

The not operator is useful to exclude the target browser:

@support not (-moz-appearance: none) {
/* Styles for browser except Firefox */

There is another, less popular hack for targeting Firefox only:

@-moz-document url-prefix() {
/* Styles for Firefox only */

Target Safari

@supports (background: -webkit-named-image(i)) {
/* Styles for Safari only */

Target Chromium

Since only Chromium based and Firefox browsers support the contain: paint declaration, we can combine and and not operators to exclude Firefox from the target browsers:

@support (contain: paint) and (not (-moz-appearance: none)) {
/* Styles for Chromium only */

Be aware that targeting given browsers with feature queries is still a hack, because the browsers improve their engines continuously, and these properties can be supported or not in the future.

Follow me on and to get more useful contents.