神刀安全网

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);
Browser and Device specific CSS Styles with SASS and LESS mixins
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
@mixin browser($browsers: Mozilla) {   @each $browser in $browsers {     html[data-browser*="#{$browser}"] & {       @content;     }   } }

0

Writing nested styles with LESS

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

1

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

2

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

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

3

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

4

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

原文  http://aslanbakan.com/en/blog/browser-and-device-specific-css-styles-with-sass-and-less-mixins/

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Browser and Device specific CSS Styles with SASS and LESS mixins

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