Targeting Specific Browsers & Devices

As a front end developer, there are times when you might face a bug or issue which is specific to one browser or another. In this case, it is helpful to be able to apply specific styling rules which will affect only the intended browser. In most cases, the preferred way is to build code which is browser-agnostic, in some cases there is specific bugs or issues affecting one browser or the other. When that happens, these codes can be of some help:

1. Firefox, All OS

Firefox keeps it easy. 😎

/* Firefox Only */
@supports (-moz-appearance:none) { ... }

2. Microsoft Edge

Unfortunately there is no css-only way to isolate css styling to target only the Edge browser. But distinguishing the Edge browser just takes a bit of javascript to accomplish. By searching the user-agent of the browser we can identify it with minimal code. For Edge, the user-agent always contains “Edge”,

// Add a class to <html> if the user agent indicates Microsoft Edge
if (navigator.userAgent.indexOf("Edg") !== -1) {
  document.documentElement.classList.add("edge");
}

/* Microsoft Edge */
.edge { ... }

3. Chrome & Safari, All OS

/* Chrome & Safari, All OS */
@supports (contain: paint) and ( not (-moz-appearance:none))
{ ... }

4. Chrome iOS & Apple Safari, All Devices

Apple added a non-standard -webkit- function after the Chrome fork, so why not use it to detect Safari in CSS. Is this … web development? 😁https://t.co/vdygFwhnQc pic.twitter.com/cJPWsTsDRK
— Šime “I’m on Mastodon” Vidas (@simevidas) May 14, 2020

Shout out to @simevidas for this gem 💎.

JSBin: https://output.jsbin.com/yoqecol/

/* Chrome & Apple Safari, iOS Devices*/
@supports (background: -webkit-named-image(i)) { ... }

5. Chrome, All Devices, except iOS

/* Chrome */
@supports (contain: paint) and ( not (-moz-appearance:none)) and ( not (background: -webkit-named-image(i))) { ... }

6. Further distinguishing Safari vs Chrome on iOS devices, using javascript

To distinguish between Safari and Chrome browsers on iOS devices, takes a bit of javascript to accomplish. By searching the user-agent of the browser we can identify Safari vs Chrome and Desktop vs Mobile. For Safari, the user-agent always contains “Version”, while Chrome contains “CriOS”. For Mobile browsers, the user-agent always contains “Mobile”. Using this, we can narrow down our exact browser and device.

      if (navigator.userAgent.indexOf('Mobile') !== -1) {
        document.documentElement.classList.add("mobile");
      }

// Add a class to <html> if the browser is Chrome
if (navigator.userAgent.indexOf("Edg") == -1) {
  if (navigator.userAgent.indexOf("Samsung") == -1) {
    if ((navigator.userAgent.indexOf('Version') == -1) || (navigator.userAgent.indexOf('CriOS') !== -1))  {
      document.documentElement.classList.add("chrome");
      if (navigator.userAgent.indexOf('Mobile') !== -1) {
        document.documentElement.classList.add("mobile");
      }
    }
  }
}

    // Add a class to <html> if the browser is Safari
    if (navigator.userAgent.indexOf('Version') !== -1) {
      document.documentElement.classList.add("safari");
	if (navigator.userAgent.indexOf('Mobile') !== -1) {
	  document.documentElement.classList.add("mobile");
        }
    }

/* Chrome iOS, Safari iOS & OS X */
@supports (background: -webkit-named-image(i)) { 
  * { ... } /* Chrome iOS, Safari iOS & OS X */
  .safari { ... } /* Safari iOS & OS X */
  .chrome { ... } /* Chrome iOS */
  .mobile { ... } /* Chrome iOS & Safari iOS */
  .safari.mobile { ... } /* Safari iOS */
}

7. Target specific iOS device

Locate your specific device settings using sites like, https://yesviz.com/viewport/
or use javascript to retrieve values for width and device pixel ratio:

window.devicePixelRatio
screen.width or window.innerWidth

/* iPhone 14 Pro specific targeting, Chrome & Safari */
@supports (background: -webkit-named-image(i)) {
  @media only screen
    and (width: 393px)
    and (-webkit-device-pixel-ratio: 3) { ... }
}

8. Target range of iOS devices

/* Apple iPad 10.2", Apple iPad Air, Apple iPad Air (2020), Apple iPad Mini, Apple iPad Pro 11", Apple iPad Pro 12.9" specific targeting, Chrome & Safari */
@supports (background: -webkit-named-image(i)) {
  @media (resolution: 132dpi),
    (resolution: 162dpi)
    and (-webkit-device-pixel-ratio: 2) { ... }
}

/* iPhone 5,6,7,8,SE,X,XR,XS,11,12,13,14 Series specific targeting, Chrome & Safari */
@supports (background: -webkit-named-image(i)) {
  @media (resolution: 134dpi),
    (resolution: 153dpi),
    (resolution: 159dpi),
    (resolution: 163dpi)
    and (-webkit-device-pixel-ratio: 2)
    or (-webkit-device-pixel-ratio: 3) { ... }
}

9. Target Samsung Internet for Android

// Add a class to <html> if the browser is Samsung Internet
if (navigator.userAgent.indexOf('Samsung') !== -1) {
document.documentElement.classList.add("samsung");
}

10. Target specific Android device

/* Samsung A03s, Chrome & Samsung Internet  */
@supports (contain: paint) and ( not (-moz-appearance:none)) and ( not (background: -webkit-named-image(i))) {
  @media only screen
    and (width: 384px)
    and (-webkit-device-pixel-ratio: 1.875) { 
        h1::after {
        content: "Chrome Android on A03s";
        color: #00f;
      }
          .samsung h1::after {
    content: "Samsung Internet on A03s";
    color: #00f;
  }
 }
  }

11. Targeting Opera Browser

// Add a class to <html> if the user agent indicates Opera
if (navigator.userAgent.indexOf("OPR") !== -1) {
  document.documentElement.classList.add("opera");
}

/* Opera Browser */
.opera { ... }

12. Internet Explorer (if you must)

/* IE 9+ */
@media screen and (min-width:0\0) and (min-resolution: +72dpi) { ... }

/* IE 10+ */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { ... }

/* IE 11 */
_:-ms-fullscreen, :root .selector { ... }

13. Links to target older browser versions, more info:

Test Browsers used for this post:

Firefox 116.0.3 (64-bit) — Win 11
Microsoft Edge Version 116.0.1938.54 (Official build) (64-bit) — Win 11
Google Chrome Version 116.0.5845.98 (Official Build) (64-bit) — Win 11
Google Chrome Version 116.0.5845.110 (Official Build) (arm64) — OS X
Apple Safari Version 16.3 (17614.4.6.11.6, 17614) — OS X
Firefox Browser 116.0.3 (64-bit) — OS X
Google Chrome Version 116.0.5845.103 (Official Build) — iOS
Apple Safari 16.6 iOS
Samsung Internet 22.0.1.1 Android
Google Chrome Version 114.0.5735.196 Android