jsとsassを使って、ブラウザ判定する

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

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

実行環境

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

処理の流れ

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

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

ソースファイル

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

.public/js/my_browser_selector.js

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

./public/index.html

ブラウザ判別処理

./resources/assets/mixins/_browser.scss

mixin の読込

スタイルを指定

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

実行確認

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

SNSでもご購読できます。

コメントを残す

*