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

VoidZeroがCloudflareに参加 — 2026年 第23週 CSS・スタイリング

CSS architecture, utility frameworks, and animation performance

calendar_todaysummarizeWeek 23-2026
ツール

VoidZeroがCloudflareに参加

Vite、Vitest、Rolldown、Oxcを開発したEvan YouのVoidZeroがCloudflareに買収されます。すべてのプロジェクトはMITライセンスのオープンソースとして継続されます。2023年以降、チームはVite 8のデフォルトバンドラーとなったRust製のRolldown、ESLint比50〜100倍高速な型対応リンターOxlint、Prettier比30倍高速なOxfmt、そしてVite+をリリースしてきました。CloudflareがVite Environment APIやプラグイン連携に深く関与してきたことが、買収の自然な背景となっています。チームはすべてのオープンソースプロジェクトを引き続きリードしながら、ViteアプリのデプロイプラットフォームとしてのCloudflare強化とAIエージェント向けツール開発に注力します。

VoidZeroがCloudflareに参加
Read Articlearrow_forward
Video · アニメーション

CSSでPage間Animationが可能に

クロスドキュメントView Transitionsを使えば、別々のHTMLページ間をCSSだけでアニメーション遷移させることができます。@view-transitionルールにnavigation: autoを設定するとデフォルトのクロスフェードが有効になり、::view-transition-group、::view-transition-old、::view-transition-newの疑似要素でslide-inやslide-outのようなカスタムkeyframeアニメーションを定義できます。view-transition-nameで名前付き遷移グループを作ると、ナビバーを固定したままメインコンテンツだけをスライドさせるといった要素の分離が可能で、共有画像トランジションではあるページの画像を別の位置へスムーズに移動できます。アクセシビリティのためにprefers-reduced-motion: no-preferenceメディアクエリ内に設定をまとめることが推奨されます。現在Chrome、Edge、Safariで対応しており、Firefoxは未対応のため、プログレッシブエンハンスメントとして扱うべきです。

AI_INFOGRAPHIC
CSSでPage間Animationが可能に — infographicWATCH_VIDEOarrow_forward
Video · レイアウト

全Projectで使うCSS Pattern 3選

Kevin Powellがすべてのプロジェクトで使う3つのCSSレイアウトプリミティブを解説します。Stackはdisplay: flexにflex-direction: columnと--stack-gapカスタムプロパティを組み合わせ、コンポーネントごとに間隔を簡単に上書きできます。Proseパターンはlobotomized owlセレクタ(* + *)にem単位でmargin-block-startを適用し、フォントサイズに応じて間隔が変わる設計で、Tailwindのproseプラグインと同じ仕組みです。Pileはdisplay: gridにgrid-template-areas: pileとplace-items: centerを使い、すべての子要素を同じセルに重ねることで、position: absoluteなしにテキストオーバーレイやバッジ配置を実現しながら、gridコンテキスト内でz-indexも活用できます。

AI_INFOGRAPHIC
全Projectで使うCSS Pattern 3選 — infographicWATCH_VIDEOarrow_forward
Article · アニメーションREAD TIME: 4m

CSS Toggle Transitionを一周して原点へ

Christopher Kirk-Nielsenは、アコーディオンのシェブロンが閉じるときに巻き戻しではなく360度完全回転を完了させる方法をCSSのみで探求しています。最終的なアプローチは、登録済みカスタムプロパティで開いた状態を保持しつつ、step-endタイミング関数と負のtransition-delayを組み合わせて不要なスナップバック遷移を抑制するものです。この手法はChromiumとWebKit（Safari 18.6でテスト済み）では動作しますが、Firefoxは閉じる遷移自体をスキップするため失敗し、Firefox向けフォールバックは標準の巻き戻し動作に戻ります。公開後にコミュニティから提案されたクロスブラウザ対応の解決策も2つ紹介されています：linear()イージングで閉じるイージングを反転させる方法と、シェブロンの対称性を利用してmirrorトランスフォームを適用する方法です。

READ_FULL_LOGarrow_forward
Article · CSSプロパティREAD TIME: 10m

CSS @property導入のBarrierを下げる

CSS @propertyはBaselineになってほぼ2年が経ちますが、多くのコードベースは依然として未登録のカスタムプロパティに依存しています。この記事では、プロパティを登録する際にsyntax（angle、colorなど）、inherits、initial-valueを宣言することで、linear-gradient内の--angleのようなカスタムプロパティへのtransitionをブラウザが補間できるようになる理由を解説します。著者は既存のCSSファイルをスキャンして保守的な@property登録を含むproperties.cssの初稿をレビュー可能な形で生成する実験的CLIツール、css-property-type-validator generateを紹介しています。重要な注意点も取り上げています：transition-behavior: allow-discreteは未登録プロパティのスムーズな補間を有効にせず、initial-valueは計算上独立している必要があります（長さには0ではなく0pxが必要）。

