Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
6
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

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

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

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

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

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

is.jsの導入

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

上記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が荒れて嫌だったので、このような形にしました。
みなさまはどのようにしているのかも興味があるので、ご教示いただけますと幸いです!
それでは。

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
6
Help us understand the problem. What are the problem?