【まとめ】ブラウザごとに適用するCSSを切り替える方法【CSSハック】

各ブラウザのみで有効なCSSと記述するためのCSSハック方法のまとめ。

OS別の対応にはJavaScriptライブラリ使えばよさげ。

はじめに

以下のサイトで赤く表示されている方法が、現在開いているブラウザで有効な方法らしい：

browserstrangeness.github.io

以下に、ググって出てきた記事を20件ぐらいブラウズして方法をまとめたが、実際に効くのかはテストしていない。

いろいろな方法が出てくるし、情報が古かったりいろいろあるので、用いる際は各自テストしてほしい。

それで効かない方法があったらコメントで知らせてくれると、後で読む人が救われるかも知れない。

私の環境

テストしてないと言ったが、MacOSにおいてSafari、Google Chrome、Firefoxの対応方法が実際に機能するかは確認した。

Win機は持っていないのでIEやEdgeに関しては不明。

また、テストした際のバージョンは以下の通り：

macOS big sur 11.5.1
Safari 14.1.2
Google Chrome 95.0.4638.54 (x86_64)
Firefox 93.0 (64ビット)
日付：2021-10-25

あとmacのSimulatorアプリで、iPhone 13（iOS 15.0）のSafariでの表示も一応確認した。

特に断りがなければSafari対応というのはiOSのSafariも含まれていると思って良い。

各ブラウザで有効な方法

無効らしい方法も一応記載した。ググって右往左往している人がいるかも知れないので、はっきり否定するため。

最初でも述べたがWindowsの環境では効くか確認していない。

IEやEgdeの情報は特に注意。

IE

IE10とIE11の両方で効く：

_:-ms-input-placeholder, :root .css-hack {
  color: gray;
}

以下のものは、WindowsでハイコントラストモードがnoneのときにはIE10で効くが、active, white-on-black, black-on-whiteのいずれかの場合には効かないので非推奨：

/* IE10でのみ効く場合もあるが、非推奨 */
@media all and (-ms-high-contrast: none) {
  body {
    background-color: gray;
  }
}

以下はIE11でのみ有効：

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

その他バージョンのIEについては下記記事を参照：

spyweb.media

Edge

まず用語解説。

EdgeHTMLというのは旧バージョンのEdge（v12-18）のことで、現在ではChromiumベースのEdgeが新しいバージョンとなっている。

koneta.nifty.com

forest.watch.impress.co.jp

EdgeHTMLでのみ有効：

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

/* OR */

/* 多分？ */
_:-ms-lang(x)::backdrop, body {
  background-color: pink;
}

Chromiumでのみ有効：

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

全てのバージョンのEdgeで有効：

@supports (not (-webkit-hyphens: none)) and (not (-moz-appearance: none)) {
  body {
    background-color: pink;
  } 
}

以下の記事によると2021年6月時点では全てのEdgeに有効な方法はないと言及しているが...

netamame.com

Google Chrome

Google Chromeでのみ有効：

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

Firefox

Firefoxでのみ有効：

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

/* OR */

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

Safari

Safariでのみ有効。iOSのSafariにも効く。

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

/* OR */

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

以下の方法もSafariのみで有効だが、iOSのChromeでも有効になるらしい：

/* Safari or iOS Chrome */
_::-webkit-full-page-media, _:future, :root body {
  background-color: blue;
}

以下の方法はSafariのバージョンが11以上（現在はv14が最新）では効かないので非推奨：

/* 非推奨 */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  ::i-block-chrome, body {
    background-color: blue;
  }
}

Google Chrome、Safari、Opera

これらのブラウザはwebkitを利用しているので、以下のような共通の指定方法がある。

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

以下の方法は効かないので注意：

/* 無効 */
_::content, _:future, body:not(*:root) {
  background-color: purple;
}

Google Chrome、Opera、Firefox

Google Chrome、Opera、Firefoxで有効。

Safari以外のwebkit系ブラウザでのみ有効と書いてあったが、実際確認してみるとForefoxでも有効であったので注意。

@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
  body {
    background-color: gold;
  }
}

OSごと

css_browser_selector.jsを使えば良いらしい。以下のサイトのDOWNLOADというセクションからDLできる：

https://rafael.adm.br/css_browser_selector/

DLしたらhtmlファイルのheadタグ内とかで以下のように記述する：

<script src="css_browser_selector.js" type="text/javascript"></script>

すると、OSやデバイス判定ができる以下のようなCSS セレクタが使えるようになる：

.win {
  /* Windows（全バージョン） */
}

.mac {
  /* Mac OS */
}

.linux {
  /* Linux（x11とlinux）*/
}

.iphone {
  /* iPhone */
}

.ipad {
  /* iPad */
}

.android {
  /* Android */
}

.mobile {
  /* 全てのモバイルデバイス */
}