jsとsassを使って、ブラウザ判定する - ののいちの１.２..３...

ブラウザごとにスタイル指定を行う処理で、以前は、css_browser_selector.js を使っていたのですが、 Edgeの判断が明確にできなかったので、UA判定処理に変更しました。

本当は、ブラウザやバージョンに依存しない作りにした方が良いことはわかっているのですが、 IE対応に手こずったので、UA判定を入れました。。

実行環境

jsとsassを利用する前提です。

処理の流れ

jsでユーザエージェントを取得し、htmlタグのdata-browser属性に値をセットする
cssのユーザエージェントの値に、MSIE or Trident or Edge が含まれていたら、背景を赤色にする

UA判定を行い、IE系の場合は、背景色を変えるサンプルです。

ソースファイル

ユーザエージェントをhtmlタグにセットする処理

.public/js/my_browser_selector.js

// ブラウザが Microsoft Edge かどうか判断するためのJS
document.documentElement.setAttribute("data-browser", navigator.userAgent);

上記のJSファイルを読込む

./public/index.html

<script src="/js/my_browser_selector.js"></script>

ブラウザ判別処理

./resources/assets/mixins/_browser.scss

@mixin browser($browsers: Mozilla) {
  @each $browser in $browsers {
    html[data-browser*="#{$browser}"] & {
      @content;
    }
  }
}

mixin の読込

@import 'mixins/browser';

スタイルを指定

./resources/assets/sass/page/_index.scss

.m-pageIndex {

  .m-pageTable {

    thead {
      overflow-y: hidden;
      @include browser("MSIE" "Trident" "Edge") {
        background-color: red;
      }
    }
  }
}

実行確認

IEブラウザで、indexページにアクセスすると、背景色が変わっていることを確認
Webインスペクタで確認すると、HTMLタグのdata-browser属性に以下のように、ユーザエージェントがセットされていることを確認

<html class=" webkit chrome mac js" data-browser="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36">