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

More than 5 years have passed since last update.

posted at

updated at

Organization

OS、ブラウザごとのCSSハックなどまとめ

ブラウザごとのハック

IE

.sample{
  background: #cccccc\9; /* IE10以下 */
}

@media all and (-ms-high-contrast: none){
  .sample{
    background: #cccccc; /* IE10以上 */
  }
}

個人的にIEのverごとに対応することがあまりないのでIEでまとめました。
verごとに分ける場合は参考URLを参照。

Firefox

@-moz-document url-prefix(){
  .sample{
    background: #cccccc;
  }
}

Chrome

@media screen and (-webkit-min-device-pixel-ratio:0){
  .sample{
    background: #cccccc;
  }
}

Safari

@media screen and (-webkit-min-device-pixel-ratio:0) {
  ::i-block-chrome, .sample{
    background: #cccccc;
  }
}

OSごとのハック

css_browser_selectorを使用するのがよいかも。
GitHub

.win {
    /*Windows (全バージョン)のみ*/
}
.linux {
    /*linux(x11とlinux)のみ*/
}
.mac {
    /*Mac OSのみ*/
}
.iphone {
    /*iphoneのみ*/
}
.ipad {
    /*ipadのみ*/
}
.android {
    /*Google Androidのみ*/
}

上のjsはユーザーエージェントでクラスをつけている

iPhoneのみ

js
if ( navigator.userAgent.indexOf('iPhone') > 0 ) {
    $("body").addClass("iPhone");
};

Androidのみ

js
if ( navigator.userAgent.indexOf('Android') > 0 ) {
    $("body").addClass("Android");
};

IEの条件付きコメント

<!–[if IE 9.0]>
内容
<![endif]–>

IEの条件付きコメントはIE5〜9にしか対応していません。
IE10、11ではコメントとして解釈します。
今IE8以下に対応することはほとんどなくなってきてるので、使う機会もあまりなさそうですね。

参考URL

IEのバージョン毎のハックを試してみる
ブラウザまたはOS毎にCSSハックできるjs『CSS Browser Selector』
IE条件付コメントまとめ

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