Microsoft社の公式アナウンスによるとInternet Explorerは2022年の6月16日をもってサポート終了されるとのことです。コーディングでは長年悩まされ続けたIEヘの対応ですが、いよいよこの時を迎えるところにきました。すでに案件によっては早くからIE対応を行なっていないものもたくさんあるかと思いますし、IEサポート終了後も何らかの理由で対応が必要となるケースもあるかもしれませんが、ひとまず公式のアナウンスがでた事により、IE対応から解放されてるのではないでしょうか。   IE対応の中ではハックを使ってバグに対応するものもありますが、一部のCSSプロパティが未対応ということで不便を感じることもあるかと思います。そこで今回はIEのサポート終了に伴い、モダンブラウザのみで使えるCSSのプロパティを見ていきたいと思います。まずは実用性の高い便利なプロパティについて紹介していきます。個人的によく使うもの順でまとめていますのでそちらも合わせて参考にしていただければと思います。  

object-fit, object-position

object-fitはコンテンツ領域に合わせたサイズで要素を表示できるプロパティです。これを使うとimg要素を背景表示の指定なしでカバー画像のように全体表示できるようになります。初期状態では中心を基準に配置されますが、object-positionを併用することで、要素の基準位置を指定できるようになります。

<div>
  <img src="./photo.jpg" alt="">
</div>

div {
  width: 300px;
  height: 200px;
}
div > img {
  object-fit: cover;
  object-position: right top;
  width: 100%;
  height: 100%;
}

  IE対応がなくなることで個人的には最も使いたいプロパティになるのではないかと思うくらい、よく使う印象があります。IEで使えるようにするためには、別途polyfillの読み込みが必要になります。    

var()

定義されたCSSで使える変数を出力する関数です。まずはCSS内で変数をカスタムプロパティとして定義した上で、その変数を引数に入れることで使えるようになります。変数は:rootとしてルート要素にプロパティとして定義するのが一般的です。

:root {
  --font-color: red;
  --bg-color: white;
}
p {
  color: var(--font-color);
  background: var(--bg-color);
}

  Sassなどでも変数は扱えますが、コンパイル後は静的データになるので、JavaScriptで動的に扱いたい時などに有効です。詳しい方法などは過去記事「CSS変数（カスタムプロパティ）を使う上でのポイントと注意点」でもまとめていますのでご参考に。IEで使えるようにするためには、別途polyfillの読み込みが必要になります。    

aspect-ratio

コンテンツ領域に対してアスペクト比を設定できるようになります。画像やインラインフレームなどで縦横比を指定して表示できるようになります。1つ目の値には幅の比率を、2つ目の値には高さの比率をスラッシュで区切って指定します。両方同じであれば1つにまとめての指定も可能です。

<div>
  <iframe src="https://www.youtube.com/embed/*********"></iframe>
</div>

// インラインフレームが16対9の比率を維持しながら表示
div {
  width: 100%;
  aspect-ratio: 16 / 9;
}
div > iframe {
  width: 100%;
  height: 100%;
}

  これが使えるようになるまでは、絶対配置と幅に対しての比率に合わせたpadding-topを併用した形で、強制的に表示領域の縦横比率を維持させて表示させたりしていました。

// paddingと絶対配置を組み合わせた方法
div {
  width: 100%;
  padding-top: 56.25%;
  position: relative;
}
div > iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

   

position: sticky;

スクロールに合わせて、特定の領域内に合わせて固定表示にさせることができます。position: sticky;を指定すると、親要素が固定表示となる対象の領域となります。topプロパティを併用して固定位置を指定します。ただし、祖先要素でoverflow: hidden;の設定があると上手く機能しないので注意が必要です。

<main>
  <article></article>
  <aside>
    <div class="sticky">スクロールに合わせて固定表示</div>
  </aside>
</main>

// 親要素のaside要素内で固定表示される
.sticky {
  position: sticky;
  top: 10px;
}

  IEで使えるようにするためには、別途polyfillの読み込みが必要になります。もしくはJavaScriptでスクロールに合わせて、position: fixed;とposition: static;を動的に切り替える方法などで対応する方法もあります。（参考記事：jQueryで特定の位置で切り替わるスクロール時の固定と解除を切り替え）    

gap

Flexboxやgridのレイアウトなどで、アイテム要素間の余白を一括指定できるようになります。それぞれflexコンテナ要素、girdコンテナ要素に指定し、1つ目の値には上下方向（row-gap）2つ目の値には左右方向（column-gap）を指定します。両方同じであれば省略して1つだけの表記にすることも可能です。

<section class="flex-container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>
<section class="grid-container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 10px;
}
.flex-container > div {
  width: 50%;
  height: 100px;
}
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 100px);
  gap: 20px 10px;
}

  各種アイテム要素に対してmarginを指定したり、余白分を引いた幅での均等配置などで対応することもありますが、gapを使うことでそういった煩わしさも無くなりますね。    

filter, backdrop-filter

色調の変更や、ブラーやドロップシャドウをかけたりといった、Photoshopなどのグラフィック制作ツールで扱われるフィルター効果をCSSで使えるようになります。filterではその要素自体にフィルター効果が適用され、backdrop-filterでは指定した要素の背景部分のみ（コンテンツ内部には影響しない）に適用されるような形で使い分けを行います。

<img class="filtered" src="./photo.jpg" alt="">
<section>
  <div class="background-filtered">背景部分にフィルター適用</div>
</section>

.filtered {
  filter: brightness(0.4) contrast(175%);
}
section {
  background: url(./photo.jpg) no-repeat center center/cover;
}
section > .background-filtered {
  backdrop-filter: blur(10px);
}

  具体的なフィルターの適用は両方ともfilter関数を使う形になります。filter関数はスペース区切りで続けて指定することにより、複数のフィルター効果を適用できるようになります。background-filteredは背景だけブラーがかかったすりガラス調のデザインを表現するときによく用いられます。フィルターの種類について詳しくは過去記事「CSSのfilterプロパティで実現できる色々な表現」でも紹介していますのでご参考に。    

mix-blend-mode

先ほどのfilterと同じくグラフィック制作ツールで扱われる描画モードの指定をCSSで設定できるようになります。描画モードを変えることで、要素が重なり合った時の見え方なども変わってくるので、より豊かなデザイン表現が可能になります。

<figure>
  <img src="./photo.jpg" alt="">
</figure>

figure {
  background: red;
}
figure > img {
  mix-blend-mode: overlay;
}

  描画モードは定義されているものを指定しますが、こちらについて詳しくは過去記事「CSSでブレンドモードが指定できるプロパティmix-blend-modeを試してみる」でも詳しくまとめておりますのでご参考に。  

---

  今回はIEのサポート終了に伴い、積極的に取り入れたいモダンブラウザのみで使えるCSSのプロパティについてまとめてみました。このほかにもまだたくさんあるので、また別記事にしてまとめてみたいと思います。