CSSハック

クロスブラウザ間で表示を統一する

現状での使用は非推奨

モダンCSSは主要なブラウザで広くサポートされていて、適切に使用することでクロスブラウザ対応が容易に

代替手段 : ベンダープレフィックス

• 一部のCSS機能は、標準化されるまでブラウザごとに異なるプレフィックスをつける
• 例：-webkit-, -moz-

代替手段 : @supports

• CSSの機能クエリを使用して、ブラウザが特定のCSS機能に応じてスタイルを適用させる
• 例：Flexbox機能　対応していない古いブラウザ向けに、floatを使って表示する

display: flexをサポートしている場合の書き方

@supports (display: flex) {
  . flexbox {
    display: flex;
    ...;
  }
}

ブラウザハック

Google Chrome

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .class {
    ..... ;
  }
}

Google Chrome／Opera

@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
  .class {
    ..... ;
  }
}

Firefox

@-moz-document url-prefix() {
  .class {
    ..... ;
  }
}

Edge

 @supports (-ms-ime-align: auto) {
  .class {
    ..... ;
  }
}

IE

@media all and (-ms-high-contrast: none){
  .class {
    ..... ;
  }
}

Safari

_:lang(x)+_:-webkit-full-screen-document, .class {
  ..... ;
}
or
::-webkit-full-page-media,
:future,
:root .class {
  ..... ;
}
or 
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  _::-webkit-full-page-media,
  _:future,
  :root .class {
    ..... ;
  }
}

iOS Safari

_:-webkit-full-screen:not(.foo), .class {
    ..... ;
}

Android

body:nth-of-type(1) . class {
    ..... ;
}

Android Chrome

@supports (-webkit-overflow-scrolling: touch) {
  .class {
    ..... ;
  }
}

javascriptで処理

if (window.someSpecificFeature) {
    // 機能がサポートされている場合の処理
} else {
    // 機能がサポートされていない場合の代替処理
}