📝 備忘録

学んだことを記録しています。アウトアップの単位は小さくしています。

  1. トップページ
  2. 備忘録
  3. モダンブラウザ向けのCSSまとめ

モダンブラウザ向けのCSSまとめ

blog

概要

この記事はモダンブラウザで使える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の紹介と解説

メディアクエリー(@media)

any-hover

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

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

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

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

カテゴリ: CSS