2022年6月16日、IEのサポートが切れました。フロントのエンジニアにとっての念願が叶った、記念すべき日です。IE6の頃から苦しめられてきた私ももちろんのこと浮かれています。
ただ、IEを除外することによって使用できるCSSが大幅に増え、勉強しなければならないこともまた増えました。少しずつ慣れていきましょう。
今日は使用できるようになったCSSで、頻度が高そうなものからいくつかご紹介したいと思います。
目次
object-fit
今までは、画像をアスペクト比を維持したまま領域一杯に表示したい時は、backgroundに設定する必要がありました。object-fit を使えばimgタグとして使用できます。今まで
divなどの要素にbackgroundを指定しました。これではSEOやアクセシビリティの観点から良くありません。＜HTML＞
|
1 |
<div></div> |
＜CSS＞
|
1 2 3 4 5 |
div{ width: 100%; height: 150px; background: url('./asset/sample.png') no-repeat center center / cover; } |
これから
imgタグに直接coverと同じ効果をかけることができます。＜HTML＞
|
1 |
<img src="./asset/sample.png" alt=""> |
＜CSS＞
|
1 2 3 4 5 |
img{ width: 100%; height: 150px; object-fit: cover; } |
filter, backdrop-filter
これらを使えば、画像にぼかし、グレースケール、セピア調などの効果をかけることができます。filterはimgなどの要素に、backdrop-filterは背景画像に適用します。これらはCSSを1行追加するだけで簡単に実現できます。わざわざPhotohsopを開いて画像を加工する必要はありません。ユーザーに画像を投稿してもらうようなサービスでは重宝するでしょう。
blur（ぼかし）、brightness（明度）、contrast（コントラスト）、grayscale（グレースケール）、saturate（彩度）、sepia（セピア）などが使用できます。
|
1 2 3 4 5 6 7 8 9 |
/* imgにかける場合 */ img{ filter: blur(5px); } /* backgroundにかける場合 */ div{ backdrop-filter: grayscale(60%); } |
background-blend-mode
background-blend-mode を使えば、乗算やオーバーレイなどの、いわゆる「描画モード」にすることができます。これもCSSを1行追加するだけで簡単に実現できます。デザイナーに「乗算効果を使用しないでください」とメールする必要はなくなります。multiply（乗算）、screen（スクリーン）、overlay（オーバーレイ）、soft-light（ソフトライト）などが使用できます。
|
1 2 3 |
div{ background-blend-mode: multiply; /* 乗算 */ } |
var()
最近ではCSSにも変数を定義することができます。var()は冒頭で定義したCSSを呼び出す時に使用します。色を定義するときは、変数名を任意でつけます。変数名の前にはハイフンが2つ付きますので注意してください。
|
1 2 3 4 5 6 7 8 |
:root { --main-text-color: #000000; /* メインカラーを定義 */ --content-padding-normal: 10px; /* paddingやmarginにも使用可能 */ } p{ color: var(--main-text-color); /* varで定義を呼び出し */ padding: var(--content-padding-normal); } |
gap
gapプロパティは、flexboxで使用します。flexboxの各パーツ間のmarginを設定できます。今まで
最後の要素に:last-childを付けて打ち消したりしていましたが…|
1 2 3 4 5 6 7 8 9 10 11 12 |
ul.oldFlex{ display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; } ul.oldFlex li{ margin-right: 15px; } ul.oldFlex li:last-child{ margin-right: 0; } |
これから
gapプロパティを追加するだけでOKです。|
1 2 3 4 5 6 7 |
ul.newFlex{ display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; gap: 15px ; } |
line-clamp
テキストが領域外に溢れる文章量の時、末尾を「…」に置き換えて省略するものです。今までは単行のものでしか実現できませんでしたが、複数行の場合でも末尾省略を適用できるようになります。
|
1 2 3 4 5 6 |
p{ display: -webkit-box; -webkit-line-clamp: 4; /* 行数を指定 */ -webkit-box-orient: vertical; overflow: hidden; } |
:is()
条件を指定できる疑似クラスです。()の中にクラス名などを書き、その要素が()内の条件に一致した場合にのみ適用されるようになります。p:is(‘.hoge’) と記した場合は、 .hoge クラスを持ったpタグに適用されます。()内には複数のクラスを含めることができるため、記述の繰り返しを減らすことができます。
反して、一致しない場合としたい場合は「:not()」の疑似クラスで除外の条件を追加できます。
今まで
カンマで区切って繋げていたと思います。|
1 2 3 4 5 6 7 8 |
p{ width: 1000px; } p.classA, p.classB, p.classC{ width: 500px; } |
これから
|
1 2 3 4 5 6 |
p{ width: 1000px; } p:is(.classA,.classB,.classC){ width: 500px; } |
conic-gradient
円錐状のグラデーションを再現できます。clip-pathなどと組み合わせると、円グラフをグラデーションで描画することができるでしょう。|
1 2 3 |
div{ background-image: conic-gradient( rgb(0,0,0), rgba(255,255,255) ); } |
