このCSSのプロパティは使えますか?(Can I use…?)

caniuse1

コーディングをしていてよくあるのが、「このプロパティってIE8でサポートしてたっけ?」とか「これはIE6はダメだったよな~」とか、まぁ主にIEがネックになることが多いんですが・・・

そんな時に、CSSのプロパティがどのブラウザでどのバージョンから使えるのかを教えてくれるのが Can I use…? です。

caniuse2

サイトに移動し、画面中央の「Search」ボックスに調べたいCSSのプロパティを入力します。
たとえば、指定文字数以上の文字が入った場合に、あふれた部分を「...」に置き換えて表示してくれる「text-overflow」プロパティ。
実装の問題などがあり、長く使っていませんでしたが、調べてみると・・・

caniuse3

知らない間にカレントバージョン(現在の各ブラウザ最新バージョン)では、全て有効らしいです。
これで、いちいちPHPやJavascriptで文字数をカウントしてから切り出さなくても使えるじゃない。

ちなみに、最近よく使いたくなる「border-radius」ですが、

caniuse4

Opera mini以外はカレントですね。
まぁ、Opera、Safariは個人的に重要視していないので、対応してなくてもいいんですけどw
開発時などもクライアントからOperaやSafariを言われたことはほとんどないし。

ちなみに、下記のように「-webkit-」などと入っている場合は、

caniuse5

そのブラウザで利用するときはプロパティの頭に「-webkit-」と付けてねということです。
いわゆるベンダープレフィックスってやつですね。

 

 

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

投稿ナビゲーション