「カラーピッカーを自分の作るサイトに付けるためにJSColorを使う」という記事を書いてFacebookにシェアしたときにHTML5だったらjsなしでとても簡単に実現できる、と教えてもらいました。HTML5は今時点ではまだどのブラウザでも使えるということでもなさそうなのですが単純にHTML5は全部使える・全部使えないということではなく、部分的な対応のようです。
部分的な対応の情報を確認したくて調べていたら良いサイトがありましたので、それについて書きます。
HTML5で色の入力欄を指定する方法を試してみた
まず教えてもらったHTML5の書き方でHTMLを作って各ブラウザで表示してみました。
ソースはこんな感じです。
<form action="xxx.php" method="post"> <label>color<input type="color" name="color"></label> <input type="submit" value="submit"> </form>
input type=”color” とすることでカラーパレットが開くようになるみたいです。
chrome
こんな感じで表示され、
クリックすると、
その色が表示されます。
Firefox
こんな感じで表示され、
クリックすると、
その色が表示されます。
IE
こんな感じで表示され、
クリックしても何も起きません。ということでIE11ではこの input type=”color” に対応していないのかな？と思いました。しかし調べないと分かりません。
サイトにアップしてみたので、試してみてください！
https://usortblog.com//blog_sample/jscolortest/html5test.html
caniuse.com “Can I use… Support tables for HTML5, CSS3, etc”
HTML5の各ブラウザでの対応情報を色々検索した結果、このサイトを見つけました。
Can I use… Support tables for HTML5, CSS3, etc とあるようにHTML5、CSS3などの各ブラウザの対応状況を調べることができます。
最初にこのサイトを見たときに
Detected your country as “Japan”. Would you like to import usage data for that country?
「日本」としてあなたの国を検出しました。あなたはその国のために使用データをインポートしますか？
という表示がありますので、Import をクリックしておきます。これでブラウザの普及率や利用可能パーセンテージが世界と日本の両方で見ることが出来るようになります。
caniuseでinput type=”color”を調べてみる
caniuseで先ほどの、input type=”color”の各ブラウザでの対応を調べてみます。調べ方は
この空白部分に、
調べたい、input type=”color”を入力します。
このように表示されます。IE11で表示出来なかったので確認すると、
やはり、IE11はというかIEは将来的なedgeも含めて赤色(利用できない)になっていて、このinput type=”color”が使えないことが分かりました。(後で見直してみると、safariも全然対応しないみたいです、、残念)
右上を見ると
全体で、Japan:40.69%、Global:65.15%と世界的には半分以上の環境で使えそうですが日本だと50%以下になっています。これは
IE11の普及率が、日本で世界に較べ3倍ぐらい多いようです。そのせいみたいですね。
調べ方はその他に、ページにある
この一覧の中から、クリックして対応を確認することもできます。
まとめ:このサイトはブックマークしておきたいです
今後どんどん変わっていくと思われるHTML5などの情報はこのようなサイトで随時確認する必要があるかなと思うのでブックマークしておくことにしました。
また、このサイトを見たときにどのようなリソース(資源)でこのサイトのデータを作ってるのかが気になりました。検索結果のページの下の方を見ると
Resources (5) というタブがあり、クリックすると
こんな感じで5カ所のリソースを使っていることがわかり、信頼できるサイトなのではないかと感じました(^^)/
コメント