検索

【絶版】ブラウザ毎に記述するCSSハックまとめ

著者：
投稿日：
更新日：

CSSハックは、ブラウザごとのCSSの実装状況やバグによる表示の乱れを修正するためのテクニックです。主要なブラウザにはChrome、Firefox、Safari、IE、そして新しく登場したEdgeがあります。


また、タブレットやスマートフォンのブラウザも考慮に入れると、多様なブラウザやOSに対応したCSSを書く必要があります。Web制作では、各ブラウザの違いやバグを考慮して、どのデバイスでも適切に表示されるようにCSSを調整することが重要です。このような状況で役立つCSSハックの方法を紹介します。


目次
  1. 各ブラウザに対応するCSSハック
    1. IE10
    2. E11
    3. Edgeのみ（EdgeHTML）
    4. Edgeのみ（Chromium）
    5. Chromeのみ
    6. Firefoxのみ
    7. Safariのみ
    8. Operaのみ
    9. iOS Safariのみ
    10. Android Browserのみ
    11. iOS Chromeのみ
    12. Android Chromeのみ
  2. まとめ

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

IE10

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

E11

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

Edgeのみ（EdgeHTML）

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

Edgeのみ（Chromium）

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

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

Operaのみ

x:-o-prefocus, body {
  background-color: #eee;
}

iOS Safariのみ

_:-webkit-full-screen:not(.foo), body {
  background-color: #faf;
}

Android Browserのみ

body:nth-of-type(1) .selector {
  background-color: #aaf;
}

iOS Chromeのみ

_:lang(x)::-webkit-outer-spin-button, body {
  background-color: #eae;
}

Android Chromeのみ

@supports (-webkit-overflow-scrolling: touch) {
  body {
    background-color: #faf;
  }
}

まとめ

ブラウザ毎の仕様が同じであればこのようなハックは必要ないのですが、ChromeとSafariでかなりの違いがありますのでサーバーサイドで制御するかCSSまたはJS側で制御するかになります。


特殊な状況でサーバーサイドで制御するのは難しい場合にやはりCSSハックは役に立ちます。推奨はされていませんが、まだまだCSSハックを使う時は多そうです。


開発
CSS
テックブログ
関連記事
CMSの悩みはBasicで一気に解決しましょう
  1. 完全無料
    Basicはオープンソースで運営されています。誰しもが自由にBasicを利用できます。
  2. 超軽量化で超高速配信
    通常のCMSよりページ容量を70%以上を自動で圧縮を行い更に自動で静的化・圧縮化されたページが配信されます。
  3. SEOにつよつよ
    70%以上軽量化に加えて最新SEOに対応した構造で静的化・圧縮化されたページはライバルサイトより圧倒的に評価されます

    4. ライバルサイトより一歩前にいけるCMSでサイトを構築しませんか？

    →より詳しく

Basic 0.9.15を入手
お問い合わせはこちら
著者プロフィール
松岡宗谷

Basic https://basic.dance/ を運営しています。スペースナビ 代表取締役。スタートアップ界隈でCTO→Sharetube創業→スペースナビ創業→UXSEOリリース、ResizeCDNリリース、あまてむリリース。世界で最もSEOに効くCMS Basicリリース。個人の夢は完全義体化。会社の夢は宇宙事業。プログラマーは死ぬまで現役でありたい