Frontend Weekly 2024-03-28

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 に応じて、色を切り替えることが出来ます。

1
:root {
2
  color-schema: light dark;
3
}
4
* {
5
  background-color: light-dark(ghostwhite, darkslategray);
6
  color: light-dark(darkslategray, ghostwhite);
7
}

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 でのみサポート。

1
@media all and (display-mode: picture-in-picture) {
2
  body {
3
    margin: 0;
4
  }
5
  h1 {
6
    font-size: 0.8em;
7
  }
8
}

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

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

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

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

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

1
[
2
  {
3
    name: "long-animation-frame",
4
    entryType: "long-animation-frame",
5
    startTime: 3513644.6000000015,
6
    duration: 51,
7
    renderStart: 3513665.3000000007,
8
    styleAndLayoutStart: 3513685.8999999985,
9
    firstUIEventTimestamp: 0,
10
    blockingDuration: 0,
11
    scripts: [
12
      {
13
        name: "script",
14
        entryType: "script",
15
        startTime: 3513651.1000000015,
16
        duration: 14,
17
        invoker: "MessagePort.onmessage",
18
        invokerType: "event-listener",
19
        windowAttribution: "self",
20
        executionStart: 3513651.1000000015,
21
        forcedStyleAndLayoutDuration: 0,
22
        pauseDuration: 0,
23
        sourceURL: "https://static.cdn.net/assets/vendor-9a...c.js",
24
        sourceFunctionName: "P",
25
        sourceCharPosition: 1174240,
26
      },
27
    ],
28
  },
29
  // ...
30
];

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 を通る必要があるため、パフォーマンスコストが発生することがありますが、これを迂回させることが出来ます。

1
addEventListener("install", (event) => {
2
  event.addRoutes({
3
    condition: {
4
      urlPattern: "/articles/*",
5
      runningStatus: "running",
6
    },
7
    source: "fetch-event",
8
  });
9
});

Easter Egg#

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

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

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