ブラウザで表示が崩れた時の検証に便利!IE6-11, Edge, Chrome, Safari, Firefoxなど各ブラウザのCSSハック -Browser Hack Mixins

特定のブラウザで挙動がおかしい、期待通りにならない、そんな時の検証用に役立つ、IE6-11, Edge, Chrome, Safari, Firefoxなど各ブラウザのCSSハックがまとめられたSassのMixinを紹介します。

いざという時に、備えておきたいですね。

サイトのキャプチャ

Browser Hack Mixins for Sass

Browser Hack Mixinsの使い方

  1. 「_hacks.scss」をインポート。
    コード: @import "hacks";
  2. 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

top of page

©2024 coliss