現在の実装でよく使用されるCSSの機能、これから登場するCSSの新機能のまとめ

Post on:2022年2月24日

はじめに

「CSS3」はCSSにとって大成功でした。たくさんの新機能がリリースされ、素晴らしいものばかりでした。CSSグラデーション、CSSアニメーション、border-radius、box-shadow、transform、などたくさんあります。さらに、CSS3のバナーも普及し、多くの人にCSS3が認知されることになりました。

CSS3の登場で、多くの人がこれらのテクニックに磨きをかけたことは間違いないでしょう。しかし、それ以降のCSSをあまり学んでいない人がたくさんいることも確かです。

他の人たちも同じような推測をしています。
Scott VandeheyはModern CSS in a Nutshellの中で、2015年頃からCSSについていけず、何を学べばいいのかよく分からないという友人について触れています。ScottのリストとCSS3の時代から変わったことをまとめてみたいと思います。

プリプロセッサはCSS3の時代から今日まで広く使用されていますが、プリプロセッサを使用する理由は減っているので、気にする必要はありません。これには将来の機能をポリフィルするような、より新しいアプローチも含まれます。これには、Autoprefixerも含まれます。CSS-in-JSは一般的ですが、ワークフロー全体がすでにJavaScriptで行われているプロジェクトに限られます。関連するプロジェクトに参加することがわかり、必要ならそのときに構文を学べばいいのです。カスタムプロパティ、Flexbox、Gridは確実に学んだほうがよいでしょう。

CSS3以降の新機能

CSS3が登場した2015年以降の新機能を解説します。

レイアウト

.card {
  display: grid;
  grid-template-columns:
    150px 1fr;
  gap: 1rem;
}
.card .nav {
  display: flex;
  gap: 0.5rem;
}

.card {

display: grid;

grid-template-columns:

150px 1fr;

gap: 1rem;

}

.card .nav {

display: flex;

gap: 0.5rem;

}

FlexboxとCSS Gridをまだ学んでいない場合は、学ぶ必要があります。最近のCSS開発において重要な役割を担っており。CSS3で追加されたどの機能よりも重要です。

CSS Gridは、subgridとmasonryレイアウトを考慮するとさらに強力になります。どちらもクロスブラウザではまだ信頼できませんが、おそらくそう遠くないうちに完全にサポートされるでしょう。

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

html {
  --bgColor: #70f1d9;
  
  --font-size-base: 
    clamp(1.833rem, 2vw + 1rem, 3rem);
  --font-size-lrg:
    clamp(1.375rem, 2vw + 1rem, 2.25rem);
}

html.dark {
  --bgColor: #2d283e;
}

html {

--bgColor: #70f1d9;

--font-size-base:

clamp(1.833rem, 2vw + 1rem, 3rem);

--font-size-lrg:

clamp(1.375rem, 2vw + 1rem, 2.25rem);

}

html.dark {

--bgColor: #2d283e;

}

CSSの変数（カスタムプロパティ）はいくつかの理由で大きな意味を持っています。カスタムプロパティは、プロジェクトにおけるデザイントークンのホームとなり、プロジェクトの維持と一貫性の維持を容易にします。カラーのテーマ化は、ダークモードのようなよく使用されるケースです。

カスタムプロパティを使用して、サイト全体をデザインすることも可能です。その流れで最近ではTailwindを無視することはできないでしょう。サイト全体をHTMLのクラスでスタイルするというアプローチは、多くの人の心を打ちました（多くの人が間違ったコードを書くので、それがあなたに合わなくても気にする必要はありません）。

プリファレンスクエリ

@media 
  (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001s !important;
  }
}

@media 
  (prefers-color-scheme: dark) {
  :root {
    --bg: #222;
  }
}

@media

(prefers-reduced-motion: reduce) {

* {

animation-duration: 0.001s !important;

}

@media

(prefers-color-scheme: dark) {

:root {

--bg: #222;

}

プリファレンスクエリとは一般的に@mediaクエリのことで、異なるブラウザのサイズに対応するために使用してきましたが、OSレベルで特定のユーザーのプリファレンスを検出する方法が含まれるようになりました。たとえば、prefers-reduced-motionとprefers-color-schemeです。これらにより、ユーザーの理想的なエクスペリエンスをより忠実に反映したインターフェイスを構築することができるようになりました。

ユーザーでレスポンシブ: 新しいレスポンシブデザインの実装方法を解説

色の設定方法

.block {
  background: 
    hsl(0 33% 53% / 0.5);

  background:
    rgb(255 0 0);

  background:
    /* can display colors 
       no other format can */
    color(display-p3 0.9176 0.2003 0.1386)

  background:
    lab(52.2345% 40.1645 59.9971 / .5);}

  background:
    hwb(194 0% 0% / .5);
}

.block {

background:

hsl(0 33% 53% / 0.5);

background:

rgb(255 0 0);

background:

/* can display colors

no other format can */

color(display-p3 0.9176 0.2003 0.1386)

background:

lab(52.2345% 40.1645 59.9971 / .5);}

background:

hwb(194 0% 0% / .5);

}

