2年前に投稿

@supports と CSS Hackについて

2019年9月7日

DISCLAIMER: This article is more than a year old and may not be current.

この記事は約 4 分で読めます。

3.5

@supports と CSS Hackについて
調べてみました。

@supports

CSSの@supportsは機能クエリと呼ばれ、
CSSの特定のプロパティやプロパティと値の組み合わせが
ブラウザにサポートされているかチェックするための機能です。
言い換えると、条件分岐でスタイルを適用することができます。

@supports at-ruleは、
ステートメントのブロックをサポート条件に関連付けます。
サポート条件は1つまたは複数の名前と値の組を
結合条件 (and)、非結合条件(or)、否定 (not)
で組み合わせたものです。
演算子の結合順位は、
括弧を使用して変更できます。

https://developer.mozilla.org/ja/docs/Web/CSS/@supports#Syntax

かなり細かく条件分岐で
スタイルを適用することが
出来るようなのですが、
以下のような使い方が
分かりやすいです。

CSS display: grid; を
サポートしているブラウザにはGridレイアウト、
そうでないブラウザには
Flexboxレイアウトを適用させるCSSが以下。

.box {
  display: flex;
  flex-wrap: wrap;
}
@supports (display: grid) {
  .box {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(3, 1fr);
  }
}

参考までに @supportsは
CSSの高度な使い方になりますが、
「そもそも@supportsを使う必要があるか？」
と言った記事もありました。

機能クエリ @supports を使い、
特定のCSSプロパティに対応している
ブラウザとそうでないブラウザに対し、
以下のようなメッセージを出す事も出来ます。

Check the message
below and your console to see
if your browser supports the text-decoration-skip-ink!
Check Can I use for current browser support.
ブラウザが text-decoration-skip-ink をサポートしているかどうか
以下のメッセージとコンソールを確認してください。

If your browser supports text-decoration-skip-ink,
this message will be green. If not, this message will be red.

ブラウザがtext-decoration-skip-inkをサポートしている場合、
上記メッセージは緑色になります。
そうでない場合、このメッセージは赤になります。

CSS Hack

CSSハックは、Webサイト作成の際に
Webブラウザ間で異なる CSSの
実装状況の違いやバグなどを吸収し、
極力各ブラウザでの表示を
同一にするためのテクニックの一つである。

ブラウザ別のCSSハックを
検索してみたところ、
以下の記事が分かりやすかったです。

ここは何色？
上記の文字色は何色になっているでしょうか？

  • Google Chrome → 青
  • Opera → 青
  • Safari → 緑
  • Firefox → オレンジ
  • Edge → 紫
  • IE11 → 灰色

※上から順にCSSを適用させていっているので
「ChromeとOperaはredからblueに」
「Safariはredからgreenに」
上書きされています。

詳細は
リンク(ブログカード)の記事に
書かれているとおりなのですが、
Internet Explorer(IE11) に関して
注意が必要なようです。

IE11をCSSハックする (おすすめしない方法)

/* IE11 */
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .css-hack {
        color: gray;
}

IE11をCSSハックする (おすすめの方法)

/* IE11 */
_:-ms-lang(x)::-ms-backdrop, .css-hack {
        color: gray;
}
貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
@supports と CSS Hackについて

カスタマイズ - CSSAt-rule,CSS,Reference

Posted by FOUR 4to6