Frontend Weekly 2024-03-28
Chrome 123のtext-spacing-trim、light-dark() CSS function、Block layout with align-content、field-sizing: content;、display-mode: picture-in-picture、Long Animation Frames API、Service Worker Static Routing APIなどについて紹介する。
Chrome 123
2024年3月19日にChrome 123がリリースされました。
Chrome 123 の新機能 | Blog | Chrome for Developers
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に適用できます。
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して良いリソースをブラウザに伝えることが出来ます。
ページが読み込まれた際に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
Others
“Reactが使いたいわけではなくjsxが使いたい Nextが使いたいわけではなくファイルベースルーティングとSSR、Layoutsが使いたい” みたいな人にhonoは良いのかもしれない。
HonoXでshadcn/uiを使用する | yossy.dev
Twitter(X)のDigital Asset Links対応
https://x.com/agektmr/status/1772553296009404645?s=20
Google Scholar PDF Reader
PDF論文を読みやすくことを目的としてGoogle製Chrome拡張
Google、PDF論文を劇的に読みやすくするChrome拡張「Google Scholar PDF Reader」
NetlifyがNext.jsのApp Routerをサポートした
長い間experimentalだったVitePressが1.0に。
VitePressという名前だが、VuePressの後継でありVueしか使えない。
Announcing VitePress 1.0 | The Vue Point
Node.js v20.11.0でサポートされたCJSのdirnameやfilename互換であるESMのimport.meta.dirname、import.meta.filenameについて。
__dirname is back in Node.js with ES modules
色々なリアルタイム通信手法、読んでない
アクセシビリティチェックを実際どうのようにやるのか。
アクセシビリティチェックってどうやってるの？ということで、実際にやってみた。（その1） - 水底の血
よくまとまっている。見出しの話は、二転三転しており、articleやblockquoteなどのいくつかの要素で独立している場合、それらの見出しはh1からはじまるべきという話があった。これが今のふわっとした形式に戻ったのは結構最近。
公式の、統一された、安定的なURLを求めるのであればhttps://www.rfc-editor.org/rfc/rfc9110.htmlを用いると良い。
RFC の URL はどのドメインで貼るのが良いか | blog.jxck.io
JSのエンジンとランタイム区別できてるか？
What’s the difference between JavaScript engines and JavaScript runtimes? - Human Who Codes
関連するファイルを開いておくのおすすめ。開いているファイルを読み込んで結果を返してくれる。
GitHub、Copilotでより高い精度のコードを生成させる方法を指南。関連ファイルを開く、トップレベルのコメントを書くなど
Sadness ojisanによる実践Next.jsの書評。”App Routerを学ぶ理由”は実際に触っている人しか分からない内容で、Page Routerがまだ使えるなら良いと思っている人は認識を更新した方がいい。Page Routerを利用する上で問題が出てきている。ただしApp Routerを利用する上でも問題はある。
Next.jsを初心者向けツールとして捉えている自分が、実践 Next.js を読んでみて
SSRしていればランタイムCSS-in-JSでもすごく速い。ゼロランタイムCSS-in-JSの意義はパフォーマンスよりエコシステム互換性。ゼロランタイムで生成されたCSSを静的解析して最適化している。React Compilerと同様にKumaのコンパイラは最適化手段
Kuma UIの設計思想と 頑張らないゼロランタイムCSS-in-JS
スレッド含めて面白そう。まだ読んでない。
Why choose async/await over threads?