ブラウザやOSごとにCSSを適応させるCSSハックいろいろ

CSSハックとは各ブラウザごとでCSSの実装状況やバグの影響で表示が崩れてしまう時に、特定のブラウザのみにCSSの指定ができるテクニックです。

Chrome、Firefox、Safari、IEの4つブラウザが主に使われていて、最近ではWindows10の登場により新たにEdge(エッジ)というブラウザが生まれました。
タブレット・スマホのブラウザのことも考えると沢山のブラウザやOSに対応したCSSを書くことになります。

webサイトを制作する際に、各ブラウザで実装状況の違いやバグがあるので見た目が崩れないようにいろいろとCSSで試行錯誤することはよくあります。
それでもあのブラウザだけがどうにもならないって時が出てくることもあるでしょう。
Web制作では、PCのいろんなブラウザもそうですしタブレット、スマートフォンでのiPhone、Androidのブラウザなど、どのような状況でもうまく表示させることが求められます。

そんな時に使える各ブラウザ・OSに対応するためのCSSハックをご紹介します。

各ブラウザに対応するCSSハック

IE10

@media all and (-ms-high-contrast:none) {
  body {
    background-color: #000;
  }
}

IE11

_:-ms-lang(x)::-ms-backdrop, body {
  background-color: #aaa;
}

「*::-ms-backdrop」と書く方法もよく見かけますが、IE11でうまく動きません。
「_:-ms-lang(x)::-ms-backdrop」と指定することで解決します。

IE9以降でも各バージョン特有のハック方法もありますが、セキュリティ面の問題もありシェア率がものすごく低いので省きます。（IE10にも言えますが）

Edgeのみ（EdgeHTML）

_:-ms-lang(x)::backdrop, body {
  background-color: #bbb;
}

Edgeのみ（Chromium）

_:lang(x)::-ms-, body {
  background-color: #bbb;
}

Edge（エッジ）はWindows10のために設計された、Microsoftが開発しているウェブブラウザ。
これからのWindowsユーザのためのもしもの時に。

Chromeのみ

_:lang(x)::-internal-media-controls-overlay-cast-button, body {
  background-color: #ccc;
}

Firefoxのみ

_:lang(x)::-moz-placeholder, body {
  background-color: #ddd;
}

Safariのみ

_:lang(x)+_:-webkit-full-screen-document, body {
  background-color: red;
}

また、OSごとにも違いが出る場合もあります。

ブラウザやOSごとにCSSハック

次にご紹介するのはブラウザだけでなく、OSごとでもCSSをコントロールすることができる方法です。
「css_browser_selector.js」を使うと、簡単にブラウザやOSごとにCSSを変えることができます。

http://rafael.adm.br/css_browser_selector/

DOWNLOADの下にあるリンクからjsをダウンロードして、jsを読み込ませてあとにCSSコードを書くだけです。

.win {
  /* Windows (全バージョン)のみ */
}

.mac {
  /* Mac OSのみ */
}

.linux {
  /* linux（x11とlinux）のみ */
}

.iphone {
  /* iphoneのみ */
}
.ipad {
  /* ipadのみ */
}
.android {
  /* Androidのみ */
}

その他、「.blackberry」や「.mobile（モバイルすべて）」などがあります。
ブラウザ用のコードもありますが、Chrome、Firefox、Safari、IEはこちらのjsを使わなくても大丈夫です。
SRWare Ironというドイツ・SRWare社製のウェブブラウザに適応させたいという人は使うと良いかも。（日本にそんな人いるかな？？？）

他にもJavascriptでユーザーエージェントを判別するなどして自力でやる方法も。
css_browser_selector.jsを使うほどでもという方は、タブレット・スマホの情報を取ってきてコントロールすれば良いです。

例えば、ユーザーエージェントを判別してbodyにクラスを付けてみる。

if (navigator.userAgent.indexOf('iPhone') > 0) {
  let body = document.getElementsByTagName('body')[0];
  body.classList.add('iPhone');
}

if (navigator.userAgent.indexOf('iPod') > 0) {
  let body = document.getElementsByTagName('body')[0];
  body.classList.add('iPod');
}

if ( navigator.userAgent.indexOf('Android') > 0 ) {
  let body = document.getElementsByTagName('body')[0];
  body.classList.add('Android');
}

わかりやすく3つに分けましたが、else ifなどでもっとコンパクトにコードを書いても良いです。
また、JavaScriptではなくサーバサイドスクリプトのPHPで書いても良いです。
あとはCSSでゴニョゴニョすればいいですね。

PHPでユーザーエージェントを判別する方法はこちらでご紹介しています。