@supports と CSS Hackについて
この記事は約 4 分で読めます。
@supports と CSS Hackについて
調べてみました。
@supports
CSSの@supportsは機能クエリと呼ばれ、
CSSの特定のプロパティやプロパティと値の組み合わせが
ブラウザにサポートされているかチェックするための機能です。
言い換えると、条件分岐でスタイルを適用することができます。
@supports at-ruleは、
https://developer.mozilla.org/ja/docs/Web/CSS/@supports#Syntax
ステートメントのブロックをサポート条件に関連付けます。
サポート条件は1つまたは複数の名前と値の組を
結合条件 (and)、非結合条件(or)、否定 (not)
で組み合わせたものです。
演算子の結合順位は、
括弧を使用して変更できます。
かなり細かく条件分岐で
スタイルを適用することが
出来るようなのですが、
以下のような使い方が
分かりやすいです。
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
をサポートしているかどうか
以下のメッセージとコンソールを確認してください。
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;
}
貴重なお時間を割き、最後まで
ご高覧いただきまして
有難うございました
ディスカッション
コメント一覧
まだ、コメントがありません