「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

    related