IEの対応が不要になることで使用できるCSSまとめ

2023年 5月17日　Posted　野々瀨(フロントエンドエンジニア)

Internet Explorer（以降IEと呼称）が日本時間の2022年6月12日をもってサポートを終了しました。現在でもまだIEに対応する案件はまだまだあるのが現状です。しかし、IEに対応することがなくなることで、使用することができるようになったCSSや、記述が簡単になったりします。そんなIEの対応が不要になることで使用できるCSSを一部ご紹介します。

グリッドレイアウト

グリッドレイアウトはIE10からでも使用することができますが、記述量が多く、また対応しないプロパティが存在していました。IEの対応が不要になりますと、簡単に記述することができます。

サンプルコード

<div class="sample">
	<header>Header</header>
	<main>Main</main>
	<aside>Side</aside>
	<footer>Footer</footer>
</div>

IEの場合：

.sample {
	display: -ms-grid;
	-ms-grid-columns: 200px 1fr;
	-ms-grid-rows: auto 1fr auto;
}

	.sample header {
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		-ms-grid-row: 1;
	}

	.sample main {
		-ms-grid-column: 2;
		-ms-grid-row: 2;
		margin-top: 20px;
		margin-left: 20px;
	}

	.sample aside {
		-ms-grid-column: 1;
		-ms-grid-row: 2;
		margin-top: 20px;
	}

	.sample footer {
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		-ms-grid-row: 3;
		margin-top: 20px;
	}

IE以外の場合：

.sample {
	display: grid;
	grid-template:
		"header header" auto
		"side main" 1fr
		"footer footer" auto /
		200px 1fr;
	gap: 20px;
}

	.sample header {
		grid-area: header;
	}

	.sample main {
		grid-area: main;
	}

	.sample aside {
		grid-area: side;
	}

	.sample footer {
		grid-area: footer;
	}

参考リンク

place-*プロパティによる一括指定

グリッドレイアウトやフレキシブルレイアウトのアイテムのそろえ方を一括で指定することのできる、place-*プロパティを使用できるようになります。

プロパティ名	説明	構文
`place-items`	align-itemsプロパティとjustify-itemsプロパティを一括で指定できるプロパティです。	`place-items: align-items justify-items;`
`place-content`	align-contentプロパティとjustify-contentプロパティを一括で指定できるプロパティです。	`place-content: align-content justify-content;`
`place-self`	align-selfプロパティとjustify-selfプロパティを一括で指定できるプロパティです。	`place-self: align-self justify-self;`

サンプルコード

.container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	place-items: start end;
}

参考リンク

フレキシブルレイアウトのgapプロパティ対応

フレキシブルレイアウトでgapプロパティを使用することができます。

サンプルコード

.container {
	display: flex;
	gap: 20px;
}

参考リンク

ボックスのコンテンツ領域定義

要素のボックスをコンテンツ領域のみに定義するdisplayプロパティのcontentsという値を使用することができます。display: contentsが与えられた要素は、コンテンツ領域以外を描画せず、さらにDOMツリーから除外されます。

ボックスモデルの比較画像

また、display: contentsが与えられた要素の親要素の振る舞いも変わります。例えば、親要素がdisplay: gridである場合、その子要素はグリッドアイテムとなりますが、display: contentsが子要素に与えられていますと、子要素を無視し孫要素がグリッドアイテムとして適用されます。

サンプルコード

次のコードは、二つのカラムに縦に並んだ各要素がグリッドにそろった例です。

<div class="sample">
	<section class="column">
		<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eros odio morbi.</h2>
		<p class="details">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum suscipit efficitur. In eleifend, ex vitae vulputate hendrerit, odio erat congue ligula, eget viverra dolor ex quis purus viverra.</p>
		<p class="more-link"><a href="contents.html">more</a></p>
	</section>
	<section class="column">
		<h2>Lorem ipsum dolor sit amet, consectetur efficitur.</h2>
		<p class="details">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non elementum leo. Phasellus ultrices finibus nibh lacinia malesuada. Morbi scelerisque urna enim, sit amet porttitor urna lobortis non. Vivamus sit amet erat et neque faucibus consectetur a eu odio. Fusce sodales vitae massa vulputate iaculis. Phasellus felis ex, pellentesque ac augue a, porta sagittis arcu. Vivamus quis tortor.</p>
		<p class="more-link"><a href="contents.html">more</a></p>
	</section>
</div>

