#text-spacing-trim

text-spacing-trimプロパティを利用すれば、CJK の句読点や括弧を詰めることが出来ます。

このプロパティの各値は次のような効果をもたらします。

• normal：初期値。隣接している句読点や括弧のペアと行末を詰める。行頭は詰めない。
• trim-start：normal の行頭も詰める版。
• space-all：今までの表示。何も詰めない。
• space-first：normal の 1 行目以外の行頭も詰める版。

https://hrdtbs.github.io/sandbox/pages/css.text-spacing-trim.html

初期値でも効果があり現状 Chrome でしか利用できないため、Chrome 123 以前及び他のブラウザでの表示にズレが発生しています。

また、いくつか注意すべき点があります。

• メイリオや MS ゴシックなどいくつかのフォントには適用できない。
• font-feature-settings の palt や halt の方が優先される。

さらに、Yu Gothic UI に text-spacing-trim を適用するとバグることが分かっています。ただし、これはフォント側の問題で、font-feature-settings でも同様の問題が発生するようです。

Yu Gothic UI に text-spacing-trim を適用するとバグる

#light-dark() CSS function

CSS の light-dark()を利用すれば、ユーザー設定または指定された color-schema に応じて、色を切り替えることが出来ます。

:root {
  color-schema: light dark;
}
* {
  background-color: light-dark(ghostwhite, darkslategray);
  color: light-dark(darkslategray, ghostwhite);
}

https://hrdtbs.github.io/sandbox/pages/css.light-dark.html

#Block layout with align-content

Safari 17.4 に続いて、align-content を適用できるレイアウトが追加されました。 今まで利用できた flex や grid に加えて、block、list-item、table-cell に適用できます。

https://stackblitz.com/edit/js-6y3l4r?embed=1&file=index.html&hideExplorer=1&hideNavigation=1&view=preview

#field-sizing: content;

field-sizing: content を使用すれば、フォーム要素の大きさをコンテンツ依存に出来ます。min-width や max-height などとの併用も可能です。これは以前 form-sizing という名前で呼ばれていました。現状 Chrome でのみサポート。

元々扱いにくい textarea 要素での Chat のような UI での利用例が多く見られますが、個人的には input 要素や select 要素でも有効なケースがある気がします。

https://hrdtbs.github.io/sandbox/pages/css.form-sizing.html

#display-mode: picture-in-picture

display-mode: picture-in-pictureを利用すれば、PiP でのみ適用される CSS を記述できます。現状 Chrome でのみサポート。

@media all and (display-mode: picture-in-picture) {
  body {
    margin: 0;
  }
  h1 {
    font-size: 0.8em;
  }
}

#Long Animation Frames API

あまり有益な情報をもたらさなかった Long Tasks API の代替手段として Long Animation Frames API が追加されました。これを利用することで、INP の改善に役立つ情報を取得できます。

名前の通りこれは個々の Task ではなく一連の Animation Frame を、レンダリングの更新が 50ms を超えて遅延する Long Animation Frame のみを対象にします。

長いアニメーション フレーム API | Web Platform | Chrome for Developers

とりあえず、計測したければ次のコードを貼り付けましょう。

const observer = new PerformanceObserver((list) => {
  console.log(list.getEntries());
});

observer.observe({ type: "long-animation-frame", buffered: true });

次のようなデータが取れます。

[
  {
    name: "long-animation-frame",
    entryType: "long-animation-frame",
    startTime: 3513644.6000000015,
    duration: 51,
    renderStart: 3513665.3000000007,
    styleAndLayoutStart: 3513685.8999999985,
    firstUIEventTimestamp: 0,
    blockingDuration: 0,
    scripts: [
      {
        name: "script",
        entryType: "script",
        startTime: 3513651.1000000015,
        duration: 14,
        invoker: "MessagePort.onmessage",
        invokerType: "event-listener",
        windowAttribution: "self",
        executionStart: 3513651.1000000015,
        forcedStyleAndLayoutDuration: 0,
        pauseDuration: 0,
        sourceURL: "https://static.cdn.net/assets/vendor-9a...c.js",
        sourceFunctionName: "P",
        sourceCharPosition: 1174240,
      },
    ],
  },
  // ...
];

#Service Worker Static Routing API

Service Worker Static Routing API を利用すれば、ServiceWorker が起動する前に fetch して良いリソースをブラウザに伝えることが出来ます。

Use the Service Worker Static Routing API to bypass the service worker for specific paths | Blog | Chrome for Developers

ページが読み込まれた際に Service Worker が実行されていないと、フェッチは Service Worker を通る必要があるため、パフォーマンスコストが発生することがありますが、これを迂回させることが出来ます。

addEventListener("install", (event) => {
  event.addRoutes({
    condition: {
      urlPattern: "/articles/*",
      runningStatus: "running",
    },
    source: "fetch-event",
  });
});

#Easter Egg

DevTools にイースターエッグが仕込まれているらしい。

4 月 1 日は、Web サイトのパフォーマンスチューニングをしよう。

What’s new in DevTools (Chrome 123) | Blog | Chrome for Developers