色のCSS構文は、関数名を変更せずにアルファ値（透明度）を設定できる関数に移行しています。たとえば、CSS3の時代に純粋な青が必要な場合は、rgb(0, 0, 255)と記述していました。しかし現在では、コンマなしでrgb(0 0 255)とし、別の関数を使わずにアルファ値を設定（rgb(0 0 255 / 0.5)）できます。hsl()も同じ状況です。ちょっとしたことですが、将来の色関数がどのように機能するかチェックしておきましょう。

次の機能が予定されています。

Display P3 colorは、color()関数で提供されます。
lab()関数も新しい色空間で、「人間が見ることのできる色の全範囲を表現する」ものです。
lch()関数も新しい色空間です。
hwb()関数もまた、人間のための新しい色空間です。

可変フォント

body {
 font-family: 'Recursive', sans-serif;
 font-weight: 950;
 font-variation-settings: 'MONO' 1, 'CASL' 1;
}

body {

font-family: 'Recursive', sans-serif;

font-weight: 950;

font-variation-settings: 'MONO' 1, 'CASL' 1;

}

CSS3ではWebフォントが大流行しました。そして、現在には可変フォントがあります。それらの存在を知っていた方がいいかもしれません。Webフォントも可変フォントもデザインの可能性を広げ、時にはパフォーマンスにも貢献します（同じフォントの太字版と斜体版で異なるフォントファイルを読み込む必要がなくなるなど）。カラーフォントもありますが、サポートはされていてもWeb上ではあまり人気がないようです。

日本語フォントだと、M Plusも可変対応になりました。

M PLUS 1（中ほどの「Variable axes」）
SVGフォントはもう試した？透明感のある美しい文字表現ができるフォント -Opulent Font + SVG
Adobe CCユーザーは完全無料！新作フォント「貂明朝テキスト」

パス

