【IEサポート終了】使えるようになった便利なCSSまとめ

2022年6月16日（日本時間）、Microsoft社のInternet Explorerのサポートが終了しました。

これによりガッツポーズしたWebエンジニアも多いのではないでしょうか。

何を隠そう、私もその一人です。

その理由はそう、「使いたいCSSが全然IEで効かん！」という問題に苦しめられてきたからです。

今回は、IEのサポート終了により、IEへの対応を気にせずに使えるようになったCSSを紹介したいと思います。

IEサポート終了につき利用できるようになったCSS一覧

IEのサポート終了により、心おきなく使えるようになったCSSの例を挙げます。

かなり多くの、そしてとても便利なCSSが利用できるようになったことがわかります。

この中でも、個人的に特に嬉しいCSSをセレクトして詳しく紹介します。

使い方の例

mix-blend-mode

mix-blend-modeは、DOM要素を重ねた時の見え方を指定するCSSプロパティです。

指定できる値は全部で16種類あります。

表示

テキストの色が下の画像と上手くブレンドしています。

HTML

<div class="box">
  <img src="http://barakokutai.com/wp-content/uploads/2022/11/24828226_m.jpg" width="960"/>
  <p class="text">Autumn leaves</p>
</div>

CSS

.box{
  position: relative;
}
.text {
  position: absolute;
  mix-blend-mode: overlay; /* オーバーレイを指定 */
  color: white;
  font-size: 80px;
  font-weight: bold;
  top: 100px;
  left: 30px;
}

object-fit

object-fitプロパティは、置換要素（img要素やvideo要素など）を親要素であるボックスにどのようにはめ込むかを指定する際に使用します。

はめ込み方の指定には５種類あります。

中でも、よく使うのが object-fit: cover; です。

これを指定すると、画像のサイズは縦横のうち小さい方を基準にして自動的に拡大・縮小され、ボックスからはみ出した部分はトリミングされます。

まず、object-fitを設定しない場合は以下のように表示されます。

表示（object-fitを設定しない場合）

正方形のボックスの中に、横長の画像を表示すると、横につぶれて表示されてしまいます。

一方、object-fit: cover を設定すると、画像の縦横比を保ってキレイに中央でトリミングされます。

表示（object-fitを設定する場合）

HTML

<div class="img-box">
  <img class="object-fit" src="http://barakokutai.com/wp-content/uploads/2022/11/dog2.jpeg" alt="">
</div>

CSS

.img-box {
 margin: 10px;
 width: 400px;
 height: 400px;
 overflow: auto;
}
.img-box img {
  width: 400px;
  height: 400px;
}
.img-box img.object-fit {
  object-fit: cover;
}

min(), max(), clamp()

CSSの数学関数として、min(), max(), clamp()があります。

これらの関数を使うことで、CSSのプロパティに設定する値を数式により計算して設定できます。

min()

min()は１つ以上の値を引数に持ち、その中で最も小さい値を設定します。つまり、プロパティに適用する最大値が設定されます。

例えば、min()を使わずに幅の最大値を設定するには、max-widthとwidthを併用する必要がありました。

.container {
  width: 80vw;
  max-width: 800px;
}

ただ、min()を使うと１行で同じ設定をすることができます。

.container {
  width: min(80vw, 800px);
}

実装例を見てみましょう。

以下の要素は、幅の最大値をmin(6０vw, 600px)に設定しています。

PCの方は、ブラウザの幅を変えてみると、ブラウザ幅が1000px以下だと要素幅が60vwで変化し、ブラウザ幅が1000pxを超えると要素幅が600pxに固定されることが分かります。

max()

max()は１つ以上の値を引数に持ち、min()と反対にその中で最も大きい値を設定します。つまり、プロパティに適用する最小値が設定されます。

max()を使わないと、幅の最大値を設定するにはmin-widthとwidthを併用する必要がありました。

.container {
  width: 30vw;
  min-width: 300px;
}

max()を使うと１行で同じ設定をすることができます。

.container {
  width: min(30vw, 300px);
}

clamp()

clamp()は、値を上限と下限の間に制限したい時に用いる関数です。最小値、推奨値、最大値の３つの引数をこの順に取り、その中から、条件に合う値が設定されます。

最小値は許される値の範囲の下限を示します。推奨値がこの値よりも小さい場合、最小値が使用されます。

