Frontend Weekly 2024-05-17

フィードバックを受けるために OSS 化された、まだ実験的な機能。
- React v19 Beta 未満で利用するとエラーが出るようです。
Vite と Webpack つまり Remix や Next.js でも動く。
- Babel プラグインで提供されているので、Babel を使うように設定すれば使えるのは当たり前ではある。
- Next.js は、既に option での提供を準備しているようです。
- Babel で提供されたことに対してネガティヴな意見が見られるが、コアは Rust で分けて実装されているため、他の手段での提供も十分に考えられる。
react-compiler-healthcheck や eslint-plugin-react-compiler を利用することで、正常にコンポーネントやライブラリを最適化できるかを確認できる。
- React のルールに従っている、で問題なく動作することが条件のようです。
段階的に利用するために、ディレクトリ毎や、オプトインモード（アノテーションモード）によるコンポーネント・フック毎の React Compiler の導入もできる。
- compilationMode: "annotation" オプションを渡すことで、use clientのようにuse memoを付けたコンポーネントやフックのみに適用できる。ただし、これは早期採用者を支援するための機能とのこと。

Merging Remix and React Router#

新しい Remix は React Router v7 としてリリースする予定のようです。

Remix は以前から React Router のフレームワークのようなものでしたが、Vite プラグイン対応や SPA モードにより、Remix と React Router の差分がほぼなくなったことが理由として言及されています。

実際、Remix の機能のほとんどは React Router で既に利用できます。インポート元を@remix-run/*からreact-routerに切り替えるだけで利用できるようにする予定とのことです。この変更によって React Router から Remix への段階的な移行がよりしやすくなると思われます。

Merging Remix and React Router

WebKit Features in Safari 17.5#

5 月 13 日に Safari 17.5 がリリースされました。

WebKit Features in Safari 17.5

text-wrap: balance#

text-wrap: balance がサポートされました。このプロパティを指定すると、各行が均等な長さになるように改行されるようになります。

Safari のサポートによって、ほとんどの環境で利用できるようになりました。

light-dark()#

ライトモードとダークモードの色を指定できる light-dark()関数が追加されました。これも Safari のサポートにより、ほとんどの環境で利用できるようになりました。

1
color-scheme: light dark;
2
color: light-dark(black, white);

@starting-style#

@starting-style は、トランジションさせる要素の初期状態を指定できるアットルールです。これもほとんとの環境で利用できるようになりました。

1
[popover]:popover-open {
2
  opacity: 1;
3
  transform: scaleX(1);
4

5
  @starting-style {
6
    opacity: 0;
7
    transform: scaleX(0);
8
  }
9
}

Chrome 125#

Chrome 125 がリリースされました。

New in Chrome 125 | Blog | Chrome for Developers

CSS Anchor Positioning#

CSS Anchor Positioning は、CSS のみで指定された要素を基準に要素を配置する機能です。Chrome や Edge でしか現状利用できません。

Introducing the CSS anchor positioning API | Blog | Chrome for Developers

これは複数の新しいプロパティや値を含んでおり、色々なことが出来ます。以下に主なパターンを書き出しました。詳しくは記事を見てください。

1
.anchor {
2
  anchor-name: --anchor-el;
3
}
4
/* インセット領域を利用した配置 */
5
.anchored-notice-1 {
6
  position: absolute;
7
  /*  Anchor reference  */
8
  position-anchor: --anchor-el;
9
  /*  Position bottom of anchored elem at top center of anchor  */
10
  /* top, left, right, bottom, inline-(start|end), block-(start|end) */
11
  inset-area: top;
12
}
13
/* 絶対配置を利用した配置 */
14
.anchord-notice-2 {
15
  position: absolute;
16
  /*  Anchor reference  */
17
  position-anchor: --anchor-el;
18
  /*  Position bottom of positioned elem at top of anchor  */
19
  bottom: anchor(top);
20
  right: anchor(right);
21
  /*  Center justification to the anchor */
22
  justify-self: anchor-center;
23
}
24
.anchord-notice-3 {
25
  position: absolute;
26
  position-anchor: --anchor-el;
27
  inset-area: right span-bottom;
28
  /*
29
  * 配置位置をアンカーの位置に応じて変更する。
30
  */
31
  position-try-options: --bottom;
32
}
33
/* alternate position */
34
@position-try --bottom {
35
  inset-area: bottom;
36
}
37
.anchord-notice-4 {
38
  position: absolute;
39
  position-anchor: --anchor-el;
40
  inset-area: top;
41
  /* 自動的に反転させる flip-blockとflip-inlineの組み合わせ*/
42
  position-try-options: flip-block;
43
}
44
.anchord-notice-5 {
45
  position: fixed;
46
  position-anchor: --anchor-el;
47
  /* アンカーが表示されている間、配置された要素を表示し続ける */
48
  position-visibility: anchors-visible;
49
  bottom: anchor(top);
50
}

DEMO:

Anchor position tool

Compute Pressure API#

Compute Pressure API がサポートされました。現状 Chrome ぐらいでしか利用できません。

Compute Pressure API | Web Platform | Chrome for Developers

Compute Pressure API は、大きな負荷の変化を検出できます。これによりビデオ会議 Web アプリなどのリアルタイムアプリケーションで、負荷が高まった際に画質を落とすなどの対応ができます。

1
function callback(records) {
2
  const lastRecord = records[records.length - 1];
3
  console.log(`Current pressure ${lastRecord.state}`);
4
  if (lastRecord.state === "critical") {
5
    // disable video feeds
6
  } else if (lastRecord.state === "serious") {
7
    // disable video filter effects
8
  } else {
9
    // enable all video feeds and filter effects
10
  }
11
}
12

13
const observer = new PressureObserver(callback);
14
await observer.observe("cpu", {
15
  sampleInterval: 1000, // 1000ms
16
});

Storage Access API はクロスサイト Cookie の代替として導入された API です。iframe などを通して別のサイトに埋め込まれたコンテンツに対してサードパーティー Cookie へのアクセスを提供していました。Chrome 125 から indexedDB や localStorage など Cookie 以外のストレージにもアクセスできるようになりました。

Storage Access API - Web API | MDN

Storage Access API の使用 - Web API | MDN

CSS round(), mod(), rem()#

round()は指定に応じて、四捨五入や切り捨て・切り上げを行います。Chrome のサポートにより、ほとんどの環境で利用できるようになりました。

https://developer.mozilla.org/en-US/docs/Web/CSS/round

mod()、rem()は名前の通りです。

1
/* Math.round相当。デフォルトはnearest */
2
width: round(var(--width), 50px);
3
/* Math.ceil相当 */
4
width: round(up, 101px, var(--interval));
5
/* Math.floor相当 */
6
width: round(down, var(--height), var(--interval));
7
/* Math.tranc相当 */
8
margin: round(to-zero, -105px, 10px);
9
margin: mod(29vmin, 6vmin); /* 5vmin */
10
rotate: mod(135deg, -90deg); /* -45deg */
11
line-height: rem(21, 2); /* 1 */
12
rotate: rem(140deg, -90deg); /* 50deg */