Internet Explorerが終わって使えるHTMLタグ
広報担当T.Tです。長らくWEBフロント周りを担当していますが、2022年6月16日を過ぎ、全て良い思い出に変わりました。あんなこと・・・こんなこと・・・あったでしょう。ねぇ皆さん。もう考えなくていいんですよ。
「さようなら。全てのInternetExplorer」
というわけでIEが終わり、気にせず使うことが出来るようになった便利なHTMLタグの一部をご紹介します。
1.<picture> 画面幅による画像切替もこれで一発
2.<details> <summary> 簡単に折りたたみメニューができてjsいらず
3.<input> においての最低文字数 バリデーションいらず
1.<picture> 画面幅による画像切替もこれで一発
<picture>
<source srcset="big.jpg" media="(min-width: 800px)">
<source srcset="middle.jpg 468w">
<img src="small.jpg" alt="画像切替もこれで一発">
</picture>
■ざっくり解説
<picture>タグ内は<source>要素を0個以上。<img>要素を1つ含めて様々な画面幅に対応することができます。
<source>
・media属性でメディアクエリを指定可能。
・srcset属性は寸法に基づいた画像切り替えが可能。
<img>
・画像の大きさ、属性情報
・<source>の画像が使用できなかった時の代替案
2.<details> <summary> 簡単に折りたたみメニューができてjsいらず
<details>
<summary>メニュー</summary>
jsいらずでメニューがびろ~ん
</details>
上記タグのサンプル↓
メニュー
jsいらずでメニューがびろ~ん
■ざっくり解説
<details> 属性でopenを指定すると最初から開いた状態に
<summary> 詳細情報の要約になります。
3.minlengthで最小文字数を設定してバリデーションいらず
<input type="text" minlength="5">
CSSを使って4文字以下は
背景色でエラーであることを表現 ↓
■ざっくり解説
指定した文字数以上入力がないと有効になりません。
要素が有効かどうかをスタイルでも表現できるのでわかりやすい。
以上、簡単ながらHTMLタグのご紹介でした。今後の案件に十分使えそうです!