Blog

HOME > Web > css > 【CSS/Javascript】ハック集

【CSS/Javascript】ハック集

2017/03/28

css

備忘録です。

参考サイト
OS、ブラウザごとのCSSハックなどまとめ

Edgeのみ適用

@supports (-ms-ime-align:auto) {
.css_selector {
    background-color: red;
  }
}

IE11のみ適用

@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .hoge {
    // スタイル
  }
}

IE10以降

@media all and (-ms-high-contrast:none){
  .foo { color: green } /* IE10 */
}

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;
  }
}

//Safariのみ
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    _::-webkit-full-page-media, _:future, :root 
    .sample{
        background: #cccccc;
    }
}

//最新のSafari
_::-webkit-full-page-media, _:future, :root .css_selector {
    background-color: red;
}

OSごとのハック

「css_browser_selector.js」を使用
https://rafael.adm.br/css_browser_selector/

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

iPhoneのみ

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

Androidのみ

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

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