.cut-out {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.cut-out {

clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

}

.mask {
  mask: url(mask.png) right bottom / 100px repeat-y;
}

.mask {

mask: url(mask.png) right bottom / 100px repeat-y;

}

.move-me {
  offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0');
  animation: move 3s linear infinite;
}

@keyframes move {
  100% { 
    offset-distance: 100%;
  }
}

.move-me {

offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0');

animation: move 3s linear infinite;

}

@keyframes move {

100% {

offset-distance: 100%;

}

また、CSS3からSVGも爆発的に増えました。clip-pathであらゆる要素をさまざまな形に切り取ることができ、CSSにSVGらしさをもたらしています。それだけでなく、パスに沿って要素をアニメーションさせたり、パスに沿って要素をフロートさせたり、SVG要素のパスを更新することもできます。

clip-path: 文字通り、要素を形に切り取ることができます。
masks: クリッピングに似ていますが、マスクはマスクのアルファチャンネルに基づくなど、他の性質を持つことができます。
offset-path: 要素を配置できるパスを提供します。一般的には、パスに沿って要素をアニメーション化する目的で使用します。
shape-outside: フローティング要素に、他の要素が回り込むようなパスを提供します。
d: SVGの<path>のd属性はCSSで更新できます。

SVGとCSSを使用したUIコンポーネントの実装テクニック

CSSのフィルター

.disable {
  filter: 
    blur(1px)
    grayscale(1);
}

.site-header {
  backdrop-filter: 
    blur(10px);
}

.styled-quote {
  mix-blend-mode: 
    exclusion;
}

.disable {

filter:

blur(1px)

grayscale(1);

}

.site-header {

backdrop-filter:

blur(10px);

}

.styled-quote {

mix-blend-mode:

exclusion;

}

最近はCSSで直接できる画像操作（他のDOM要素は言うまでもなく）が多くなっています。CSSのフィルターは文字通りフィルターですが、そのフィルターには仲間がいて、用途はそれぞれ異なります。

filter: 明るさ、コントラスト、グレースケール、彩度など、Photoshopのような便利なエフェクトがたくさんあります。ぼかしは本当にユニークです。
background-blend-mode: 繰り返しになりますが、レイヤーをブレンドする方法はPhotoshopを連想させます。レイヤーを乗算して暗くし、合成します。オーバーレイで背景と色を混ぜ合わせます。明るくしたり暗くしたりするのは、Webデザインで実際に役立つ古典的なエフェクトですが、より高度な照明効果がいつクールな外観を生み出すかわかりません。
backdrop-filter: filterと同じ機能ですが、背景のみに適用され、要素全体には適用されません。背景だけをぼかすときに特に便利です。
mix-blend-mode: background-blend-modeと同じ機能ですが、背景だけに限らず、要素全体に適用されます。

Houdini

import "https://unpkg.com/extra.css/confetti.js";

1	import "https://unpkg.com/extra.css/confetti.js";

body {
  background: paint(extra-confetti);
  height: 100vh;
  margin: 0;
}

body {

background: paint(extra-confetti);

height: 100vh;

margin: 0;

}

HoudiniはCSSをJavaScriptで拡張する、あるいは少なくともCSSとJavaScriptの共通部分に基づいているテクノロジーのコレクションです。

Paint API: <canvas>APIから構築され、カスタムプロパティで制御可能な画像を返します。
Properties & Values API / Typed OM: 文字列である値（10pxなど）にタイプを与えます。
Layout API: 独自の表示プロパティを作成します。
Animation API

各APIのブラウザのサポートはばらばらですが、組み合わせると、本当に素晴らしいデモを作成できます。Houdiniの魅力の一つは、インポートと使用が非常に簡単なワークレットとして出荷されていることです。そのため、強力な機能をモジュール化すると同時に、非常に簡単に使用できるようにする可能性もあります。

Shadow DOM

my-component {
  --bg: lightgreen;
}

:host(.dark) { 
  background: black; 
}

my-component:part(foo) {
  border-bottom: 2px solid black;
}

my-component {

--bg: lightgreen;

}

:host(.dark) {

background: black;

}

my-component:part(foo) {

border-bottom: 2px solid black;

}

<svg>と<use>要素で遊んだことがある人は、Shadow DOMが少し出てきます。クローン要素には、「通過」を選択する方法に制限があるShadow DOMがあります。そして、<web-components>に入ると、同じようなワックスのボールになります。

Webコンポーネントにスタイルを設定する場合、「外部」からは基本的に4つのオプションがあることを知っていますか。また、ネイティブのCSSモジュールと構成可能なスタイルシートについても知っておくとよいでしょう。

CSSワーキンググループ

CSSのワーキンググループでは、ある仕様がある時点でどのような状況にあるかを示すために、年ごとにまとめられています。

かなり濃い内容です。CSS3以降の変更点を確認できるドキュメントで、優れたリファレンスです。しかし、カジュアルなフロントエンドのデベロッパーに、何を学ぶべきかを教えるために、このドキュメントを送りつけないでください。

これから登場する新機能

心配しないでください。
CSS3の時代から今知っておくと便利なことをまとめました。CSSの将来がどうなるか、チェックしておきましょう。

コンテナクエリ:は、非常に重要です。これからはスクリーンのサイズだけでなく、コンテナ要素（親要素）のサイズに基づいてスタイルを設定できるようになります。ポリフィルもあるので、今日から使用できます。
参考: CSSの新機能コンテナクエリのポリフィルがこれほど使いやすく、Googleから提供されたことは素晴らしい
コンテナ単位は、コンテナ要素のサイズに基づくサイズ設定に便利です。
独立したトランスフォームは、たとえばscale: 1.2;のようなトランスフォームは、transformよりも論理的に使用できます。
ネストは、すべてのCSSプリプロセッサーに昔からある機能で、デベロッパーは特にメディアクエリに使用する機能です。こういったことがネイティブのCSSでできます。
スコープは、CSSのブロックが特定のエリアにのみ適用されるように指示する方法（CSS-in-JSライブラリと同じ方法）で、近接の概念に役立ちます。
カスケードレイヤーは、要素に対してどのようなスタイルが「勝つ」のか、まったく新しいコンセプトを切り開くものです。上位レイヤーのスタイルは、詳細度に関係なく、下位レイヤーのスタイルに勝てるようになります。
参考: CSSの新機能カスケードレイヤー「@layer」CSSをレイヤー化して扱え、今までの実装方法が大きく変わる！
参考: CSSの新機能カスケードレイヤーが主要ブラウザにサポートされます、最初に理解しておきたい基礎知識を解説
ビューポート単位は、相対的なビューポートの長さの導入により、大幅に改善されます。dvhとdvwはブラウザウィンドウで実際に使用可能なスペースを考慮し、ブラウザUIがサイトのUIと重なるなどのひどい問題を防ぎます。
:has()セレクタは、親セレクタにプラスするようなものです。
スクロールのタイムラインは、素晴らしいものになるでしょう。