CSSプラットフォーム CSSの大拡張 新世代のCSS機能群が、圧縮後合計322 kB 以上のJavaScriptライブラリを置き換えようとしています。CSS Anchor Positioning はanchor-nameとposition-tryフォールバックでブラウザがツールチップの位置を管理し、Floating UIやPopper.jsを不要にします。Popover API はライトディスミスのオーバーレイでRadixやHeadless UIを代替し、ネイティブのdialog要素はフォーカストラップ付きモーダルを担当します。animation-timeline: scroll()とview()を用いたScroll-Driven Animationsはコンポジタースレッドで動作し、GSAP ScrollTriggerを置き換えます。View Transitions、appearance: base-selectによるカスタマイズ可能なselect、scroll-stateクエリ、field-sizing: content、そして近日公開予定のif()関数が加わり、典型的なSPAから44〜146 kB のJavaScriptを削減できるプラットフォームの転換点を示しています。
Read Articlearrow_forward Video · 画像フォーマット
Web向けImage Formatランキング BMPとTIFF（ファイルサイズが大きくWeb用途が限られるためD/Cティア）からGIF（256 色制限、透明度不足、大きなファイルサイズでDティア）、PNG（可逆圧縮、完全なアルファチャネル対応だがファイルサイズが大きいためCティア）まで、Webの画像フォーマットをランク付けして比較します。JPEGは8x8 ブロックの非可逆圧縮を適用し、BMP比で約25倍のサイズ削減 を達成しつつ目に見える画質低下はほとんどありませんが、現代的な代替手段の存在からCティアにとどまります。2010年 にGoogleが公開したWebPは、同等の画質でJPEGよりも優れた圧縮率を実現し、透明度とアニメーションをサポートしています。同等のPNGと比べて最大10倍小さい ファイルサイズを達成できます。AV1 コーデックを基盤とするAVIF （Sティア）はWebPより20〜30%優れた圧縮率 を提供し、広色域とHDRサポートを追加、ブラウザ対応率は96% に達します。AVIFをメインに、WebPをフォールバックとして使う戦略が推奨されます。
AI_INFOGRAPHICopen_in_full close WATCH_VIDEOarrow_forward Video · アニメーション
CSS Animationをシンプルにする Kevin Powellは、CSS @keyframesをよりシンプルに記述するための2つ の実践的なヒントを紹介しています。まず、共通のキーフレームストップ（例: 25%、75%）をカンマ区切りにすることで、重複した宣言が不要になり、値を1 か所変更するだけで両方のストップが更新されます。次に、不要な場合はfrom（0% ）とto（100% ）のキーフレームを省略することで、lean-leftやlean-rightクラスですでにtransformが適用された要素でのアニメーション開始時のグリッチを防ぐことができます。CSS個別プロパティのrotateとtranslateをtransformと組み合わせることで、独立した回転と移動のアニメーションが競合なく重なり合い、各要素が原点に戻るのではなく自身の開始位置からアニメーションを実行できます。
AI_INFOGRAPHICopen_in_full close WATCH_VIDEOarrow_forward Article · カラースキーム READ TIME: 4m
light-dark()がまもなく画像に対応 これまで色値のみに対応していたCSS light-dark()関数が、image値にも対応するよう拡張されます。これにより、背景画像・マスク・ロゴをダークモードで切り替えるための@media (prefers-color-scheme: dark)ブロックが不要となり、background-image: light-dark(url(light.png), url(dark.png))の一行 でローカルのcolor-schemeオーバーライドも尊重しながら切り替えが可能になります。Chrome 150 とFirefox 150 がサポートを実装済みで、Safariは未対応 です。@supports (background-image: light-dark(none, none))でフィーチャーデテクションが行えます。引数は2つ の色か2つ のimageでなければならず、型の混在は CSSパーサーのパース時の型解決の仕組みにより許可されていません。
READ_FULL_LOGarrow_forward Article · ローディングUI READ TIME: 14m
同期ずれしないShimmer Skeletonを作る 従来のスケルトン画面の実装では、実際のコンポーネントごとに手作業でミラーコンポーネントを作成する必要があり、ハードコードされたwidth、height、border-radiusは実際のレイアウトが変更されるたびに崩れていました 。この記事では、DOMを計測するアプローチの実装を段階的に解説しています。モックデータで実際のコンポーネントをレンダリングし、opacityやvisibilityではなくcolor: transparentでテキストを非表示にした後、getBoundingClientRect()を使用してimg、h1-h6、p、span、buttonなどの各リーフ要素をコンテナ基準で計測します。getComputedStyle()で各要素のborder-radiusを取得し、テキスト要素には4px のフォールバックを適用します。background-size: 200%を使ったCSS @keyframes shimmerアニメーションが絶対配置ブロックの上に半透明のグラデーションを流します。ReactではuseLayoutEffectがブラウザの描画前に同期的に計測を実行し、透明コンテンツのちらつきを防ぎます。
READ_FULL_LOGarrow_forward Article · アクセシビリティ READ TIME: 3m
CSS contrast-color()関数でアクセシブルな文字色を作る CSS contrast-color()関数は任意の有効な色値を受け取り、入力色に対してより高いコントラスト比を提供するblackまたはwhiteを返します。これにより、デザインシステムにおける手動のWCAGコントラスト比チェック、JavaScript計算、バリアント別テキスト色の宣言が不要になります。ブラウザのアルゴリズムは通常テキストに対してWCAG AA の4.5:1の最低基準 を満たす必要があり、同率の場合はwhiteが返されます。この関数はCSS Color Level 6 で開発が進んでいたより豊富な機能を持つcolor-contrast()を簡素化したMVPで、contrast-color()という名称でLevel 5 に組み込まれました。現在は任意の候補色ではなくblackまたはwhiteのみを返します。color-mix()やstyleクエリと組み合わせることで、色調のあるコントラストバリアントも生成できます。
READ_FULL_LOGarrow_forward Article · コンポーネントスタイリング READ TIME: 4m
Sonner Toastのスタイリング上級ガイド toastOptionsにunstyled: trueを設定すると、Sonner のすべてのデフォルトスタイルが削除され、開発者が完全な制御権を持ちます。各トーストはli要素であり、div[data-icon]、div[data-content]、button[data-cancel]、button[data-action]が直接の兄弟として並ぶフラットなDOM構造を理解することが正しいflexレイアウトの実装に不可欠です。バリアント別スタイリングにはclassNamesキーのsuccess、error、infoを使用し、ベースのborderショートハンドを上書きするにはborder-l-*に!importantが必要です。ローディング状態は特別な処理が必要で、.sonner-loaderはデフォルトでposition: absoluteとなっているためstaticにリセットしなければなりません。アニメーション速度は--toast-animation-duration CSSカスタムプロパティで制御し、インラインのtransitionスタイルを上書きする際は!importantが必要です。data-type、data-expanded、data-front、data-visibleなどのデータ属性により、JavaScriptなしで細かいCSSターゲティングが可能です。
READ_FULL_LOGarrow_forward summarize Digest_Summary
第12週は、ネイティブCSSが重量級JavaScriptライブラリの必要性を侵食しつつあることを強く裏付けた週でした。 GitButler の「The Great CSS Expansion」 は、CSS Anchor Positioning がFloating UIとPopper.jsを、Popover APIとネイティブdialogがRadix/Headless UIを、animation-timeline: scroll()とview()を使ったScroll-Driven AnimationsがGSAP ScrollTriggerを置き換え、典型的なSPAから44〜146 kB のJavaScriptを削減できることをまとめました。新しい2つ のカラー関数もプラットフォームの設計能力を拡張します。light-dark()はカラー値を超えて画像値もサポートするよう拡張され（Chrome 150 ・Firefox 150 ）、ロゴや背景の切り替えに@media prefers-color-schemeブロックが不要になります。contrast-color()は任意の入力色に対して高コントラストのblackまたはwhiteを自動的に返し、デザインシステムから手動のWCAGコントラスト比チェックを排除します。
実践的な観点では、shimmerスケルトン画面の深掘りがgetBoundingClientRect()とgetComputedStyle()を使ったDOM計測アプローチを紹介しました。手作りのミラーコンポーネントなしに常に最新状態を保つスケルトンを生成し、ReactのuseLayoutEffectで描画のちらつきを防ぎます。Sonner のトーストカスタマイズはunstyledSでの: trueを通じて探求され、data-type・data-expandedなどのデータ属性が重要なターゲティングメカニズムであることが明らかになりました。Kevin PowellはCSS @keyframesのカンマ区切りストップと、事前変換要素でのグリッチを防ぐための不要なfrom/toキーフレーム省略などの明確化ヒントを共有しました。画像フォーマットガイドはAVIF （Sティア、WebP比20〜30%優れた圧縮率 、96%ブラウザサポート ）をWebPフォールバックと組み合わせた推奨Webイメージ戦略として位置付けました。
Key Takeaways CSS Anchor Positioning ・Popover API・ネイティブdialog・Scroll-Driven Animationsを組み合わせることで、典型的なSPAからFloating UI・Popper.js・Radix・GSAP ScrollTriggerなど圧縮後322 kB 超のJavaScriptライブラリを除去できます。light-dark()はChrome 150 とFirefox 150 で画像値をサポートし、contrast-color()はWCAG AA準拠のblackまたはwhiteを自動返却します。どちらもデザインシステムからJavaScript依存を削減します。 AVIFは現在推奨の主要Webイメージフォーマット（WebP比20 〜30% 優れた圧縮率・96% ブラウザサポート）であり、WebPをフォールバックとする戦略が最善です。 
