Browser Targeting
beta

Please keep in mind using a hack is not always the perfect solution.

It can be useful to fix some weird browser specific bug, but in most cases you should fix your CSS/JS or use feature detection.

For a comprehensive guide on browser hacks see the browserhacks web site.

This mixin targets Internet Explorer 11 and up, including all versions of Edge.

The mixin can be used with class, id, element, and attribute selector.

The single quote '' must be used in the parameter.

Note: the mixin must be a root selector, and cannot be the child of any other selector.

@include ie-11('') {};

example 01 classname:
@include ie-11('.foo') {padding-top:10px;};

output:
_:-ms-fullscreen,:root .foo {padding-top:10px;}

example 02 id:
@include ie-11('#foo') {padding-top:10px;};

output:
_:-ms-fullscreen,:root #foo {padding-top:10px;}

example 03 element:
@include ie-11('element') {padding-top:10px;};

output:
_:-ms-fullscreen,:root element {padding-top:10px;}

example 04 attribute selector:
@include ie-11('a[target="_blank"]') {padding-top:10px;};

output:
_:-ms-fullscreen,:root a[target="_blank"] {padding-top:10px;}

This mixin targets all versions of Microsoft Edge (currently up to 16).

Note: the mixin must be a root selector, and cannot be the child of any other selector.

@include ie-edge() {};

example:
@include ie-edge() { h3 { padding-top:10px; } }

output:
@supports(-ms-ime-align:auto) { h3 { padding-top:10px; } }

This mixin targets Firefox.

Note: the mixin must be a root selector, and cannot be the child of any other selector.

@include firefox() {};

example:
@include firefox() { h3 { padding-top:10px; } }

output:
h3 {padding-top: 10px;}

This mixin targets webkit on iOS devices only.

Note: the mixin must be a root selector, and cannot be the child of any other selector.

@include ios-webkit() {};

example:
@include ios-webkit() { h3 { padding-top:10px; } }