反対に、最大値は値の許容される上限を示し、推奨値がこの上限値よりも大きい場合に最大値が適用されます。

推奨値は、結果が最小値と最大値の間である限り使用される値の式です。推奨値には固定値ではなく相対値を指定する必要があります。

具体例を見てみましょう。

.container {
  width: clamp(250px, 50vw, 500px);
}

これを設定された要素は、

・viewportの横幅が1000pxを超える時、推奨値50vwが最大値500pxを超えるため、要素幅には最大値500pxが適用されます。

・viewportの横幅が500pxを下回る時、推奨値50vwが最小値250pxより小さくなるため、要素幅には最小値250pxが適用されます。

・viewportの横幅が500px以上1000px以下の時、推奨値である50vwが適用されます。

ちなみに、clamp(最小値, 推奨値, 最大値)はmax(最小値, min(推奨値, 最大値))と同等です。

flexboxのgap

gapは、要素間の余白を指定するプロパティです。CSS Gridで利用されるプロパティーでしたが、flexboxでもgapで余白指定ができるようになりました。

gapプロパティーは１つか２つの値を取り、それぞれ行間、列間の余白を設定します。１つのみ指定された場合は、行間と列間を同じ値で指定します。

gapをflexboxに適用する際は、余白を指定したい要素の親要素に、display: flex; とgapをそれぞれ指定します。

表示

HTML

 <div class="flexbox">
   <div class="flex-item">①</div>
   <div class="flex-item">②</div>
   <div class="flex-item">③</div>
   <div class="flex-item">④</div>
   <div class="flex-item">⑤</div>
   <div class="flex-item">⑥</div>
 </div>

CSS

.flexbox {
 display: flex;
 flex-wrap:wrap;
 text-align: center;
 height: 100px;
 gap: 20px 30px;
}

.flex-item{
　　border: solid 1px;
　　border-color: #000;
　　width: 30%;
}

backdrop-filter

backdrop-filterは、要素の背後の領域に、ぼかしや色変化のようなグラフィック効果を適用することができるCSSプロパティです。

まず、ぼかし効果についてみていきましょう。

ぼかし効果を適用したい場合は、値にblur()を設定します。blur()の引数には、ぼかしの程度の大きさを「px」や「em」の単位で指定します。

backdrop-filter: blur(2px);

表示

ぼかしの程度の大きさごとの表示は以下のようになります。

ぼかしが2pxほどでも結構ぼかされていることが分かります。

HTML

<div class="box">
  <img class="mountain" src="http://barakokutai.com/wp-content/uploads/2022/11/mountain_img-scaled.jpeg" alt="mountains">
  <div class="blur">ぼかし 1px</div>
  <div class="blur">ぼかし 2px</div>
  <div class="blur">ぼかし 4px</div>
  <div class="blur">ぼかし 8px</div>
</div>

CSS

.box{
 position: relative; 
 width: 60vw;
}

.blur{
 position: absolute;
 left: 0%;
 color: palegreen;
 width: 100%;
 text-align: center;
}

.blur:first-child{
 top: 20%;
 backdrop-filter: blur(1px);
}

.blur:nth-child(2){
 top: 40%;
 backdrop-filter: blur(2px);
}

.blur:nth-child(3){
 top: 60%;
 backdrop-filter: blur(4px);
}

.blur:nth-child(4){
 top: 80%;
 backdrop-filter: blur(8px);
}

その他の効果

backdrop-filterには、ぼかし以外にも以下のような効果を適用することができます。

フィルター関数名	効果	引数の単位
blur	ぼかし	px, em
brightness	明るさ変換	%
contrast	コントラスト変換	%
drop-shadow	影	px, rem
grayscale	グレースケール変換	%
hue-rotate	色相環の回転	deg
invert	色の反転	%
opacity	透明度の変更	%
sepia	セピア色に変換	%
saturate	彩度の変更	%

まとめ

以上、IE非対応の便利なCSSについて紹介しました。

詳しく紹介したものを中心に、使えないと困るようなものばかりですね、、

最近では、ブラウザ間の相互運用性を改善するためInterop 2022というプロジェクトが発足するなど、ブラウザベンダー間でブラウザ動作の足並みを揃えようという動きが活発になっています。

ブラウザごとにCSSが対応しているかしていないかを気にしながら実装をしなくても良い世界が、もう近くまで来ているのかもしれません。