概要

この記事はモダンブラウザで使えるCSSをまとめています。

• 扱う情報の関係上、随時更新や修正を行います。
• 存在と仕様の理解が目的のため、引用や外部サイトの紹介が中心となります。
• 情報量が多くなる場合は別記事として投稿します。

用語

用語の整理を行います。

モダンブラウザとは

2010年前後によく用いられた概念で、標準化団体で策定された技術や仕様を尊重し、他社製品と異なる挙動や仕様をなるべく含まないよう設計、実装されたWebブラウザのことを指す。具体的にはGoogle ChromeやSafari、Firefox、Operaの最新版などが該当する。

レガシーブラウザとは

標準から外れた仕様や挙動、自社製品でのみ利用可能な特殊な機能が多く、他のWebブラウザとの互換性や、他社のWeb関連ソフトウェアとの相互運用性の低いWebブラウザは「レガシーブラウザ」と呼ばれた。主に米マイクロソフト（Microsoft）社のInternet Explorerを指すが、旧Netscape社の製品など古い時代の製品も含まれる。

引用元サイト

モダンブラウザとは - 意味をわかりやすく - IT用語辞典 e-Words

情報収集の仕方

検索エンジンによる情報収集

新しいCSSは モダンCSS と呼称されている傾向があるようです。

もっと適切な言葉があるのかしれませんが、ひとまずはこのワードで検索エンジンから情報収集を行います。

サイトからの情報収集

経験上、Google検索からでは断片的な情報しか得られない傾向があるため、ある程度情報がまとまったサイトがあるとありがたいです。

State of CSS

CSSプロパティやツールについて世界中の開発者からアンケートを取り、結果をまとめているサイトです。

State of CSS

モダンブラウザ向けCSSの紹介と解説

scroll-behavior

scrolling box（スクロールボックス） にスクロールが発生した際、そのスクロールの振る舞いを制御します。 smoothを指定すると、スクロールに慣性が働くようになります。この慣性はブラウザに組み込まれているデフォルトのイージング設定が適用されます。

html{
    scroll-behavior: smooth;
}

scroll-behavior - CSS: カスケーディングスタイルシート | MDN

CSS メディアクエリー（CSS Media Query）

any-hover

デバイスが hover に対応しているかどうかを判別できます。 例えばPCのみホバーアクションをつけたいときに使えます。

@media (any-hover: hover) {
    a:hover{
        background: yellow;
    }
}

@media (any-hover: none) {
    a{
        background: green;
    }
}

any-hover - CSS: カスケーディングスタイルシート | MDN