フレームワーク Tailwind CSS v4.3：Scrollbar、新色など Tailwind CSS v4.2 とv4.3 が1つ のブログ記事でまとめて公開され、2 リリース分の新機能を網羅しています。v4.2 ではmauve・olive・mist・taupeの4つ のニュートラルカラーパレット、PostCSS経由と比べビルド時間を2倍以上短縮 する専用webpackプラグイン、pbs-*・mbs-*・inline-size・block-size・inset-s-*・inset-e-*などの論理プロパティユーティリティ拡充、font-feature-settingsを制御するfont-features-*ユーティリティが追加されました。v4.3 ではscrollbar-width(scrollbar-auto・scrollbar-thin・scrollbar-none)・scrollbar-color(scrollbar-thumb-*・scrollbar-track-*)・scrollbar-gutterを網羅するスクロールバーユーティリティ、cqb/cqhユニット向け@container-sizeユーティリティ、CSSのzoomプロパティ用zoom-*ユーティリティ、tab-size用tab-*ユーティリティ、CSS内でのスタック・複合@variantサポート、--default()による@utilityデフォルト値指定が導入されました。
Read Articlearrow_forward Video · チャレンジ
Frontend DeveloperがCSS Battleに挑戦 — 10分Challenge Kevin Powellは自己設定の10分 タイマーのもとCSS Battleチャレンジ251 ・252 ・253 に取り組み、リアルタイムの意思決定プロセスを解説します。チャレンジ251 は上側2 角にborder-radius: 100vwを適用したスタックdivとデコレーティブなstripe用pseudo-elementを使い、margin-inline: autoでセンタリングして約5分40秒 で100%達成 。チャレンジ252 はbox-shadowのspreadレイヤー(0 0 0 20px・0 0 0 50px・0 0 0 70px)と半分の高さの::afterで同心円を構成し99.9% を記録。チャレンジ253 は両側transparentボーダー(border-top-colorとborder-bottom-colorのみ設定)とrotate: -45degでダイヤモンド形を作り、bodyとhtmlにpositionedなpseudo-elementを4つ 配置してエンドキャップの円を表現、7分58秒 で100%達成 。border-boxサイジングの微妙な挙動、box-shadowショートハンドでのtrailing comma禁止ルール、手動のleftオフセットよりinsetとmargin-inline autoの方がシンプルだったという振り返りも紹介しています。
AI_INFOGRAPHICopen_in_full close WATCH_VIDEOarrow_forward Article · レスポンシブ READ TIME: 4m
Media Query Range Syntax Ahmad Shadeedは、min-width/max-widthメディアクエリをMedia Queries Level 4 のrange構文に切り替える実践的な理由を解説しています。従来の書き方では、max-width: 300pxとmin-width: 300pxが同じブレークポイントで同時に成立し、要素が一度に消えるという微妙なバグが発生します。range構文はこの曖昧さをwidth <= 300pxやwidth > 300pxのような読みやすい比較演算子で解消し、1px のオフセット調整が不要になります。両端指定の範囲は(300px <= width <= 500px)という一つ の式で、and連結の2 クエリをまとめられます。同じ構文は@mediaを@containerに置き換えることでコンテナクエリにも利用できます。ブラウザサポートは2023年3月からBaselineで安定 しており、今日のプロダクションでも安全に使えます。
READ_FULL_LOGarrow_forward Article · アニメーション READ TIME: 8m
CSSで数学する：Layout・Animation向け三角関数 CSSは2023年 よりsin()・cos()・atan2()をサポートしており(Baseline、Chrome 111+ 、Firefox 108+ 、Safari 15.4+ )、JavaScriptなしで円形・弧・螺旋・ポインタレイアウトを実現できます。基本パターンは要素ごとの--angleカスタムプロパティをcos()とsin()に渡し、コンテナ中心からのtranslateオフセットを算出します。回転アニメーションでは、コンテナが前方に回転する一方、各子要素がanimation-delayとreverseキーワードで逆回転し、視覚的な向きを保ちます。--angleを直接トランジションするにはsyntax: angleを指定した@property登録が必要で、型がないとブラウザが補間を黙って無視します。位置を決める--iインデックス変数は、calc(var(--i) * 80ms)による入場アニメーションのスタガー遅延やhsl()での色指定にも同様に使えます。アークナビゲーションでは開始/終了角度のペアが全円を置き換え、atan2(-y, -x)で要素を内向きにし、単一のmousemoveリスナーが--mx/--myを渡せばCSSが12個 の回転角度をクライアント側で計算します。
READ_FULL_LOGarrow_forward Article · CSSテクニック READ TIME: 9m
CSS — 想像できる最高のAPI Technique この記事では、CSS Space Toggle技法を二値ON/OFFから多状態セレクターにアップグレードしたCyclic Space Toggles を紹介しています。標準のSpace Toggleは、スペース文字に設定したカスタムプロパティがtruthy(var()フォールバックをブロック)でinitialがfalsey(IACVT — Invalid At Computed Value Time)になる仕様を利用し、条件付きプロパティ適用を実現します。Cyclic Space Togglesでは複数のinverted toggleを連鎖させ、--select変数に--option-*参照の組み合わせを指定すると対象オプションだけがinitialに切り替わり、残りはスペース状態を維持します。結果として、boolean専用のショートハンドAPIが生まれます。CSSライブラリの利用者は単一宣言で複数の機能フラグを有効化できます(--bp-fluidity: var(--fluid-xxs) var(--fluid-sm) var(--fluid-lg))。著者は自身のbreakpoint-systemライブラリでの実用例を示し、TailwindのクラスリストをCyclic Toggle型CSSAPIで置き換えるアイデアも提示しています。ブラウザの到達率は約95〜97% と記されています。
READ_FULL_LOGarrow_forward Article · モバイル READ TIME: 8m
safe-area-insetでMobile-safe Layoutを構築 現代のスマートフォンにはノッチ・ダイナミックアイランド・カメラパンチホール・ホームインジケーターのジェスチャー領域があり、固定UIを隠す可能性があります。ブラウザはこれらの寸法をenv() CSS関数でsafe-area-inset-top・right・bottom・leftとして公開しており、すべてBaselineで広くサポート されています。フルエッジ-to-エッジレンダリングにはまずmeta viewportタグにviewport-fit=coverを追加し、env()値をpaddingやpositioningに適用する必要があります。デフォルトの余白はゼロなので、calc(env(safe-area-inset-bottom) + 1rem)で余裕を設けます。記事ではChromium限定 の新機能safe-area-max-inset-*も取り上げており、ブラウザクロームが収縮しても安定したゾーンを保持しますが、SafariとFirefoxでは未サポートです。Chrome DevToolsのレスポンシブビューは常に0 を返すため、デバイスごとの正確なinset値をエミュレートするPolypane の活用を推奨しています。
READ_FULL_LOGarrow_forward Article · ポップオーバー READ TIME: 4m
Popover BackdropのAnti-pattern Remy Sharpは、dialog要素の代わりにHTML popover属性と::backdropを組み合わせてモーダル風オーバーレイを実装する際に生じるセキュリティ隣接のUXバグ を文書化しています。popoverはフォーカスもポインターイベントも閉じ込めないため、::backdropをクリックするとオーバーレイが閉じるように見えても、実際にはDOMの下にある要素までクリックが透過します。Sharpはクリックジャッキング風のデモでこれを実証しており、popoverの裏に全画面の隠しボタンを配置すると、ユーザーがdismissのためにクリックした際にそのボタンが発火します。正しい解決策はクリックを完全にトラップするdialog要素を使うことです。また、不透明やぼかしのbackdropがpopoverでは実現できないモーダル的な意図を示唆することから、popoverが::backdropをサポートすべきか自体を問題提起しており、Firefoxのsolidバックグラウンドバグも報告されています。
READ_FULL_LOGarrow_forward summarize Digest_Summary
今週のスタイリング分野はTailwind CSS が中心でした。v4.2 とv4.3 が同時公開され、v4.2 ではmauve・olive・mist・taupeの4つ のニュートラルカラーパレット、PostCSS経由と比べてビルド時間を2倍以上短縮 する専用webpackプラグイン、論理プロパティユーティリティの拡充が追加されました。v4.3 ではscrollbar-width・scrollbar-color・scrollbar-gutterを網羅するスクロールバーユーティリティ、cqb/cqhユニット向け@container-sizeユーティリティ、CSSのzoomプロパティ用zoom-*ユーティリティが導入され、CSS内でのスタック・複合@variantサポートと@utilityの--default()によるデフォルト値指定も追加されました。
レイアウトとブラウザプリミティブを扱う記事も多く登場しました。Ahmad Shadeedは2023年3月 からBaselineで安定しているMedia Queries Level 4 のrange構文（width <= 300px、300px <= width <= 500px）への即時移行を推奨し、従来のデュアルブレークポイントの曖昧さバグを解消できると説明しています。Carmen Ansioは、Chrome 111 / Firefox 108 / Safari 15.4 以降で使えるsin()・cos()・atan2() CSSの三角関数を使い、JavaScriptなしで円形・弧・螺旋レイアウトを構築する方法と、--angleのトランジションに必要な@property登録を実演しました。Polypaneのガイドでは、ノッチ対応モバイルレイアウト向けのviewport-fit=coverとenv() safe-area-inset-*の使い方、そしてChromium限定のsafe-area-max-inset-*も紹介されました。
2 本の短い記事も注目されました。Remy Sharpは、dialogの代わりにpopoverと::backdropをモーダル代用として使う場合にポインターイベントがトラップされずクリックジャッキングリスクがある ことを文書化しました。もう1 本の記事ではSpace Toggle技法を拡張したCyclic Space Toggles を紹介し、JavaScriptなしで約95〜97%のブラウザ でN状態のbooleanショートハンドAPIを実現できることを示しています。
Key Takeaways Tailwind CSS v4.3 はscrollbar-width・scrollbar-color・scrollbar-gutterユーティリティとcqb/cqhユニット向け@container-sizeをネイティブ搭載しました。まとめて利用するには今すぐアップグレードしましょう。 Media Queries Level 4 のrange構文（width <= 300px 、300px <= width <= 500px ）は2023年3 月からBaselineで安定しており、デュアルブレークポイントの曖昧さバグを解消します。今すぐ移行できます。 popoverと::backdropをモーダル代用として使うのはポインターイベントをトラップしないためクリックジャッキングリスクがあります。::backdropが正しくクリックをトラップするdialogを使いましょう。 