.sample {
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto 1fr auto;
	grid-gap: 10px 20px;
}

	.sample .column {
		display: contents;
	}

		.sample .column .heading {
			font-size: 20px;
			font-weight: bold;
		}

		.sample .column .details {
			line-height: 1.5em;
		}

		.sample .column .more-link {
			text-align: right;
		}

参考リンク

幅をコンテンツに合わせる

ブロック要素をコンテンツの幅に合わせる場合、コンテンツの幅に合わせてwidthプロパティを固定するといった方法で可能です。ですが、コンテンツごとに幅が異なる場合はその都度、指定する必要があります。そこで、fit-contentという値を使用すると内部のコンテンツ幅にボックスの幅を合わせることができます。

サンプルコード

次のコードはブロック要素を中央ぞろえにし、コンテンツの幅でマーカーを付ける例です。

fit-contentの指定した場合と指定しない場合の比較画像

<div class="sample">Heading Title</div>

.sample {
	margin: 0 auto;
	width: fit-content;
	background: linear-gradient(rgba(255, 153, 0, 0.5), rgba(255, 153, 0, 0.5)) 0 100% / 100% 0.4em no-repeat;
	font-size: 30px;
}

参考リンク

キーボード操作時のフォーカスのアウトライン

マウス操作で要素に対してフォーカスを与えアウトラインが表示（フォーカスインジケーター）されますと、デザイン上邪魔になり:focus疑似クラスに対してoutline: noneのように消してしまうケースがあります。このようにしてしまいますと、例えばキーボード操作でフォーカスを与えても見た目に変化がないため、フォーカスが当たっているのかが分からなくなってしまいます。
そこで:focus-visible疑似クラスを使用することで、そういったマウス操作によって邪魔となるような場合にはスタイルが当たらず、キーボード操作によってスタイルが当たるようになります。
:focus疑似クラスに対してoutline: noneなどを与えることはアクセシビリティ上よろしくないですが、どうしてもそうする必要がある場合は:focus-visible疑似クラスを使用するとよいかもしれません。

:focus-visible疑似クラスは次の振る舞いをします。

キーボード操作によってフォーカスした要素にスタイルを当てる
キーボードによる入力をサポートする要素（例えばinput要素）はマウス操作でもスタイルを当てる

サンプルコード

.sample:focus {
	outline: 0;
}

.sample:focus-visible {
	outline: 1px solid #00c;
}

参考リンク

自身または子孫要素にフォーカスが当たった時のスタイル

自身または子孫要素にフォーカスが当たった際にスタイルを当てることのできる:focus-withinという疑似クラスが使用できます。

サンプルコード

次のコードはinput要素にフォーカスが与えられると.sample要素にスタイルが当たる例です。

<div class="sample">
	<p><input name="foo"></p>
</div>

.sample {
	border: 1px solid #aaa;
	padding: 10px;
	background-color: #fff;
}

.sample:focus-within {
	background-color: #eee;
}

参考リンク

要素を切り抜く（クリッピング）

形状用の関数を使用して、要素を切り抜く（クリッピング）ことができるclip-pathプロパティが使用できます。

サンプルコード

次のコードは四角形のdiv要素を円形に切り抜く例です。

<div class="sample"></div>

.sample {
	width: 200px;
	height: 100px;
	background-color: #333;
	clip-path: circle(50px at 50% 50%); /* circle(描画半径 at 描画開始X軸 描画開始Y軸) */
}

参考リンク

シェイプ

自身から隣接するインラインのノードの回り込みに対して、さまざまな形状にすることができるshape-*プロパティが使用できます。形状を指定するshape-outsideプロパティ、形状から隣接するノードまでの余白を指定するshape-marginプロパティ、アルファチャンネルのしきい値を指定するshape-image-thresholdプロパティの三つの種類があります。

なお、shape-marginプロパティは、シェイプを適用した要素内の範囲で適用されるため、シェイプを適用した要素の元々の大きさの外側に余白が付くわけではありません。

サンプルコード

<div class="sample">
	<img src="img/picture-circle.png" width="140" height="140" alt="">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum suscipit efficitur. In eleifend, ex vitae vulputate hendrerit, odio erat congue ligula, eget viverra dolor ex quis purus viverra.
</div>

.sample {
	width: 400px;
}

	.sample img {
		float: left;
		margin-right: 20px;
		border-radius: 50%;
		shape-outside: circle(50%);
	}

参考リンク

複数のセレクターのいずれかに一致（セレクターをまとめる）

複数のセレクターに対して同じスタイルを適用する時、コンマ区切りで指定しますが、数が多かったり長たらしくなったりします。そこで:is疑似クラスまたは:where疑似クラスを使用することで、一部のセレクターをまとめることができます。

