871文字
4分
編集

Chrome 111

#Chrome #View Transitions API #CSS

Google Chrome 111がリリースされた。話題になっている機能以外にも多くの興味深い機能が追加されている。

#View Transitions API

View Transitions APIを利用すれば、画面の更新前後で重複することなくDOMを変更するスムーズな画面遷移を簡単に実現できる。モバイルアプリのページ遷移をイメージすると良い。

今までも実装を頑張ればこのような実装は可能だったが、View Transitons APIの登場によって、より無駄なく簡素な記述で可能になった。

jsx
document.startViewTransition(() => {
	// 画面の更新処理
	navigate(...)
});
css
.page-header {
  /* 画面遷移中に共有、重複しない要素に名前をつける */
  view-transition-name: page-header;
  contain: paint;
}

/* 画面遷移時に更新前の画面がどのように振る舞うか */
::view-transition-old(root) {
  mix-blend-mode: plus-lighter;
  animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both fade-out;
}

/* 画面遷移時に更新後の画面がどのように振る舞うか */
::view-transition-new(root) {
  mix-blend-mode: plus-lighter;
  animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both fade-in;
}

賢い方は、ここまで見てMPAでは利用できなさそうだなと思われるかもしれない。しかし今後MPAへの対応が予定されており、実はすでに実験的な機能としてフラグを有効化すれば利用することができる。興味のある方は、このドキュメントを参照されたい。

#Style Queries

2022年9月にChrome 105でリリースされたコンテナクエリの拡張で、コンテナ要素のスタイルに合わせて、子要素のスタイルを指定できるようになった。

現状Chrome 111では、CSS変数を利用している場合のみ利用できる。

css
@container style(--theme: warm) {
  .card {
    background-color: wheat;
    border-color: brown;
  }
}

#CSS Color Module Level 4

高解像度ディスプレイがサポートされ、選択できる色が50%増えて1,600万色になった。 また、CSS関数 color()、lch()、oklab()、color-mix()などがサポートされ、12の新しい色空間と7つの新しい色域を利用できるようになった。

これにより、今まで以上に凝ったデザインを簡単に実現できるようになり、特にグラデーションや色を使ったアニメーションでより美しいものを作れるようになる。

#CSS 三角関数の追加

CSS関数 sin()、cos()、tan()、acos()、asin()、atan()、atan2(x,y)がサポートされた。

あまり使う機会はないかもしれないが、例えば波状のアニメーションはとても簡単に実装できるようになった。

#CSS セレクター の拡張 of S

基本的な記法は:nth-child(an + b of S)である。Sにはセレクターを指定し、Sの条件に合うものの内 an + b 番目のものを対象に取る。

css
/* highlightクラスを持っている子要素の中で2番目を選択する。*/
:nth-child(2 of .highlight) {
}

/* highlightクラスを持っている且つ2番目の子要素を選択する。 */
.highlight:nth-child(2) {
}

S を複数指定することも出来ます。

css
/* highlightクラスまたはsaleクラスを持っている子要素の中で2番目を選択する */
:nth-child(4 of .highlight, .sale) {
}

これが特に便利なケースとして、不可視の要素を省いたスタイル付けが挙げられる。今まではフィルター機能のあるテーブルでストライプ柄を維持するのは面倒だった。

css
tr:nth-child(even of :not([hidden])) {
  background-color: lightgrey;
}

#参考文献