ブラウザで表示が崩れた時の検証に便利！IE6-11, Edge, Chrome, Safari, Firefoxなど各ブラウザのCSSハック -Browser Hack Mixins
Post on:2016年4月6日
sponsors
特定のブラウザで挙動がおかしい、期待通りにならない、そんな時の検証用に役立つ、IE6-11, Edge, Chrome, Safari, Firefoxなど各ブラウザのCSSハックがまとめられたSassのMixinを紹介します。
いざという時に、備えておきたいですね。
Browser Hack Mixinsの使い方
- 「_hacks.scss」をインポート。
コード: @import "hacks"; - Mixinの使い方
基本書式: @include [Mixin_Name]{ selector, property, value }
記述例: @include only_ie9_below { .my_div, background-color, red }
CSSハックの各ブラウザは、下記の通り。
そのブラウザのみ、バージョンのみ、バージョン以下・以下などが揃っています。
- Internet Explorer
-
- only_edge
- only_ie6
- only_ie7
- only_ie7_below
- only_ie8
- only_ie8_below
- only_ie9
- only_ie9_below
- only_ie10
- only_ie10_above
- only_ie11
- only_ie11_above
- no_ie6
- only_ie9_saf4_above
- Firefox
-
- 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
- Webkit
-
- only_webkit
- only_chrome
- only_safari
- only_safari9
- only_ios
- only_safari_no_ios
- only_opera9_safari2
- Opera
-
- only_opera
- only_opera11
- その他
-
- no_ie_safari6
sponsors
