基本方針
かつてのWindowsの主要ブラウザであったInternet Explorer 11は、多くの新しい技術を使用することができず、開発元のMicrosoftも使用を推薦していません。
しかし、サポートが最長で2025年まで続く現状では、想定されるウェブサイトの利用者層によっては、対応を必要とされる場面もあります。
echo.cssでは、Version2.0.0から、以下の方針に基づいて対応・非対応を決定しています。
- 順次、対応を終了する
- 対応することによって、他のブラウザに明確な機能の悪化が生じる場合は対応しない
- 対応することによって、フレームワークの使い勝手が大幅に悪化する場合は対応しない
- 重要ではない、オプション機能の場合は対応しない
- ライブラリの導入で代替できる場合は対応しない
- 対応していないコードが業界内の最良手段となった場合は対応しない
非対応の機能
.echo-buttons, .echo-cards, .echo-mediasが段組にならない
Internet Explorer 11は、柔軟なグリッドレイアウトを定義する、grid-template-columnsプロパティに対応していません。このため、すべてのセルが余白がない状態で縦に並びます。
IEで同じ体裁とする場合は、このコンポーネントを使用せず、 .echo-grid, .echo-table 等に書き換えてください。
img要素をCSSでトリミングしたときに画像が歪む
Internet Explorerでは非対応のプロパティである、object-fitによるトリミングを行うようになりました。
対応する場合は、以下のクラスに別途ポリフィル（補正ライブラリ）を適用してください。
.echo-thumbnail
.echo-thumbnail-square, .echo-thumbnail-round, .echo-thumbnail-(ratio-x)to(ratio-y) を使用した場合
.echo-hero
.echo-hero-fit を使用した場合
ラベル・ナビゲーションの文字が上にずれる
Internet Explorerは、 display: flex を指定した要素のheightプロパティが auto になっていると、align-itemsプロパティが反映されない不具合があります。
このため、min-heightプロパティのみとなっている .echo-label, .echo-nav-label のテキストが上にずれて見えます。
対応する場合は、 .echo-label, .echo-nav-label のheightプロパティに、具体的な値を指定してください（ただし、テキストの増減による柔軟性は失われます）。