webmanab.html

「CSS Browser Selector」ブラウザやOSに応じてクラスを付与してCSSハックできるようにするスクリプト -『Plug-in』

table of contents
ー

    「このブラウザだけにCSSを適応させたい」とか、「このOSを判別してCSS当てたい」とか、ブラウザやOS毎にCSSハックできるスクリプトが「CSS Browser Selector」です。

    「CSS Browser Selector」ブラウザやOSに応じてクラスを付与してCSSハックできるようにするスクリプト

    スクリプトのダウンロードは以下のサイト内からか、bowerなどでいきましょう。

    terminal

    bower install css_browser_selector

    このスクリプトを読み込むと<html>要素にユーザーの環境を表してくれるクラスが付与されるので、そのクラスを使ってスタイルを指定することで、CSSハックします。

    SCSSにこんな感じで記述します。

    scss


    .ie {
  // all IE
  .title {
    font-size: 10px;
  }
}

.title {
  // c
  .ie & {
    font-size: 20px;
  }
}

    スコープを与えて目標のCSSハックしたいセレクタにスタイルを適応させるので、ハック内容が多い場合は別ファイルにしてもいいと思いますし(上部の書き方のネスト)、単純な少しのスタイルの場合は、基本スタイルの中に混ぜるようにして(下部の書き方のネスト)記述していくことになるかと思います。

    本当に様々なクラスを吐き出してくれるので、いろんなCSSハックが可能です。デバイスも携帯端末名のクラスとか、解像度、画面サイズ、レガシーブラウザなどなどあるので、よく使いそうなものを列挙しておきます。

    デバイスやOS別に使い分けるクラス

    scss


    .win {
    // all Windows
}

.vista {
    // Windows Vista
}

.linux {
    // linux
}

.mac {
    // MacOS
}

.ipod {
    // iPod Touch
}

.iphone {
    // iphone
}

.ipad {
    // ipad
}

.webtv {
    // WebTV
}

.blackberry {
    // blackberry
}

.android {
    // Android
}

.mobile {
    // all mobile
}

    ブラウザ別に使い分けるクラス

    scss


    .ie {
  // all IE
}

.ie8 {
  // IE8
}

.ie7 {
  // IE7
}

.ie6 {
  // IE6
}

.gecko {
  // all Firefox
}

.opera {
  // all Opera
}

.webkit {
  // Safari, Google Chrome
}

.safari {
  // Safari
}

.chrome {
  // Google Chrome
}

.ios {
  // all ios
}

.ios9 {
  // ios9
}

    ディスプレイを判別するクラス


    .retina {
  // retina display
}

.maxw_768 {
  // window size 768px 
}

    おわります。

    「CSS Browser Selector」ブラウザやOSに応じてクラスを付与してCSSハックできるようにするスクリプト -『Plug-in』のアイキャッチ画像

    share
    ー

    tag
    ー

    related
    ー