READ_FULL_LOGarrow_forward
Article · ニュースレターREAD TIME: 5m

Smashing Newsletter 第561号：新しいCSS Technique

176,289人の購読者に送信されたSmashing Magazine第561号ニュースレターは、有用なCSSテクニックと新機能をまとめています。主なトピック：:nth ofセレクタを使った条件付きフォームバリデーション、レスポンシブ画像のsizes="auto"（ヒーロー画像は引き続き明示的なサイズが必要）、モバイルのノッチやDynamic Island対応のsafe area inset、カラーおよびモノクロ絵文字レンダリングを制御するfont-variant-emoji、コンテナクエリタイポグラフィシステム、Chrome 145の新しいcolumn-heightとcolumn-wrapプロパティ（横スクロールでなく縦方向に折り返す複数カラムレイアウト）、CMS駆動レイアウトで親グリッドトラックを継承するCSS subgridとCSS Masonryの比較も紹介されています。

READ_FULL_LOGarrow_forward
Article · カラーREAD TIME: 4m

CSSで自動生成Live Color Scaleを設計

Jared WhiteはBridgetown用のWillametteテーマのために、単一の--wll-brand-color CSS変数からcolor-mix()関数とdisplay-p3色空間を使って11段階のカラースケールを自動生成する方法を紹介しています。スケールはブランドカラーを白（最大90%）と混合して明るいトーンを、黒（最大80%）と混合して暗いトーンをbrand-05からbrand-95まで生成します。srgb（明るいトーンが過彩度）、oklch（グレーがかりすぎて濁る）、display-p3（知覚的に正確な明暗処理）を比較して色空間の選択根拠を示します。限界も正直に扱っています：黄色系は明るい黄色ではなくベージュになり、Web Awesomeのような手動設計のパレットには及びませんが、ユーザーは個々のカラーストップを独自のcolor-mix呼び出しで上書きできます。

READ_FULL_LOGarrow_forward
summarizeDigest_Summary

今週の最大のスタイリングニュースは、Vite・Vitest・Rolldown・OxcのEvan YouのVoidZeroがCloudflareに買収されたことです。すべてのプロジェクトはMITライセンスのオープンソースとして継続されます。2023年以降、チームはVite 8のデフォルトバンドラーとなったRolldown、ESLint比50-100倍高速なOxlint、Prettier比30倍高速なOxfmt、Vite+をリリースしてきました。CloudflareのVite Environment APIへの既存投資が買収の自然な背景となり、チームはすべてのオープンソースプロジェクトを引き続きリードしながらCloudflareプラットフォーム上でViteベースのデプロイとAIエージェントツールを拡充する予定です。

CSS面では、クロスドキュメントView Transitionsが幅広いサポートとともに登場しました。@view-transitionルールにnavigation: autoを設定すると別々のHTMLページ間のデフォルトクロスフェードが有効になり、view-transition-nameで名前付き遷移グループを作成するとslide-inやslide-outなど要素単位のアニメーションが可能です。Chrome・Edge・Safariで対応しFirefoxは未対応のため、プログレッシブエンハンスメントとして扱うことが推奨されます。Smashing Newsletter第561号はChrome 145の新しいcolumn-heightとcolumn-wrapプロパティ、コンテナクエリタイポグラフィシステム、レスポンシブ画像のsizes="auto"、絵文字レンダリング制御のfont-variant-emoji、ノッチとDynamic Island対応のsafe area insetなどを整理しました。

CSS @propertyは実践的な導入ガイドを通じ、プロパティのsyntax・inherits・initial-valueを登録することでlinear-gradient()内の--angleのようなカスタムプロパティのtransitionにブラウザ補間が利用可能になる仕組みを解説しました。実験的CLIツールcss-property-type-validator generateは既存CSSファイルをスキャンしてレビュー可能なproperties.cssの初稿を出力します。color-mix()とdisplay-p3色空間を使って単一の--wll-brand-colorから11段階スケールを自動生成するカラーテーマ記事も注目を集めました。Kevin Powellのレイアウトプリミティブ記事ではposition: absoluteなしに使えるStack・Prose・Pileパターンを詳説しました。

Key Takeaways
  • CloudflareがVoidZero（Vite、Rolldown、Oxlint、Oxfmt）を買収しました。すべてのプロジェクトはMITオープンソースとして継続され、RolldownはすでにVite 8のデフォルトバンドラーとしてESLint比50-100倍の速度を提供しています。
  • クロスドキュメントView Transitionsは@view-transitionにnavigation: autoを設定することでChrome・Edge・Safariで利用可能です。アクセシビリティのためprefers-reduced-motionで囲み、Firefoxではプログレッシブエンハンスメントとして扱ってください。
  • CSS @propertyはカスタムプロパティへのtransition補間を解放します。css-property-type-validator generate CLIを使えば既存CSSファイルから@property登録の初稿を自動生成できます。