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

@media all and (-ms-high-contrast:none) {
	*::-ms-backdrop, body {
		background-color: #aaa;
	}
}

「*::-ms-backdrop」を書かないと、IE10以降の適応となります。
IE9以降でも各バージョン特有のハック方法もありますが、セキュリティ面の問題もありシェア率がものすごく低いので省きます。(IE10にも言えますが)

 

Edgeのみ

@supports (-ms-ime-align:auto) {
	body {
		background-color: #bbb;
	}
}

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

 

Chromeのみ

@media screen and (-webkit-min-device-pixel-ratio:0){
	body {
		background-color: #ccc;
	}
}

 

Firefoxのみ

@-moz-document url-prefix(){
	body {
		background-color: #ddd;
	}
}

 

Safariのみ

@media screen and (-webkit-min-device-pixel-ratio:0) {
	_::-webkit-full-page-media, _:future, :root body {
		background-color: #eee;
	}
}

 
 

ブラウザや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('iPad') > 0) {
	let body = document.getElementsByTagName('body')[0];
	body.classList.add('iPad');
}

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

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

 

どうしても特定のブラウザだけスタイルがおかしくなる時や、このブラウザ、この端末はスタイルを変更したいという時などに使ってください。