IE11のFlexboxでは min-width: 0 がないと文字が収まらず、レイアウトが崩れることがありました
min-width: 0 がないと省略表示が効かないケースがあります。
1. Flexbox
IE11向けのFlexboxのサンプルです。
- A
- B
- C
- D
- E
- F
テキストはみ出し対策の例です。
2. object-fit の代替
モダン環境では object-fit: cover が使えますが、IE11では背景画像で代替する対応がよく使われました。
3. aspect-ratio の代替
IE11では aspect-ratio が使えないため、padding-top 手法で比率を確保する必要がありました。
padding-top 手法
4. loading="lazy" の代替
画像の遅延読み込みのためには、スクロール量を監視するようなJavaScriptを用意する必要がありました。
5. classList.toggle(name, force) の代替
IE11は toggle() 第2引数に未対応のため、add() / remove() で書き分ける必要がありました。
このパネルは add() と remove() だけで制御しています。
6. fetch() の代替（XHR）
IE11では fetch() が使えないため、通信処理は XMLHttpRequest で実装することが一般的でした。
ボタンを押すと当時の通信例を確認できます。
7. details/summary の代替実装
IE11では details/summary が使えないため、div 要素で開閉UIを自作することがありました。
なぜこの実装が必要だったのか？
IE11は
details/summary に未対応で、JSによる自作UIが一般的でした。
フォーカス管理はどうしていたか？
モーダルやアコーディオンは、キーボード操作やフォーカス制御を別途実装する必要がありました。
8. X-UA-Compatible meta
当時よく見かけた head 内の指定:
<meta http-equiv="X-UA-Compatible" content="IE=edge">