text-wrap: balance#

text-wrap: balanceを利用すれば、長い文字列をそれぞれの行の長さができるだけ等しくなるように改行できます。

これを利用すれば多言語サイトで、言語毎に見た目を微調整するといったケースを少し回避できるかもしれません。ただし現状 Chrome 以外でtext-wrapはサポートされていないので、使用できる機会はかなり限られます。

Popover API#

Popover API を利用すれば、一時的な UI 要素、ユーザーの行動を制限しない非モーダルなオーバーレイ、ポップアップ、ポップオーバー、ダイアログなどを簡単に実装できます。

モーダルつまり、それ自身が何らかのインタラクションを行うまでユーザーの行動を制限したい場合は、既に主要なブラウザで利用できる dialog 要素が推奨されます。ただし、dialog 要素はデフォルトで最上位レイヤーに来ないため、最上位に配置される Popover API を併用したくなることは多々あるように思います。

Popover API には、HTML 属性を利用した宣言的な方法と JavaScript を利用する方法が用意されています。HTML 属性を利用した方法では次のようにします。

1
<button popovertarget="my-popover">押すとポップオーバーが表示される</button>
2

3
<div id="my-popover" popover>
4
  <p>これはポップオーバーです。</p>
5
  <p></p>
6
</div>

詳しい使い方については、次の Chrome の記事などを呼んでください。

https://developer.chrome.com/blog/introducing-popover-api/

現時点では、Chrome 及び Safari の Technology Preview でのみ利用できます。

CSS Nesting#

CSS Nesting が Safari でもサポートされました。これで Chrome/Edge/Safari に CSS Nesting が出揃いました。

Chrome の際に説明した気がするので詳細は省きますが、次のように記述できます。

1
.nesting {
2
  color: hotpink;
3

4
  > .is {
5
    color: rebeccapurple;
6

7
    > .awesome {
8
      color: deeppink;
9
    }
10
  }
11
}

https://developer.chrome.com/articles/css-nesting

SWC minifier#

デフォルトの minifier が Terser から SWC に変更されました。動作は約 7 倍高速であり、出力サイズは同等以下とのことです。Terser 設定ファイルやオプションをほぼそのまま利用できるようになっているそうです。

Local plugin#

プラグインを parcelrc 設定ファイルから相対パスで参照できるようになりました。これにより新しいプラグインのプロトタイピングが容易になったので、今後プラグインの開発がより活性化するといいですね。

New resolver#

Parcel に欠けていた package.json の”exports”や tsconfig.json の”baseUrl”、“paths”、“moduleSuffixes”のサポートを追加した Rust 製の新しいリゾルバが導入されました。

ESM plugins and configs#

Parcel は、ESM モジュールに対するプラグインと設定ファイルのサポートを追加しました。これにより、プラグインを mjs 形式で npm に公開したり、package.json で”type”: “module”を使用して js ファイルで ESM 構文を有効にしたりできます。また、postcss.config.mjs などの設定ファイルもサポートされています。