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);

HTML data-browser attribute 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

SASS .btn-download { display: block; width: 100%; margin: 0 10px; @include browser(Android) { display: none; } } Compiled CSS .btn-download { display: block; width: 100%; margin: 0 10px; } html[data-browser*="Android"] .btn-download { display: none; }

Writing nested styles with SASS

SASS ul { margin: 0; padding: 0; li { a { display: block; @include browser("MSIE 11") { display: inline-block; } } } } Compiled CSS 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

SASS ul { margin: 0; padding: 0; li { a { display: block; @include browser("Android 4.0" "Android 4.1" "Android 4.3") { display: inline-block; } } } } Compiled CSS 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

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

Writing nested styles with LESS

LESS ul { margin: 0; padding: 0; li { a { display: block; .browser("iPad", { display: inline-block; }); } } } Compiled CSS 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

LESS ul { margin: 0; padding: 0; li { a { display: block; .browser("iPad" "iPod" "iPhone", { display: inline-block; }); } } } Compiled CSS 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.