:is疑似クラスと:where疑似クラスの違いは:is疑似クラスは指定したセレクターの詳細度が高くなるのに対し、:where疑似クラスは詳細度を変えません。

サンプルコード

従来の指定：

.container .sample1 p,
.container .sample2 p,
.container .sample3 p {
	color: #d00;
}

:is疑似クラスを使用した指定：

.container :is(.sample1, .sample2, .sample3) p {
	color: #d00;
}

参考リンク

変数（カスタムプロパティ）

プロパティの値を一つの箇所で定義し、さまざまな箇所で使用することができる変数を使用することができます。:root疑似クラスに対して--変数名:値;と定義し、var(--変数名)で定義した変数を展開することができます。

サンプルコード

:root {
	--accent-color: #d00;
}

.sample {
	background-color: var(--accent-color);
}

参考リンク

要素の幅とブラウザーのビューポートを比較し幅を設定

ブラウザーのビューポートに応じて要素の幅を設定することができる、min関数, max関数, clamp関数を使用することができます。

min関数は例えばmin(80%, 200px)と指定しますと、要素の幅がブラウザーのビューポートの80%以上の時に、200pxが適用されます。

max関数は例えばmax(80%, 200px)と指定しますと、要素の幅がブラウザーのビューポートの80%以下の時に、200pxが適用されます。

clamp関数はmin関数とmax関数の両方の範囲を指定することができます。

サンプルコード

.sample {
	width: clamp(200px, 80%, 600px);
}

参考リンク

アスペクト比を保持

要素に対して指定したアスペクト比で幅や高さを描画してくれるaspect-ratioプロパティを使用することができます。例えば要素の幅が100%でaspect-ratio: 16 / 9と指定すると、16分の9の値が自動的に高さとして描画されます。なおaspect-ratio: 1のように一つだけ値を指定した場合はaspect-ratio: 1 / 1と同じ値を指定したのと同じ扱いになります。

サンプルコード

.sample {
	width: 200px;
	aspect-ratio: 16 / 9;
}

参考リンク

画像や動画の表示の収まり方

画像や動画の表示の収まり方をobject-fitプロパティを使用して適用することができます。

サンプルコード

<img src="img/picture.jpg" width="640" height="427" alt="" class="sample">

.sample {
	width: 200px;
	height: 200px;
	object-fit: contain;
}

参考リンク

背景の効果

要素の背景に対して効果を付けることのできるbackdrop-filterプロパティを使用することができます。filterプロパティは要素全体に効果が適用されますので、内部の要素はもちろん自身もぼかしが広がって表現されます。backdrop-filterプロパティは背面に対してのみ効果が適用されますので、内部の要素には影響を与えません。

例えば、すりガラスのような表現にすることもできます。

サンプルコード

.sample {
	background-color: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(5px);
}

参考リンク

top / left / right / bottomプロパティの一括指定

今まではtopプロパティ、leftプロパティ、rightプロパティ、bottomプロパティそれぞれ別々に指定する必要がありましたが、insetプロパティを使用することで一括で指定することができます。insetプロパティの値はmarginプロパティなど同じ指定の仕方です。

サンプルコード

.sample {
	position: fixed;
	inset: 0;
	margin: auto;
	max-width: 640px;
	width: fit-content;
	height: fit-content;
	padding: 20px;
	background-color: #fff;
}

参考リンク

背景と背景色の混合

Photoshopなどにある描画モード（ブレンドモード）と同様の、背景と背景色を混合するbackground-blend-modeプロパティを使用することができます。

サンプルコード

.sample {
	background: #f00 url("img/picture.jpg") no-repeat;
	background-blend-mode: multiply;
}

参考リンク

複数行のテキスト省略

テキストの省略はtext-overflowプロパティで行いましたが、1行しか対応していませんでした。
-webkit-line-clampプロパティを使用することで複数行に対応しました。ちなみにWebKitで実装されたものですので、ベンダープレフィックスが付いていますが、将来的にはline-clampと外れることになりそうです。

なお、条件がありdisplayプロパティが-webkit-box、-webkit-box-orientプロパティがverticalで指定されている場合のみ適用されます。

サンプルコード

<p class="sample">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

.sample {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	width: 300px;
	-webkit-line-clamp: 3;
}

参考リンク

背景のテキスト適用

背景の描画をテキストに適用することができるbackground-clipプロパティのtextを使用することができます。なお、colorプロパティが優先されますので、color: transparentを適用しておく必要があります。

サンプルコード

