Browser and Device specific CSS Styles with SASS and LESS mixins

Introduction

Most of the time, we have to write extra css styles to achieve cross-browser compatibility. For example, CSS Flexbox property has issues on Internet Explorer version 10 and 11 and we get help from vendor prefixes or overwrite common styles with additional style fixes on target specific devices or browsers. We achieve that with 3rd party Javascript plugins, custom codes which add custom classes to specific elements or calling completely different stylesheets to the document.

Now I am going to share SASS and LESS mixins that help to write stylesheets which target specific browsers, devices or operating systems.

Javascript Code

This single line of Javascript snippet adds navigator.userAgent value to your html tag as an attribute. You can paste it whether inside your body tag or head tag.

document.documentElement.setAttribute("data-browser", navigator.userAgent);

Now I share Windows 10 (x64) Mozilla Firefox browser navigator.userAgent value:

"Mozilla/5.0 (Windows NT 10.0; WOW64; rv:43.0) Gecko/20100101 Firefox/43.0"

SASS ve LESS mixins

This mixins allow you to write less code while writing styles for specific browsers or operating systems. Mixins create a CSS selector for html tag depending on html's data-browser attribute. It tries to match given parameter with navigator.userAgent string. You can target mobile devices with keyword "Mobile", Apple iPhone devices with keyword "iPhone" or webkit based browsers with "Webkit" keyword. I must say that browser mixins are case sensitive.

SASS Mixin

@mixin browser($browsers: Mozilla) {
  @each $browser in $browsers {
    html[data-browser*="#{$browser}"] & {
      @content;
    }
  }
}

LESS Mixin

Sass has for and for each loop natively but Less has not. We include a 3rd party snippet to achieve for & each loop for LESS named less.curious

@import "for-loop.less";


.browser(@browser: Mozilla, @content) {
  .for(@browser);
  .-each(@value) {
    html[data-browser*="@{value}"] & {
      @content();
    }
  }
}

Mixins usage area and samples for common uses

SASS Samples

Targeting Android Devices with SASS

.btn-download {
  display: block;
  width: 100%;
  margin: 0 10px;
  @include browser(Android) {
    display: none;
  }
}
    

.btn-download {
  display: block;
  width: 100%;
  margin: 0 10px;
}
html[data-browser*="Android"] .btn-download {
  display: none;
}
    

Writing nested styles with SASS

ul {
  margin: 0;
  padding: 0;
  li {
    a {
      display: block;
      @include browser("MSIE 11") {
        display: inline-block;
      }
    }
  }
}
    

ul {
  margin: 0;
  padding: 0;
}

ul li a {
  display: block;
}

html[data-browser*="MSIE 11"] ul li a {
  display: inline-block;
}
    

Targeting Andorid devices with specific versions with SASS

ul {
  margin: 0;
  padding: 0;
  li {
    a {
      display: block;
      @include browser("Android 4.0" "Android 4.1" "Android 4.3") {
        display: inline-block;
      }
    }
  }
}
    

ul {
  margin: 0;
  padding: 0;
}
ul li a {
  display: block;
}

html[data-browser*="Android 4.0"] ul li a,
html[data-browser*="Android 4.1"] ul li a,
html[data-browser*="Android 4.3"] ul li a {
  display: inline-block;
}
    

LESS Samples

Hiding button on Mobile devices with LESS

.btn-download {
  display: block;
  width: 100%;
  margin: 0 10px;
  .browser(Mobile, {
    display: none;
  });
}
    

.btn-download {
  display: block;
  width: 100%;
  margin: 0 10px;
}
html[data-browser*="Mobile"] .btn-download {
  display: none;
}
    

Writing nested styles with LESS

ul {
  margin: 0;
  padding: 0;
  li {
    a {
      display: block;
      .browser("iPad", {
        display: inline-block;
      });
    }
  }
}
    

ul {
  margin: 0;
  padding: 0;
}

ul li a {
  display: block;
}

html[data-browser*="iPad"] ul li a {
  display: inline-block;
}
    

Targeting Apple devices such as iPad, iPhone and iPod with LESS

ul {
  margin: 0;
  padding: 0;
  li {
    a {
      display: block;
      .browser("iPad" "iPod" "iPhone", {
        display: inline-block;
      });
    }
  }
}

    

ul {
  margin: 0;
  padding: 0;
}
ul li a {
  display: block;
}
html[data-browser*="iPad"] ul li a,
html[data-browser*="iPod"] ul li a,
html[data-browser*="iPhone"] ul li a {
  display: inline-block;
}
    

You can find a lot of user agentAgent examples categorized by devices and browsers on user-agents.me page.