mugi

<p>2022/7/13に、フロントエンドツールである Vite のバージョン 3.0 がリリースされました 🎉</p>
<ul>
<li><a href="https://vitejs.dev/blog/announcing-vite3.html">Vite 3.0 is out! | Vite</a></li>
<li><a href="https://github.com/vitejs/vite/blob/v3.0.0/packages/vite/CHANGELOG.md">CHANGELOG</a></li>
<li><a href="https://vitejs.dev/guide/migration.html">Migration from v2 | Vite</a></li>
</ul>
<p>このエントリーでは、リリース時に公開されたアナウンス(<a href="https://github.com/vitejs/vite/releases/tag/v3.0.0">Release v3.0.0 · vitejs/vite</a>)の内容をベースに、変更点を改めて１つずつ掘り下げて確認してみます。</p>
<h3>New Documentation</h3>
<p>公式ドキュメント(<a href="https://ja.vitejs.dev/">vitejs.dev</a>)が <a href="https://vitepress.vuejs.org/">VitePress</a> のデフォルトテーマを利用した形で刷新されました。ダークテーマ表示などが可能になっています。</p>
<p>また、あわせて次のサブドメインでもドキュメントを閲覧できるようになっています。</p>
<ul>
<li><a href="https://v2.vitejs.dev/">v2.vitejs.dev</a> - Vite 2.x 系のドキュメント</li>
<li><a href="https://main.vitejs.dev/">main.vitejs.dev</a> - Vite のメインブランチの内容</li>
</ul>
<h3>Create Vite Starter Templates</h3>
<p>Vite プロジェクトの Scaffold ジェネレータである <a href="https://github.com/vitejs/vite/tree/main/packages/create-vite"><code>create-vite</code></a> について、Vite 3.x が利用されるようになりました。</p>
<h3>Dev Improvements</h3>
<h4>Vite CLI</h4>
<p>デフォルトの開発サーバーポートが <code>5173</code>、プレビューサーバーのポートが <code>4173</code> に変更されました。デフォルトポートは以前は <code>3000</code> と <code>5000</code> でしたが、MacOS でポートの衝突が発生するなどの<a href="https://github.com/vitejs/vite/issues/5707">問題があった</a>ようです。</p>
<p>ちなみになぜ <code>5173</code> という中途半端な数字なのだろう？と思い調べてみましたが、以下の Issue コメントを見つけました。</p>
<p><a href="https://github.com/vitejs/vite/pull/6330#issuecomment-1003405068">https://github.com/vitejs/vite/pull/6330#issuecomment-1003405068</a></p>
<div class="remark-highlight"><pre class="language-unknown"><code class="language-unknown">At a team meeting we thought about 5173
Like 5173 in leet for Vite | V I T Ǝ | V === Roman 5</code></pre></div>
<ul>
<li>V … 5</li>
<li>I … 1</li>
<li>T … 7</li>
<li>Ǝ … 3</li>
</ul>
<p>らしいです。cool</p>
<h4>Improved WebSocket Connection Strategy</h4>
<p>Vite 2.x までは、Proxy を経由したサーバー確立に課題があったとのことで、3.0 からはそれが改善されました。</p>
<p><a href="https://github.com/sapphi-red/vite-setup-catalogue"><code>vite-setup-catalogue</code></a> というセットアップのサンプルリポジトリ内にも追加されたことで、今後は同パターンは CI で検証されるようになったとのことです。</p>
<h4>Cold Start Improvements</h4>
<p>コールドスタート時に依存関係を後から解決する際に、依存の状態によってはフルリロードが発生する可能性があったのが、ブラウザに依存を渡すタイミングを調整することで効率化され、回避可能になったようです。</p>
<p>詳細: <a href="https://github.com/vitejs/vite/pull/8869#issuecomment-1172902125">https://github.com/vitejs/vite/pull/8869#issuecomment-1172902125</a></p>
<h4>import.meta.glob</h4>
<p>Vite では以前から <a href="https://vitejs.dev/guide/features.html#glob-import"><code>Glob Import</code></a> と呼ばれる機能が存在し、特別な関数 <code>import.meta.glob</code> を介して glob 形式で記述してのモジュール一括インポートが可能です。</p>
<p>Vite 3.0 では機能が強化され、より柔軟な指定が可能になりました。</p>
<ul>
<li>Multiple Patterns : 複数の glob パターンの記述</li>
<li>Negative Patterns : 除外パターンの記述</li>
<li>Named Imports : モジュールの一部のみを指定可能</li>
<li>Custom Queries : クエリの付与</li>
<li>Eager Imports : Dynamic import の回避</li>
</ul>
<h4>Aligning WASM Import with Future Standards</h4>
<p>Vite 2.x から WebAssembly を</p>
<div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword module">import</span> <span class="token imports">init</span> <span class="token keyword module">from</span> <span class="token string">'./example.wasm'</span>
</code></pre></div>
<p>の形で import できましたが、将来的に ESM の仕様として WebAssembly が統合された場合のバッティングを考慮し、</p>
<div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword module">import</span> <span class="token imports">init</span> <span class="token keyword module">from</span> <span class="token string">'./example.wasm?init'</span>
</code></pre></div>
<p>と、<code>?init</code> オプションが付与された場合に Vite 2.x 以前と同様の挙動になるよう変更されました。</p>
<p>現状で <code>?init</code> オプションを付与せずに ESM として処理する場合には <a href="https://github.com/Menci/vite-plugin-wasm"><code>vite-plugin-wasm</code></a>のようなプラグインの利用が必須となります。</p>
<h3>Build Improvements</h3>
<h4>ESM SSR Build by Default</h4>
<p>SSR 用フレームワークの大半が ESM ビルドを利用するようになったため、
Vite3 では SSR ビルドのデフォルト形式が ESM に変更されました。</p>
<p>Vite では、モジュールの形式(CommonJS/ESM)などに応じて、適宜 Vite の変換から切り離す（外部化する）ことで SSR 時の処理を効率化しています。</p>
<p>参考: <a href="https://v2.vitejs.dev/guide/ssr.html#ssr-externals">https://v2.vitejs.dev/guide/ssr.html#ssr-externals</a></p>
<p>ESM がデフォルトになったことで、デフォルトで外部化される依存が増え、より効率的に SSR ビルドが可能になるようです。</p>
<p>なお、ESM になると困るケースのために <code>legacy.buildSsrCjsExternalHeuristics: true</code> というオプションも用意されているようです。</p>
<h4>Improved Relative Base Support</h4>
<p><code>base</code> に <code>''</code> を指定することで、相対的なベースパスの指定ができるようになりました。
ビルドの段階でベースパスが不明なケースなどで役に立つようです。</p>
<h3>Experimental Features</h3>
<h4>Built Asset Paths fine-grained Control (Experimental)</h4>
<p><code>experimental.renderBuiltUrl</code> オプションが Experimental 機能として導入されました。</p>
<p>CDN での配布などを前提とした場合、ビルドによって生成されたアセットのうち一部のみ URL が異なるケースが考えられます。</p>
<p><code>experimental.renderBuiltUrl</code> を指定することで、ファイル名・ファイルタイプなどを利用して URL を切り分けられるようになります。</p>
<p>※公式ドキュメントよりコードを抜粋
<a href="https://vitejs.dev/guide/build.html#advanced-base-options">https://vitejs.dev/guide/build.html#advanced-base-options</a></p>
<div class="remark-highlight"><pre class="language-ts"><code class="language-ts">experimental<span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token function">renderBuiltUrl</span><span class="token punctuation">(</span>filename<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> hostType<span class="token operator">:</span> <span class="token string">'js'</span> <span class="token operator">|</span> <span class="token string">'css'</span> <span class="token operator">|</span> <span class="token string">'html'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">'public'</span> <span class="token operator">|</span> <span class="token string">'asset'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'public'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token string">'https://www.domain.com/'</span> <span class="token operator">+</span> filename
    <span class="token punctuation">}</span>
    <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>path<span class="token punctuation">.</span><span class="token function">extname</span><span class="token punctuation">(</span>importer<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">'.js'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span> runtime<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">window.__assetsPath(</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>filename<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">)</span><span class="token template-punctuation string">`</span></span> <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">else</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token string">'https://cdn.domain.com/assets/'</span> <span class="token operator">+</span> filename
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div>
<h4>Esbuild Deps Optimization at Build Time (Experimental)</h4>
<p><code>optimizeDeps.disabled: false</code> 指定が Experimental 機能として可能になりました。
<a href="https://vitejs.dev/guide/migration.html#experimental">https://vitejs.dev/guide/migration.html#experimental</a></p>
<p>Vite はデフォルトでは開発時には esbuild を用い、ビルド時には Rollup を利用します。
開発時とビルド時で異なるツールを利用するため、Vite を利用する際に考慮すべき大きい要素の一つとして挙げられます。</p>
<p>参考: <a href="https://vitejs.dev/guide/why.html#why-not-bundle-with-esbuild">Why Not Bundle with esbuild?</a></p>
<p><code>optimizeDeps.disabled: false</code> を用いると、ビルド時にも esbuild を利用するようになります。</p>
<p>CJS のみの依存関係も ESM に変換されるため、<code>@rollup/plugin-commonjs</code> プラグインが不要となります。</p>
<h4>HMR Partial Accept (Experimental)</h4>
<p><code>experimental.hmrPartialAccept</code> オプションが Experimental 機能として導入されました。</p>
<p>Vite ではフレームワークやツールの作成者向けに HMR 用の API を公開しています。
<a href="https://vitejs.dev/guide/api-hmr.html">https://vitejs.dev/guide/api-hmr.html</a></p>
<p>現状の HMR API の仕組みでは、HMR 可能なモジュールとそうでないモジュールが混在していたファイルの場合、
モジュールを部分的に差し替えることができず、非効率な更新が発生する可能性があります。</p>
<p>参考: <a href="https://github.com/vitejs/vite/discussions/7309">HMR partial accept · Discussion #7309 · vitejs/vite</a></p>
<p>新しい API である <code>import.meta.hot.acceptExports</code> と組み合わせることで、
export されているモジュールについてより詳細かつ効率的に HMR の制御が可能になります。</p>
<h3>Bundle Size Reduction</h3>
<p>Vite 自体のサイズが小さくなりました。30%ほど軽量化されたそうです。</p>
<p>Minify 用の Terser がオプションになったことや、 <code>node-forge</code> が <code>vitejs/plugin-basic-ssl</code> というプラグインに置き換わったことに起因しているようです。</p>
<h3>Compatibility Notes</h3>
<ul>
<li>Node.js のサポートバージョンが 14.18+ / 16+ になりました</li>
<li>Vite 自体が ESM として公開されています。CJS経由で利用する場合は CJS Proxy 経由となります
<ul>
<li>参考: teppeis/<a href="https://zenn.dev/teppeis/articles/2022-07-npm-dual-pacakge-cjs-proxy">Vite 3 が採用した CJS Proxy による Dual Package 構成</a></li>
</ul>
</li>
<li>サポートブラウザの基準が <code>"Native ESM"</code> <code>"Native ESM dynamic import"</code> <code>"import.meta"</code> の機能をサポートしているブラウザになりました</li>
<li>SSR および ライブラリモードにおいて、JS の拡張子はフォーマットやパッケージタイプに応じて適切な拡張子が選択されるようになりました</li>
</ul>
<p>ブラウザバージョンが変わった点は注意が必要になるかもしれません。
Migration Guide によると、主要ブラウザでは次のバージョンがサポート対象になるようです。</p>
<ul>
<li>Chrome >=87</li>
<li>Firefox >=78</li>
<li>Safari >=13</li>
<li>Edge >=88</li>
</ul>
<hr>
<p>というわけで簡単な Vite 3.0 の内容のおさらいでした。</p>
<p>Vite はもともと Native ESM を前提とした仕組みをフル活用していることもあってか、
今回の変更点でも ESM を考慮した変更が多く入った印象を受けます。</p>
<p>個人的には、まだ Experimental ではありますが <code>Esbuild Deps Optimization at Build Time</code> にある、
ビルド時にも esbuild を利用可能になる未来が楽しみです。</p>


<p>🔗 <a href="https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/">https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/</a></p>
<p>Safari 15.4 がリリースされました 🎉<br>
これまで Technology Preview として公開されていた様々な変更が含まれています。</p>
<h2>HTML</h2>
<ul>
<li>遅延読み込みのための <code>lazy-loading</code> のサポート
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading">https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading</a></li>
</ul>
</li>
<li><code>&#x3C;dialog></code> Element のサポート
<ul>
<li><a href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element</a></li>
</ul>
</li>
<li><code>::backdrop</code> 疑似要素のサポート
<ul>
<li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/::backdrop">https://developer.mozilla.org/ja/docs/Web/CSS/::backdrop</a></li>
</ul>
</li>
<li><code>autofocus</code> 属性のサポート
<ul>
<li>dialog 表示時にどの要素にフォーカスをセットするかを指定できる</li>
</ul>
</li>
</ul>
<h2>CSS</h2>
<h3>Features for CSS Architecture</h3>
<ul>
<li><code>:has()</code> のサポート (現状 Safari のみサポート)
<ul>
<li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/:has">https://developer.mozilla.org/ja/docs/Web/CSS/:has</a></li>
</ul>
</li>
<li>CSS Cascade Layers のサポート
<ul>
<li>FEE チームの @nus3 が書いた CSS Cascade Layers の紹介エントリ: <a href="https://cybozu.github.io/frontend-expert/posts/css-cascade-layers">https://cybozu.github.io/frontend-expert/posts/css-cascade-layers</a>)</li>
</ul>
</li>
</ul>
<h3>Solving Pain Points</h3>
<ul>
<li>主にモバイル向けに、viewport に応じた新しい値の指定が可能に
<ul>
<li><code>svh</code>, <code>svw</code> → メニューバーなどを除いた最小の viewport</li>
<li><code>dvh</code>, <code>dvw</code> → スクロールによるメニューバーなどの表示切り替えに応じて変化する viewport</li>
<li><code>lvh</code>, <code>lvw</code> → メニューバーなどが存在しない状態を想定した最大の viewport</li>
<li><code>svmin</code>, <code>svmax</code>, <code>lvmin</code>, <code>lvmax</code>, <code>dvmin</code>, <code>dvmax</code> → <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code> の上記 CSS 値版 (幅, 高さに対する割合指定)</li>
</ul>
</li>
<li><code>:focus-visible</code> 疑似要素のサポート</li>
<li><code>accent-color</code> プロパティのサポート
<ul>
<li>checkbox, radio, progress, select, datalist (iPad OS と iOS のみ range, button) にアクセントカラー指定が可能になる</li>
</ul>
</li>
<li><code>calc()</code> 数学関数のサポート</li>
</ul>
<h3>Typography</h3>
<ul>
<li><code>font-palette</code> と <code>@font-palette-values</code> CSS プロパティのサポート
<ul>
<li>カラーフォントに含まれるパレットの指定と、カラーパレットの独自定義</li>
</ul>
</li>
<li><code>text-decoration-skip-ink</code> CSS プロパティのサポート
<ul>
<li>text-decoration (underline とか)を文字に被らず表示できる</li>
</ul>
</li>
<li><code>ic</code> 単位のサポート
<ul>
<li><code>1ic</code> が <code>水</code> の文字の幅と同等になる</li>
</ul>
</li>
</ul>
<h3>Retiring WebKit prefixes</h3>
<ul>
<li><code>-webkit</code> vendor prefix の付与が必要だった様々なプロパティが廃止。また、廃止に伴い prefix 不要で利用可能なプロパティのサポート追加
<ul>
<li><code>appearance</code></li>
<li><code>mask</code></li>
<li><code>backface-visibility</code></li>
<li><code>text-combine-upright</code></li>
<li><code>print-color-adjust</code></li>
<li><code>match-parent</code> (<code>text-align</code> プロパティに指定可能な値)</li>
<li>削除: <code>-webkit-border-fit</code>, <code>-webkit-margin-collapse</code>, <code>-webkit-margin-top-collapse</code>, <code>-webkit-margin-bottom-collapse</code>, <code>-webkit-margin-before-collapse</code>, <code>-webkit-margin-after-collapse</code>, <code>-webkit-background-composite</code></li>
</ul>
</li>
</ul>
<h2>Web APIs</h2>
<ul>
<li>BroadcastCannel のサポート
<ul>
<li><a href="https://html.spec.whatwg.org/multipage/web-messaging.html#broadcasting-to-other-browsing-contexts">https://html.spec.whatwg.org/multipage/web-messaging.html#broadcasting-to-other-browsing-contexts</a></li>
<li>タブ、ウィンドウ、iframe, worker の相互通信が可能になる</li>
</ul>
</li>
<li>Web Locks API のサポート
<ul>
<li><a href="https://w3c.github.io/web-locks/">https://w3c.github.io/web-locks/</a></li>
<li>タブ、ウィンドウ、iframe, worker 間でリソースのロックコントロールを行う</li>
</ul>
</li>
<li><code>scroll-behavior</code> または <code>window.scroll()</code>, <code>window.scrollTo()</code>, <code>window.scrollBy()</code> の <code>behivior</code> オプションでスクロール制御を可能に</li>
<li><code>ResizeObserver API</code> で <code>ResizeObserverSize</code> インタフェースのサポート
<ul>
<li>対象要素の <code>box-sizing</code> プロパティの変更を監視可能に</li>
</ul>
</li>
<li><code>structuredClone</code> のサポート
<ul>
<li>DeepClone</li>
<li>Chrome/Edge/Firefox/Safari のすべてがサポートされました 🎉</li>
</ul>
</li>
<li><code>Origin Private File System</code> のサポート
<ul>
<li>詳細はこちら: <a href="https://webkit.org/blog/12257/the-file-system-access-api-with-origin-private-file-system/">https://webkit.org/blog/12257/the-file-system-access-api-with-origin-private-file-system/</a></li>
</ul>
</li>
</ul>
<h2>JavaScript</h2>
<ul>
<li><code>findLast()</code>, <code>findLastIndex()</code> メソッドのサポート</li>
<li><code>at()</code> のサポート</li>
<li><code>Object.hasOwn()</code> のサポート</li>
</ul>
<h3>Internationalization</h3>
<ul>
<li><code>Intl Enumeration API</code> (<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl">https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl</a>) の強化
<ul>
<li><code>Intl.Locale</code> で、暦週・書く方向・12h/24h のサイクル・番号システムといった情報を取得可能になった</li>
<li><code>Intl.DisplayNames</code> で calendar・dateTimeField のサポート追加および languageDisplay オプションのサポート</li>
<li><code>Intl.PluralRules</code> に <code>selectRange()</code> メソッドの追加
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/selectRange">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/selectRange</a></li>
<li><a href="https://unicode-org.github.io/cldr-staging/charts/37/supplemental/language_plural_rules.html#rules">https://unicode-org.github.io/cldr-staging/charts/37/supplemental/language_plural_rules.html#rules</a> に従い、数値の複数形のルールを示す文字列を得る</li>
</ul>
</li>
<li><code>Intl.NumberFormat</code> に <code>formatRange()</code> と <code>formatRangeToParts()</code> メソッドの追加
<ul>
<li>数値範囲を示す文字列にフォーマットする</li>
</ul>
</li>
<li><code>Intl.DateTimeFormat</code> に 複数の <code>timeZoneName</code> オプションの追加</li>
</ul>
</li>
</ul>
<h2>Web Apps</h2>
<ul>
<li>Web App Manifest 周りのアップデート (≒ PWA 絡みでのアップデート)
<ul>
<li>Manifest ファイルをページロード時に常にフェッチするようになる</li>
<li>Manifest ファイルでのアイコン宣言のサポート
<ul>
<li><code>purpose</code> 指定に応じて <code>apple-touch-icon</code> 以外のアイコンを利用する</li>
</ul>
</li>
<li>ServiceWorker で Navigation Preload が使えるように
<ul>
<li>ServiceWorker の起動時のブロッキングを回避できるように</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2>Media</h2>
<ul>
<li>WebRTC negotiation API が WebRTC 1.0 仕様に準拠</li>
<li>in-band chapter tracks のサポート
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/TextTrack/kind">https://developer.mozilla.org/en-US/docs/Web/API/TextTrack/kind</a></li>
</ul>
</li>
<li><code>&#x3C;video></code> で <code>requestVideoFrameCallback()</code> のサポート追加
<ul>
<li>ビデオフレームの表示可能タイミングでのコールバックとメタデータ受け取りが可能になる</li>
</ul>
</li>
</ul>
<h2>Privacy</h2>
<ul>
<li>Private Click Measurement (<a href="https://webkit.org/blog/11940/pcm-click-fraud-prevention-and-attribution-sent-to-advertiser/">https://webkit.org/blog/11940/pcm-click-fraud-prevention-and-attribution-sent-to-advertiser/</a>) 周りで幾つかのアップデート</li>
</ul>
<h2>Security</h2>
<ul>
<li>Inline Script / Style / eval などでリソースがブロックされた場合のレポートが Web 標準にあわせて更新</li>
<li>XSS 対策機能の XSS Auditor サポート削除 (CSP や COEP で代替)</li>
</ul>
<h2>WKWebView</h2>
<ul>
<li>iOS, iPadOS, macOS 上のアプリケーションの場合、FullScreen API 利用の制御が可能になった</li>
<li>iPadOS で Media Source Extensions を利用するコンテンツが動作するようになった
<ul>
<li><a href="https://developer.mozilla.org/ja/docs/Web/API/Media_Source_Extensions_API">https://developer.mozilla.org/ja/docs/Web/API/Media_Source_Extensions_API</a></li>
</ul>
</li>
</ul>
<h2>Safari Web Extensions</h2>
<ul>
<li>クロスブラウザでの拡張機能サポートに伴う <code>manifest_version 3</code> のサポートなど
<ul>
<li>バックグラウンドスクリプトで <code>service_worker</code> のサポート</li>
<li><code>browser.scripting</code> によるスクリプトとスタイルのインジェクション</li>
<li><code>browser.declarativeNetRequest</code> を介したネットワークリクエストの動的ルールやセッションルール</li>
<li><code>externally_connectable:matches</code> による、Web ページから拡張機能へのメッセージング</li>
</ul>
</li>
</ul>
<h2>Web Inspector</h2>
<ul>
<li>CSS Cascade Layer サポート追加に伴い、Web Inspector 上で <code>@layer</code> ルールセットが確認可能になった</li>
<li>Flexbox および Grid で、視覚的なコントロールの追加</li>
<li>Style パネルでのプロパティや値の変更時の自動補完の強化</li>
<li>CSS 表示の改善。未使用の継承値の非表示や、フィルタによる検索、種類でのグループ化など</li>
</ul>
<hr>
<p><code>&#x3C;dialog></code> のサポートや <code>:focus-visible</code> などは身近な感じがありますね。</p>
<p>また、Web Extensions で manifest_version 3 のサポートが強化されたことで、クロスブラウザ向けのブラウザ拡張で Safari も含めやすくなるかもしれません。</p>


<p>先日 Safari 15 がリリースされました。
<a href="https://webkit.org/blog/11989/new-webkit-features-in-safari-15/">https://webkit.org/blog/11989/new-webkit-features-in-safari-15/</a></p>
<p>影響の大きそうな箇所や、知っておいたほうが良さそうな箇所を中心に紹介します。</p>
<h2>HTML</h2>
<h3>theme-color</h3>
<p>meta タグ上での <code>theme-color</code> のサポートが追加されました。
指定することで、ブラウザのメニューバーやタブバーといった領域のカラーを変更することができます。 <code>prefers-color-scheme</code> と併用することで、ダークモード/ライトモードに応じた色の指定もできます。</p>
<p><a href="https://developer.apple.com/videos/play/wwdc2021/10029/">Design for Safari 15</a></p>
<h2>CSS</h2>
<h3><code>aspect-ratio</code> プロパティのサポート</h3>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio">aspect-ratio - CSS: Cascading Style Sheets | MDN</a></p>
<h3><code>lab()</code> <code>lch()</code> <code>hwb()</code> シンタックスのサポート</h3>
<p><a href="https://www.w3.org/TR/css-color-4/">W3C Color Module Level 4</a>に沿った新しいカラーシンタックス <code>lab()</code> <code>lch()</code> <code>hwb()</code> が利用可能になりました。</p>
<h3>list-style-type に設定可能な値が追加</h3>
<p>li 要素など、リストアイテム要素のマーカーを指定するための <code>list-style-type</code> 新たに 12 個の値が設定可能になりました。</p>
<p>MDN のデモで値に応じた表示を確認することができます。</p>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type#result_2">https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type#result_2</a></p>
<h2>Web Inspector</h2>
<p>CSS Grid に対応したオーバレイ表示が可能になりました。</p>
<p><a href="https://webkit.org/blog/11588/introducing-css-grid-inspector/">https://webkit.org/blog/11588/introducing-css-grid-inspector/</a></p>
<p>デバッグ用のブレークポイント周りなどにも改善が施されています。その他の変更点は WWDC2021 の発表動画に含まれます。</p>
<p><a href="https://developer.apple.com/videos/play/wwdc2021/10031/">Discover Web Inspector improvements - WWDC21 - Videos - Apple Developer</a></p>
<h2>JavaScript and WebAssembly</h2>
<p>Worker や ServiceWorker で ES6 Modules のサポートが追加されました。</p>
<p>また、JavaScript エンジンで次の機能がサポートされました。</p>
<ul>
<li>top-level <code>await</code></li>
<li><code>Error.cause</code></li>
<li>プライベートクラスメソッド とアクセサ</li>
<li><code>BigInt64Array</code> および <code>BigUint64Array</code></li>
</ul>
<p>WebAssembly では次のサポートが追加されました。</p>
<ul>
<li>streaming compilation</li>
<li>bulk memory operations</li>
<li>reference types</li>
<li>non-trapping conversions from <code>float</code> to <code>int</code></li>
</ul>
<p><a href="https://github.com/WebAssembly/spec/tree/main/proposals">WebAssembly/spec - proposals</a>
<a href="https://developer.apple.com/videos/play/wwdc2021/10030">Develop advanced web content - WWDC21 - Videos - Apple Developer</a></p>
<h2>Web APIs</h2>
<h3>WebGL2 に対応</h3>
<p>WebGL2 に対応し、かつ Apple の グラフィック API の Metal 上で動作するようになり、パフォーマンスが向上しました。</p>
<h3>Web Share API Level 2 の実装</h3>
<p>Web Share API Level 2 の実装により、Web ページからアプリへのファイル共有が可能になりました。</p>
<p><a href="https://developer.apple.com/videos/play/wwdc2021/10030">Develop advanced web content - WWDC21 - Videos - Apple Developer</a></p>
<h2>Media</h2>
<ul>
<li>MediaSession API のサポートの追加</li>
</ul>
<p><a href="https://developer.apple.com/videos/play/wwdc2021/10189/">Coordinate media playback in Safari with Group Activities - WWDC21 - Videos - Apple Developer</a></p>
<h2>Security and Privacy</h2>
<h3>自動 HTTPS アップグレードのサポート</h3>
<p>http と https の双方が利用可能なページの場合、自動で https を利用するようになります。</p>
<h2>所感</h2>
<p><code>aspect-ratio</code> が 主要 4 ブラウザ(Chrome/Safari/Firefox/Edge)すべてで利用可能になりましたね。今後利用するケースが徐々に増えていきそうです。</p>
<p>余談ですが、<code>list-style-type</code> に <code>japanese-formal</code> を指定すると <code>壱・弐・参・四・伍…</code> になるのですね。カッコいいです。</p>
