(BUSAN.SASHIMI)
terminal
Weekly Digest // STYLING — Week 26-2026
paletteWeekly Report

light-dark()、contrast-color()、Style… — 2026年 第26週 CSS・スタイリング

CSS architecture, utility frameworks, and animation performance

calendar_todaysummarizeWeek 26-2026
テーマ

light-dark()、contrast-color()、Style QueryによるModern CSS Theming

Una Kravetsが、2026年5月にBaseline Newly Availableとなった宣言的なCSSテーマシステムを紹介します。light-dark()がcolor-schemeに応じてシャドウとglow-borderを切り替え、contrast-color()がWCAGコントラストアルゴリズムで背景に合う白黒テキストを自動選択します。@propertyでそのコントラスト結果をアニメーション可能なカスタムプロパティとして登録し、@container style()がoklch相対カラー構文で派生した色調パレットへ分岐します。カードに渡すのは--brand-color一つだけで、背景・立体感の仕組み・テキストパレット全体が自動で決定されます。

light-dark()、contrast-color()、Style QueryによるModern CSS Theming
Read Articlearrow_forward
Video · モーションデザイン

Figma Motion Crash Course — 30分でAnimated Promo Videoを作る

DesignCourseが、Config 2026で発表されたタイムラインベースのアニメーションシステムであるFigma Motionを使い、プロモーション動画をゼロから作成する手順を解説します。キーフレームの配置、イージングカーブ(ease-in・ease-out・カスタムcubic bezier)、テキストリビールアニメーション用のCSSマスク方式のclip-contentフレーム、自然なタイミングのための要素スタッガリングを取り上げます。Config 2026で同時発表されたFigma Shaders — GLSLに似たシェーダーエフェクトを適用してそのパラメータをタイムライン上で直接アニメーションできる新しいfillタイプ — も紹介します。最終結果は60fps MP4(Figma有料プランが必要)でエクスポートできます。

AI_INFOGRAPHIC
Figma Motion Crash Course — 30分でAnimated Promo Videoを作る — infographicWATCH_VIDEOarrow_forward
Article · アクセシビリティREAD TIME: 10m

Grid LaneはWCAG 2.4.3に違反する可能性が高い

Manuel Matuzovicは、display: grid-lanesを使い最短列配置でバランスを取る新レイアウト「CSS Grid Lanes」が、視覚的順序とDOM順序を本質的に切り離し、WCAG 2.4.3のフォーカス順序基準に違反しやすいと分析します。flow-toleranceプロパティで再配置のしきい値を調整できますが、40remまで引き上げてもキーボードユーザーのフォーカスが予測不能に飛ぶケースが残ります。reading-flow: grid-rowsが解決策になり得ますが、Chromium専用でありGrid Lanesにはまだ対応していません。Safariはreading-flow未対応のままGrid Lanesを出荷済みで、実際のアクセシビリティの空白が生じています。

READ_FULL_LOGarrow_forward
Article · アニメーションREAD TIME: 22m

新しいPure CSS random()関数を試す

Polypaneが、新しいCSS random()関数をbokeh・花びらの落下・投げられるポラロイド・詩的レイアウト・揺れるグリッド・回転する矩形・オーロラという7つのインタラクティブデモで探求します。主な注意点は、element-scopedキーワード（近くper-elementに改名）を使わないとカスタムプロパティを参照するたびに新しい乱数が生成される点です。random()をステップ整数とCSS if()スタイルクエリと組み合わせると、display種別のような離散値に対して加重random-item()のポリフィルを実現できます。現在の対応環境はPolypane 29+とフラグ付きのChromium 148+で、Safari 26.2+は部分対応、Firefoxは未対応です。

READ_FULL_LOGarrow_forward
Article · ビュートランジションREAD TIME: 3m

View Transitionを11まで引き上げる — All Day Hey! 2026

Bramus Van Dammeが英国リーズで開催されたAll Day Hey!の最終回で発表した、View Transition APIの実験的活用事例を紹介します。ドキュメント化された限界を超えてScroll-Driven Animationsと組み合わせ、MutationObserverで遷移を自動トリガーし、モダンAPIでInternet Explorer風のページ遷移を復活させる内容でした。スライドはslidr.ioに、全録画はYouTubeで公開されています。Jake ArchibaldがGoogleを離れた後のView Transitions管理をBramusが引き継いでいることへのBlueskyでの公式称賛についても言及されています。

READ_FULL_LOGarrow_forward
Article · ビジュアル効果READ TIME: 4m

