アップグレードされた CSS の `attr()` 関数を使う

`attr()` 関数は HTML の属性を読み取り、それを CSS で利用できるようにする関数です。従来までは `content` プロパティのみで使用できましたが、CSS Values and Units Module Level 5 ではこの制限が見直され、`attr()` 関数がカスタムプロパティを含む任意の CSS プロパティで使用できるようになりました。

ボタンが押し込まれた状態を表す Press Button の提案

UI デザインにおいてボタンが「押し込まれた」状態を表現することはしばしばあります。しかし、ネイティブの HTML 要素では表現できず `aria-pressed` 属性を使用する必要がありました。Press Button Proposal では `type="press"` 属性を追加することでボタンが押し込まれた状態を表現することが提案されています。

スキーマバリデーションライブラリの標準インターフェース standard-schema

スキーマバリデーションライブラリはここ数年で人気を集めています。多くのライブラリが登場する中で、standard-schema はスキーマバリデーションライブラリの標準インターフェースを提供します。これにより、エコシステムツールがユーザー定義の型検証ツールをより簡単に受け入れられるようにすることを目指しています。

パスキーによる認証をブラウザで実装してみる

パスキーとはパスワードに代わる認証方法で、生体認証やデバイス PIN を使ってログインができる仕組みです。ユーザーはパスワードを覚える必要がなく、またフィッシング攻撃にも強いという点からよりセキュア認証方法として注目を集めています。この記事では WebAuthn を使ってパスキーをブラウザで実装する方法を紹介します。

型安全にクエリパラメーターを扱う nuqs

フロントエンドの状態管理のパターンとしてクエリパラメータを信頼できる唯一の情報源(single source of truth)として扱うことがあります。ですが、クエリパラメーターの型が文字列であるため、型安全性が保証されないという課題があります。この記事では `nuqs` というライブラリを使用してクエリパラメーターを型安全に扱う方法について解説します。

MPA でページ遷移アニメーションを行う `@view-transition` CSS アットルール

View Transition API はページを遷移する際に簡単にアニメーションを追加できる API です。SPA では `document.startViewTransition()` メソッドを DOM が変更される前に呼び出すことでページ遷移アニメーションを追加できます。MPA の場合 CSS アットルール `@view-transition` を使用できます。SPA の場合と異なり、JavaScript を使用せずに CSS だけでアニメーションを追加できる点が特徴です。