Browser hack sass mixin - Apply your SCSS to a specific browser - CSS hacks for: IE, Chrome, Firefox, Edge, Opera
Clone or download
Latest commit 426ba43 Jan 19, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE Fixes #7 Jan 19, 2018
README.md Fix broken Markdown headings Apr 16, 2017
_hacks.scss Fixes #8 Jan 19, 2018

README.md

Browser Hack Mixins for Sass

Apply your CSS to a specific browser

Browser Hack Mixins for Sass

Requirements

  • Sass 3.3+

How To Use

  1. Import _hacks.scss file to your SCSS code : @import "hacks";
  2. Use the mixin you want:
  • @include [Mixin_Name]( 'selector', (property: value) )
  • For example:
@include only_ie9( '.my_element', (color: red))

Or:

@include only_ff28_above( '.my_element', (
  background-color: green,
  display: flex,
  margin: 2em,
))

List of Mixins

  1. Firefox CSS Hacks
  • only_ff
  • only_ff2
  • only_ff2_above
  • only_ff3_above
  • only_ff6_above
  • only_ff16_above
  • only_ff21_above
  • only_ff24_above
  • only_ff25_above
  • only_ff26_above
  • only_ff27_above
  • only_ff28_above
  • only_ff30_above
  1. Webkit CSS Hacks
  • only_webkit
  • only_chrome
  • only_safari
  • only_safari9
  • only_ios
  • only_safari_no_ios
  • only_opera9_safari2
  1. Opera CSS Hacks
  • only_opera
  • only_opera11
  1. Internet Explorer CSS Hacks
  • only_edge
  • only_ie6
  • only_ie7
  • only_ie7_below
  • only_ie8
  • only_ie8_below
  • only_ie9
  • only_ie9_below
  • only_ie10_above
  • only_ie11
  • only_ie11_above
  • no_ie6
  • only_ie9_saf4_above
  1. Other CSS Hacks
  • no_ie_safari6

Tips

  • Use firefox mixins before IE mixins. Sometimes Firefox wants to precess the IE css but it can't and skips it's own CSS!

What's New

  • Added Microsoft Edge mixin
  • More styles on each mixin
  • Fixed 'only_safari' mixin
  • Fixed firefox mixins

Thanks to

Share this!

[share](https://twitter.com/intent/tweet?text=Browser-Hack Mixins for Sass%20-%20https://github.com/saadeghi/browser-hack-sass-mixins/)