CSSでText上にAnimated Radial Gradient Maskを作る

Cassidy Williamsが、CSS maskプロパティと手動で調整した座標に合わせたrepeating-radial-gradientを使って同心円リングのテキストマスクを作る手順を解説します。ストライプの太さは@propertyで登録した--stripesカスタムプロパティで制御します。ブラウザがgradientを画像として扱い補間できないため、CSSアニメーションを実現するにはこの方法が必要です。クロスブラウザ調整も多く必要で、gradient内のrem単位がFirefoxを壊し、Safariのアニメーションはピクセル単位の微調整が必要でした。CodePenデモと読みやすい記法と意図的に難読化した短縮記法の比較も含まれています。

READ_FULL_LOGarrow_forward
Article · SVGREAD TIME: 26m

SVGに足りないもの

Patrick BrossetがChromiumバグトラッカーの投票数、Interop提案、State of CSS 2025アンケート、ソーシャルメディアの意見募集という4つの情報源からSVGに関する開発者の不満を総合します。全出所に共通する最も明確なシグナルは、imgやbackground-imageで読み込んだ外部SVGアセットにCSSカスタムプロパティやcurrentColorを適用できないという点です。CSS Linked ParametersがスペックによるソリューションでFirefoxはすでに実装済み、Chromiumも実装中です。その他の主要課題としてSVG内でのz-indexとcalc()の未対応、不安定なテキスト折り返し、フィルター性能、foreignObjectの挙動の不一致、stroke-alignmentの未実装などが挙げられています。

READ_FULL_LOGarrow_forward
summarizeDigest_Summary

今週のCSSはテーマ、クリエイティブエフェクト、アクセシビリティ、ツールなど複数の領域で重要な進展がありました。Una Kravetsは2026年5月にBaseline Newly Availableとなった完全宣言的なテーマシステムを紹介しました。light-dark()、contrast-color()、@property、@container style()クエリを組み合わせ、oklch相対カラー構文を使って単一の--brand-colorカスタムプロパティから全パレットを導出します。Bramus Van DammeはAll Day Hey!カンファレンスでView Transition APIとScroll-Driven Animations、MutationObserverトリガーを実験的に組み合わせるデモを発表しました。

クリエイティブCSS面では、Polypaneが7つの純粋CSSデモで新しいCSS random()関数(フラグ付きChromium 148+、Polypane 29+)を探求しました。重要な注意点は、element-scopedキーワード(まもなくper-elementに改名)なしではカスタムプロパティ参照のたびにrandom()が再評価されることです。Cassidy Williamsは@property登録済みカスタムプロパティを使ってrepeating-radial-gradientマスクをスムーズにアニメーションする手法を紹介しましたが、rem単位がFirefoxを壊し、Safariはピクセル単位の調整が必要など、クロスブラウザの調整が必要でした。

アクセシビリティ分野では2本の記事が注目されました。Manuel MatuzovicはCSS Grid Lanes(display: grid-lanes)の列バランシングアルゴリズムが視覚的順序とDOM順序を切り離し、WCAG 2.4.3フォーカス順序に違反することを明らかにしました。解決策のreading-flow: grid-rowsはChromium専用でGrid Lanesにはまだ対応しておらず、SafariはすでにGrid Lanesをreading-flow未対応でリリースしています。Patrick BrossetのSVGギャップ分析は4つの情報源を経て、imgで読み込んだ外部SVGにCSSカスタムプロパティを適用できないという共通の最大の不満点を確認し、CSS Linked Parameters(Firefoxで既にリリース済み)がスペックによる解決策であることを示しました。

Key Takeaways
  • CSS Grid Lanesはreading-flowサポートなしでSafariにリリースされており、WCAG 2.4.3フォーカス順序違反が実際に発生しています。reading-flowが全ブラウザで対応されるまで、すべてのGrid Lanesレイアウトをキーボードでテストし、高いflow-tolerance値を必須として使用してください。
  • Una KravetsのLight-dark() + contrast-color() + @container style()テーマスタックはBaseline Newly Availableになりました。1つの--brand-colorだけで背景、立体感、全テキストパレットをJavaScriptなしで実現できます。
  • CSS random()は進化中(フラグ付きChromium 148+、Polypane 29+)ですが、カスタムプロパティ参照ごとの再評価を防ぐにはelement-scoped/per-elementキーワードが不可欠です。SafariとFirefoxのサポートはまだ不完全です。