第3回目：ブラウザごとの互換性
こんにちは！たくぞー（Instagram：takuzo0405）です。
今日はHTML講座の第3回目、ブラウザごとの互換性に着目して解説していきます。
第1回目～2回目の講座を見ていない方はこちらからご覧ください。
それではさっそく始めていきたいと思います。
各ブラウザによってデフォルトのスタイルが異なる
HTMLタグにはpタグやbrタグ、divタグなど様々なタグが存在しますが、見るブラウザによって見た目が異なることがあります。
ブラウザのシェア率というのは日本では、Google Chrome・Firefox・Safari・Internet Explorer(IE)の4つがメジャーどころとして使われていますが、これらのブラウザがあることによって多くのエンジニアが苦しめられて至ります。
具体的に言うと、
- ブラウザによって見た目が変わるHTMLタグ
- ブラウザによって使えないHTMLタグ
この2つが存在するために多くのエンジニアが頭を悩まされます。
これらについてより具体的に解説していきたいと思います。
今回はChromeとFirefox、Safariの3つのブラウザを用意しました。
この3つのブラウザで比較検証していきたいと思います(テキストエディタはVSコードを使用しています)。
ブラウザによって見た目が変わるHTMLタグ
HTMLタグにはブラウザによって同じような見た目になってくれないHTMLタグがあります。分かりやすいものでいうと、buttonタグを見てみましょう。
左のChromeと比べると、Firefox(真ん中)はボタンの色が濃い目のグレー、Safari(右)はボタンのサイズが小さく見えますね。
他にも、区切り線として使用することがあるhrタグも見てみると、
Chrome(左)とSafari(右)は細い線で表示されているのに対して、Firefox(真ん中)は太い線が表示されました。
このように、同じタグなのに、ブラウザによって見た目が違ったりするものがあります。
この3つのブラウザではそこまで大きすぎる違いはありませんでしたが、以前はInternet Explorer(IE)と呼ばれるWindowsの標準ブラウザではこれ以上に見た目が変わってしまうこともあり、ブラウザ同士でのレスポンシブ化をするのに苦労する、なんてこともあったようです。
最近ではIEはMicrosoft Edgeというブラウザに変わり、差異は無くなってきました。
ブラウザによって使えないHTMLタグ
次は、特定のブラウザでは使えない、サポートがされていないHTMLタグもご紹介します。
formタグの中で使用するinputタグで、日付を指定するためのもの(input type=”date”)があるのですが、こちらを見てみましょう。
はい、このように表示されました。
すべて見た目が異なりますね。
Chrome(左)では年/月/日と日本語で、Firefox(真ん中)ではyyyy/mm/ddと英語表記、Safariでは何も表示されていません。さらに、input type=”date”の機能として、クリックしたときにカレンダーが表示されるのですが、Safariではカレンダーは表示されません。
※上の画像ではWindows版のSafariのため、フォームの右側に日付入力のための矢印が表示されているようです。Mac OSではこの矢印も表示されません。
このようにブラウザによってサポートされていないHTMLタグが存在しているのですが、これらもMDNリファレンスのサイトで確認することができます。
試しにinputタグを見てみましょう。HTML要素リファレンスのページからinputタグを見つけます。
少し下にスクロールして、dateの属性を見つけたらクリック。
ページの下の方にある「ブラウザーの互換性」というところをチェックすると、HTMLタグ(属性)のブラウザとの互換性をチェックすることができます。
「あれ？緑色やん。フルサポートされてるんじゃないの？」
確かに、サポート済みみたいです。え、じゃあバグがなにか？？
念のため、もう一つのサイトで互換性をチェックしてみましょう。ブラウザの互換性チェックでよく使われているサイトに「Can I use」というWebサイトがあります。
こちらのサイトで見てみます。
「input type=”date”」と検索。
表示された結果を見てみると、どうやらSafari Ver14.5で2021年4月26日にサポートされたみたいですね。
これ以前のバージョン、あるいは非対応のブラウザではMDNリファレンスに記載の通り、input type=”date”はinput type=”text”へと格下げされてしまい使うことができません。
このように、ブラウザで直接表示されるような特殊なタグ、あるいは属性に関してはブラウザによって見た目が異なってきたり非対応だったりすることがあるので、しっかりと確認する必要があります。
そうすることで、最後のブラウザチェックのときに互換性の有無で苦しむことが無くなります。
まとめ：第4回へ続く
ここまで、各ブラウザごとの互換性について見てきました。
第3回目の講座では、
- ブラウザによって見た目が変わるHTMLタグ
- ブラウザによって使えないHTMLタグ
を解説していきました。
buttonタグやhrタグなどHTML要素によって見た目が変わってくるものだったり、input=”date”だったりそもそもブラウザによって使えるもの、使えないものがあるという内容でした。
このあたりはしっかりと抑えておくことはフロントエンドエンジニアとして活動していく上で大切なことになりますので、ぜひしっかりと抑えておきましょう。
以上で、第3回目のHTML講座を終了したいと思います。
では、また次の講座でお会いしましょう。
第4回目の講座はこちらから↓
「ホームページ制作の独学に限界を感じている」
「HTML・CSSをマスターして単価を上げたい」
そんなお悩みをこれ一つで解決！
本格ホームページを作りたい方はこちら
