Frontend Weekly 2024-12-19

Cross-document View Transition#

ドキュメント間のビュー遷移の動作を指定するアットルール@view-transitionや、 pageswapとpagerevealなどのイベントが追加され、ドキュメント間のビュー遷移をコントロール出来るようになった。

また、遷移させる際に識別名を与える view-transition-name にautoが指定できるようになった。

text-box#

text-box-edge、text-box-trim 及び、これらのショートハンドである text-box のサポートが追加された。 要素の上部を文字列のキャップラインでトリミングするといったことが出来る。

現在は、Safari でのみ利用できる。

Scrollbar#

scrollbar-gutter と scrollbar-width のサポートが追加された。これらを利用すると、スクロールバーの余白の確保の仕方（auto、stable、both-edges など）や、スクロールバーの幅の傾向（auto、thin、none）を指定できる。

scrollbar-gutter については、次の記事が詳しい。

https://blog.ohirunewani.com/posts/scroll-bar-type/

また、文字列をターゲットにしたスクロールを可能にする text fragments の機能、及びスクロールを行う text fragments を装飾できる::target-text疑似要素のサポートも追加された。

Text Fragments の動作確認

Promise.try#

任意の関数を Promise のセマンティックスで簡単に扱えるPromise.tryがサポートされた。

1
Promise.try(func());

@page#

印刷時のページの大きさや余白を指定できるアットルール@pageが追加された。

次の記事が詳しい。

https://blog.ohirunewani.com/posts/css-print-style/

after API#

レスポンスや事前レンダリングの完了後にタスクを実行できる after API が安定版になった。 これを利用することで、レスポンスをブロックせずにログ記録や分析を行える。

https://nextjs.org/docs/app/api-reference/functions/after

1
import { after } from "next/server";
2
import { log } from "@/app/utils";
3

4
export default function Layout({ children }) {
5
  // Secondary task
6
  after(() => {
7
    log();
8
  });
9

10
  // Primary task
11
  return <>{children}</>;
12
}