.sample {
	background: linear-gradient(to right bottom, #fd2fd9, #17d6ff);
	background-clip: text;
	color: transparent;
}

参考リンク

扇状のグラデーション

扇状のグラデーションをconic-gradient関数を使用することで表現することができます。ディスクのようなグラデーションはもちろん、応用すれば円形のグラフなんかも描くことができます。

サンプルコード

.sample {
	border-radius: 50%;
	width: 100px;
	height: 100px;
	background: conic-gradient(red, orange, yellow, green, blue);
}

参考リンク

親要素の大きさに応じて子孫要素のスタイルを適用

親要素の大きさに応じて子孫要素のスタイルを適用することのできる、@containerルールを使用することができます。@mediaルールはブラウザーのビューポートを基準にしますが、@containerルールはcontainerプロパティが与えられた要素の大きさを基準にします。

サンプルコード

次のコードは、.container要素の幅が300px以下の場合に、.block要素を垂直方向の並びにする例です。

<div class="container">
	<div class="block">
		<img src="./img/sample.jpg" width="100" height="67" alt="">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non elementum leo. Phasellus ultrices finibus nibh lacinia malesuada. Morbi scelerisque urna enim, sit amet porttitor urna lobortis non. Vivamus sit amet erat et neque faucibus consectetur a eu odio. Fusce sodales vitae massa vulputate iaculis. Phasellus felis ex, pellentesque ac augue a, porta sagittis arcu. Vivamus quis tortor.</p>
	</div>
</div>

.container {
	container: sample / inline-size;
	border: 1px solid #ccc;
	padding: 20px;
	max-width: 500px;
}

	.container .block {
		display: flex;
		gap: 20px;
	}

		.container .block p {
			margin: 0;
		}

@container sample (max-width: 300px) {
	.container .block {
		flex-direction: column;
	}
}

参考リンク

ある条件を持つ要素へのスタイルを適用

例えば子孫要素にimg要素のある要素に対してスタイルを適用したい場合に、:has疑似クラスを使用することができます。jQueryを扱ったことがある人はjQueryにあるhasメソッドやhas疑似クラスと同じと考えれば分かりやすいかと思います。

ちなみに、Chromeで実装されたCSSの:has疑似クラスが、jQueryのhas疑似クラスと干渉し悪影響を及ぼすとのことです。jQueryの3.6.2で解消はされているようです。

サンプルコード

.sample:has(img) {
	border: 1px solid #ccc;
}

参考リンク

スクロールの入れ子による干渉

例えばモーダルウィンドウ内でスクロールがある場合、モーダルウィンドウ内でスクロールし最後に達成した以上にスクロールしますと、外側のhtml（またはbody）要素がスクロールしてしまう、スクロールの干渉を制御するoverscroll-behaviorプロパティを使用することができます。

サンプルコード

.modal .content {
	overflow-x: hidden;
	overflow-y: scroll;
	overscroll-behavior: contain;
}

参考リンク

メディアクエリを比較演算子で指定

メディアクエリの範囲指定で比較演算子を使用して指定できます。

サンプルコード

従来の指定：

@media (max-width: 750px) {

}

@media (min-width: 320px) and (max-width: 750px) {

}

比較演算子による指定：

@media (width <= 750px) {

}

@media (320px <= width <= 750px) {

}

参考リンク

変形（トランスフォーム）の個別指定

要素の変形（トランスフォーム）はtransformプロパティで変形用の関数を値に指定していましたが、変形用の関数をプロパティとして使用することができます。例えばrotate関数はrotateプロパティで指定することができます。個別指定ができるようになりますと、例えばアニメーションを行う時にtransformプロパティで変化しない値も指定する必要がありましたが、個別でアニメーションを与えることができます。

サンプルコード

従来の指定：

.sample {
	transform: scale(1.2) rotate(45deg);
}

プロパティによる個別指定：

.sample {
	scale: 1.2;
	rotate: 45deg;
	animation: sample-rotate 1s infinite;
}

@keyframes sample-rotate {
	from {
		rotate: 45deg;
	}
	to {
		rotate: 270deg;
	}
}

最後に

今回一部のみご紹介しましたが、メディアクエリのprefers-color-schemeやcontent-visibilityプロパティ、現在まだ実装はされていませんが三角関数（JavaScriptでいうMath.sinメソッドなど）、セレクターの入れ子（SCSSの入れ子と同等）など、さまざまあります。IEの対応が必要なくなり、ブラウザーの自動アップデートがほぼ標準になったことで、効率よく比較的かつ簡単にマークアップができるようになってきています。ぜひ活用していきましょう。