Help us understand the problem. What is going on with this article?

CSSハックなんて使いたくない!ブラウザ別・OS別にスタイルを書ける『is.js』が便利だった

More than 1 year has passed since last update.

2018年でもブラウザ対応は苦慮する

受託開発だといろいろなブラウザに対応しなければならず、いつも苦労します。
現在の対応の主流は

  • IE11以上
  • edge
  • chrome最新
  • firefox最新
  • safari最新

このあたりだと思うのですが、
IE11とかクセが強いんですよね。。
游ゴシックのline-heightがずれたり、imgにsvg画像入れたら表示崩れたり。
ブラウザ毎にスタイル当てる解決法って色々あると思うのですが、
CSSハックはなんか嫌だ!ということでこんなライブラリみつけました。

is.jsの導入

スクリーンショット 2018-10-17 12.14.34.png

https://is.js.org/

上記URLからアクセスできます。
データの型をチェックしたりする目的のライブラリらしいですね。

JavaScriptライブラリis.jsを使用しないほうが良い5つの理由
という記事を見つけてしまったのですが、今回はOSやブラウザの判定の為に使用するのでOKということにします。

webpack環境でハマる

特にnpmとか使ってない人は、githubページからjsファイル落としてscriptタグで読み込んで終わり。

<script src="/path/is.min.js"></script>

npm使ってる人は

npm install is_js

これでOKなのですが。。(『is.js』ではなく『is_js』であることに注意!違うものがインストールされます!)
僕はwebpackでjsトランスパイルする環境なのですが、
さあやってみようとなったらコンソールエラーが!!

スクリーンショット 2018-10-17 12.25.11.png

えええー なんでだー
読み込めてないぞ。。
そしたらこのページ見つけて解決。

using is_is since issue with webpack is fixed

import is from 'is_js';

これでうまくいきました!

bodyタグにブラウザ名を付与!

こんなコード書いてみました。
bodyタグに、閲覧環境のOS・ブラウザ名を加筆します。

$(function() {
    $('body').addClass(function() {
        var bodyClasses = '';

        if (is.ios()) {
            bodyClasses += ' ios';

            if (is.iphone()) {
                bodyClasses += ' iphone';
            } else if (is.ipad()) {
                bodyClasses += ' ipad';
            }
        } else if (is.android()) {
            bodyClasses += ' android';

            if (is.androidPhone()) {
                bodyClasses += ' androidphone';
            } else if (is.androidTablet()) {
                bodyClasses += ' androidtablet';
            }
        } else if (is.windows()) {
            bodyClasses += ' windows';
        } else if (is.mac()) {
            bodyClasses += ' mac';
        }

        if (is.ie()) {
            bodyClasses += ' ie';
        } else if (is.edge()) {
            bodyClasses += ' edge';
        } else if (is.chrome()) {
            bodyClasses += ' chrome';
        } else if (is.firefox()) {
            bodyClasses += ' firefox';
        } else if (is.safari()) {
            bodyClasses += ' safari';
        }

        return bodyClasses;
    });
});

よーし!これでbodyタグをみると。。

スクリーンショット 2018-10-17 12.39.21.png

ついてる!筆者環境はmacでchromeなので、このようなクラス名が付いてます!
IEなら、『windows ie』となっているはず!
準備完了!

使い方ですが、
例えば、edgeだけにスタイルをあてたい場合、
以下のようにしてスタイルをあてればよい。

.edge .hoge {
    padding: 30px;
}

まとめ

CSSハックの場合、cssが荒れて嫌だったので、このような形にしました。
みなさまはどのようにしているのかも興味があるので、ご教示いただけますと幸いです!
それでは。

yukiTTT
Frontend Developer 文系の営業出身ですが、がんばってます
plus-d
プラスディーは「Growth the Client Business with CREATIVE.」を掲げ、企業の事業成長に寄与していきます
https://plus-d.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした