HOME > Tips > JavaScript > JavaScriptでbodyタグにユーザー環境をclassとしてを追加

JavaScriptでbodyタグにユーザー環境をclassとしてを追加

条件付コメントをbodyタグに使用してIEのCSSハック」というエントリーで、条件付コメント(Conditional Comment)で、異なったclassを設定したbodyタグを読み込ませるという「Conditional classnames」を紹介しましたが、同じようなことをJavaScriptでやってみました。

ユーザーの環境によって、下記のような内容ををbodyタグのclass属性の中に追加します。

  • OSが「Windows」のときは「win」、「Mac」のときは「mac」、「それ以外」のときは「other」を追加します。
  • ブラウザが「Internet Explorer」のときは「ie」、「Safari」のときは「safari」を追加します。
  • OSが「Windows」でブラウザが「Internet Explorer」のときは、バージョンに応じて「v5_0 / v5_5 / v6_0 / v7_0」を追加します。
  • OSが「Windows」でブラウザが「Internet Explorer」のとき以外は、「notWinIe」を追加します。

後は、追加されたclassを使用して、環境に合わせたCSSを記述します。

詳細

ただし、JavaScriptを無効にされ場合、UA(ユーザーエージェント)を偽装された場合は、正しく「class」を出力できませんので、指定した「class」が無効になってしまいます。

参考程度にご覧ください。(参考にする場合は自己責任で・・・)

UP