Coding Methodology

IE(Internet Explorer)無き世界で本気出すCSS4選

2021 / 09 / 01

ついにこの時がきたか。IEのWindows10(LTSB/LTSC以外の通常版)でのWebブラウザアプリのサポートが終了することになりました。インターネット黎明期に世界に多大なる貢献を果たしてきたIEには感謝しかありませんが、現代においては彼と我々は非常に難しい関係にありました。 今回はそんな偉大なIE無き世界に本気を出すCSSを4つご紹介していきたいと思います。

IE(Internet Explorer)無き世界で本気出すCSS4選

1.display: grid;

IEでもAutoprefixerと組み合わせて使うとある程度の機能を使えていましたが、repeat関数を使うとコンパイル後がnth-childだらけになるので制限の無い繰り返し要素に使うには二の足を踏んでいました。
また、「auto-fit/auto-fill」というカラム幅を自動調整してくれる値が使えるようになり、minmax関数と組み合わせるとシンプルかつフレキシブルにレイアウトを構築することができます。

display: grid; 使用例

display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

2.custom properties

CSSで変数が使えるようになります。私としてはインラインスタイルと組み合わせて使用することに可能性を感じています。
レスポンシブデザインに必須となった「media query」はインラインスタイルで記述することができませんが、custom propertiesと組み合わせると実質的に可能になります。
width、marginなど使用箇所により調整したい値をHTML上で自由にコントロールできるようになります。また、詳細度を変えずに変更できるのも大きな魅力です。

custom properties 使用例

<div style="--mb: 30px; --mbMd: 60px;">テスト</div>

div { margin-bottom: var(--mb); }
@media screen and (min-width:897px){
  div { margin-bottom: var(--mbMd);}
}

3.display: contents;

表現が難しいですが「指定した要素が無かったことになる」ようなプロパティです。使い所が限られますが、grid(またはflexbox)と組み合わせると輝くときがあります。通常「display: grid;」を指定するとその直下の子要素がグリッドアイテムになりますが、子要素に「display: contents;」とすると孫要素に当たる部分がグリッドアイテムになります。グリッドアイテムをhtml変えずに変更できるので組み方の幅が広がります。

display: contents; 使用例

<article>
  <div>
    <h2>タイトル</h2>
    <p>テキスト</p>
  </div>
  <figure><img src="image.png"></figure>
</article>

article{
  display: grid;
  grid-template:
  'title title' auto
  'figure text' 1fr /
  200px 1fr }
div{ display: contents;}
h2{ grid-area: title;}
p{ grid-area: text;}
figure{ grid-area: figure;}

表示結果

4.gap for flexbox

gridで使用するイメージの強いgapプロパティですが、flexboxでも使用することができます。marginやpaddingとは異なり、要素間に余白を作ってくれるので、last-childやネガティブマージンなどで端にある要素の値を打ち消す必要が無くなり、使い勝手が良いです。

gap for flexbox 使用例

display: flex;
gap: 40px 20px;


Microsoftは特定のサイトをユーザーがIEでアクセスした場合、Edgeに転送させる「Moving users to Microsoft Edge from Internet Explorer」というプログラムも開始しているので、上記を早く取り入れたい方は是非申請をしてみてください。

https://docs.microsoft.com/en-us/microsoft-edge/web-platform/ie-to-microsoft-edge-redirection#request-an-update-to-the-ie-compatibility-list

一覧に戻る