カテゴリー: ウェブ制作

タグ:CSS(4)  HTML(1)  ツール(1)  

HTMLやCSSのブラウザ対応状況を調べられるサイト『Can I use…』

ウェブサイトを制作する際にもっとも気をつけないといけないことの1つが「使用しようとしているHTMLやCSSが主要なブラウザに対応しているか?」ではないでしょうか。

2017年現在、HTMLとCSSのみで様々なことができるようになっています。

しかし、ちゃんと調べずに使用していると「このブラウザではちゃんとレイアウトされているのに、このブラウザではレイアウトが崩れてる!」みたいな状況が起こってしまいます。

今回は使用したいHTMLやCSSがどのブラウザに対応しているのかを調べることができるサイト『Can I use…』を紹介しようと思います。

『Can I use…』の使い方

まずはサイトにアクセスします。

Can I useの画面

URL:http://caniuse.com/

使い方は非常にシンプルです。もはや説明不要かもしれませんが、一応解説していきます!(笑)

ページ上部の「Can I use ______ ?」の部分に調べたい要素を入力するだけです。

Can I use ? の部分に調べたい要素を入力する

今回は試しにCSS「writing-mode」を入れてみましょう。ちなみに「writing-mode」はテキストを縦書きにしたりできるCSSです。

すると、以下の様な表示が出てきます。

CSS「writing-mode」を入力した画面

各ブラウザとそのバージョンの対応表です。

色によって、どの程度対応しているのかがわかる仕組みになっています。

Supported サポートしている
Partial support 部分的にサポートしている
Not supported サポートしていない
Support unknown サポートしているかどうか不明

カーソルを上に持ってくると詳細を確認することもできます。

マウスホバーで詳細が表示されます。

ちなみに「英語ばっかで読めねーよ!!」という方も居るかと思います。

そんな方もご安心ください。Google Chromeの翻訳機能を使えば、かなり精度の高い翻訳をしてくれます。

Chromeでページを開いた時に上部に翻訳機能を使用するかどうかが現れます。

まとめ

もちろん実際のブラウザで直接確認するのが一番確実なのですが、こういったツールを上手く使う事によって作業時間を短縮することができます。

制作効率を上げることは非常に重要だと思いますので、ぜひ活用してみてください!

2017.07.24

Twitterでつぶやく

Facebookでシェアする

実験中→ いいね: 6 ツイート: 4

おすすめの記事

TOP