各ブラウザのCSSサポート状況の調べ方

CSS(スタイルシート)の文法で定義されているすべてのプロパティが、すべてのブラウザで表示できるわけではありません。ブラウザによって、サポートされているプロパティの量は異なります。また、サポートされていても部分的だったり、何らかのバグが含まれている場合もあります。

比較的新しい仕様で追加されたプロパティを使いたい場合は、「そのプロパティがどれくらいのブラウザでサポートされているのか」を把握しておく必要があるでしょう。しかし、自力で各ブラウザのサポート状況を調べるのは手間がかかります。そのような場合に便利なウェブサイトが、Can I useです。このサイトでは、使いたいプロパティ名などを入力すると、そのサポート状況を下図のように分かりやすいグラフで教えてくれます。

mask-imageプロパティのサポート状況

mask-imageプロパティのサポート状況


上図は、mask-imageプロパティのサポート状況を表示したところです。緑色が完全にサポートされているバージョン、黄色は一部分だけサポートされているバージョン、赤色がまったくサポートされていないバージョンを表しています。上図の表示状態から、mask-imageプロパティは、
  • IE・Edgeではまったく使用できない。
  • Firefoxでは、Ver.54以降で完全に使える。
  • Chromeでは、ベンダープレフィックスを付加すれば使える。
といったサポート状況が分かります。

また、「Showing All」というボタンを押せば、過去のバージョンも含めて全体のサポート状況を見ることもできます。これによって、「いつのバージョンからサポートされたのか」を調べられます。

text-shadowプロパティのサポート状況

text-shadowプロパティのサポート状況


上図は、text-shadowプロパティのサポート状況を表示したところです。図の左側を見れば分かるとおり、代表的なすべてのブラウザの最新版でサポート済みです。ここで「Showing All」ボタンを押すと、図の右側のように表示され、IE9以下ではサポートされていないこと、Safari3.2以下では一部のみのサポートであることなどが分かります。


デザインの幅を広げたいなら、CSSソースも記述できるようになろう

ホームページ作成ソフトを使えば、CSSについて詳しく知らなくてもさまざまなデザインを作れます。しかし、CSSソースを読み解いたり自力で記述したりできれば、もっと自由に思い通りのデザインが作れるようになります。

当ガイドサイト内でも、多数の装飾・レイアウト方法を紹介しています。ぜひ、CSSソースを直接編集できる環境を整えて、さまざまなテクニックを試してみて下さい。

【関連記事】



※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。