ブラウザ更新Safari 26.5のWebKit機能
Safari 26.5 ではいくつかの重要な CSS 機能が追加されました。新しい :open 疑似クラスは、details・dialog・select・input 要素の開いた状態を統一的にスタイリングするセレクターを提供し、[open] 属性セレクターの断片的な使用を解消します。CSS random() 関数は仕様に沿った更新を受け、名前付きキャッシュキーがデフォルトでグローバルスコープとなり、element-scoped キーワードで要素ごとの動作を復元できます。Anchor Positioning はメディアクエリの再評価・チェーンアンカー・sticky 親要素に関する 5 件のバグ修正を受け、Scroll-driven animations も 4 件の信頼性向上パッチが適用されました。SVG の color-interpolation 属性が linearRGB グラデーションをサポートし、より滑らかな色遷移が実現されます。
Read Articlearrow_forward Video · アニメーション
5分でCSS sibling-index()とsibling-count()を学ぶ
この 5 分間のチュートリアルでは、要素の位置と兄弟要素の総数を CSS 内で直接取得できる新関数 sibling-index() と sibling-count() を解説します。アニメーションのスタガリングでは、sibling-index() がハードコードされた nth-child 遅延を置き換えます。持続時間を乗算して 1 を引くと、HTML に何要素あっても自動的にスケールするゼロ起点の遅延が生成されます。動的カラーグラデーションには、(sibling-index() - 1) を (sibling-count() - 1) で割ると 0〜1 の進行値が得られ、OKLCH の lightness を範囲全体に展開できます。ボーナス例として、sibling-index() と transform 内の三角関数を使って純粋な HTML と CSS で構築した 3D イメージカルーセルも紹介しています。現時点で Firefox はサポートされていません。
AI_INFOGRAPHICWATCH_VIDEOarrow_forwardVideo · カラー
CSS contrast-color()で堅牢なColor Systemを構築
Kevin Powell は、すべてのブラウザで baseline-newly-available となった CSS contrast-color() 関数を紹介します。指定した背景色に基づいて自動的に黒または白のテキストを選択します。内部デフォルトと外部オーバーライドを分離するためにアンダースコア接頭辞を使ったプライベートカスタムプロパティパターンでボタンテーマシステムを構築し、単一の --button-surface 変数が background・ホバー状態・contrast-color() 呼び出しを冗長な宣言なしにカスケードします。ホバー状態では sRGB の color-mix() とニュートラルパレットトークンを組み合わせ、そのトークンに light-dark() を使うことでアクティブなカラースキームに応じて自動的に明暗が変わることを実演しています。主な制限として、contrast-color() は現在 white または black のみを出力し、任意の色はサポートされていません。
AI_INFOGRAPHICWATCH_VIDEOarrow_forwardArticle · CSS ロジックREAD TIME: 12m
CSS if()関数がStylesheetへNative Conditional Logicを導入
CSS if() 関数は CSS 2025 スナップショットに追加され、Chrome 137+ で利用可能となりました。プロパティ値に直接インライン条件ロジックを記述できます。カスタムプロパティ値で分岐する style クエリ、レスポンシブサイジングを該当プロパティの隣に記述できるインライン media クエリ、@supports ブロックを置き換える feature クエリの 3 種類の条件タイプをサポートします。条件と値のペアはセミコロンで区切り、サポートブラウザで無効な宣言を避けるために else 句が必要です。if() を入れ子にすると多軸コンポーネントバリアントが実現でき、calc() や clamp() と組み合わせると高度なフルードサイジングが可能になります。Firefox と Safari のサポートはまだ開発中です。
READ_FULL_LOGarrow_forwardArticle · タイポグラフィREAD TIME: 6m
CSS round()でFluid Sizingを改善
clamp() とコンテナクエリ単位を使ったフルードサイジングは、19.7px や 143.2px のような小数点値を生成しがちです。Ahmad Shadeed は CSS round() 関数がモード（up・down・nearest・to-zero）・値・間隔を引数に取り、計算値を予測可能なステップにスナップする方法を解説します。実用例として、font-size を最近傍 4px に丸めるカードコンポーネント、5 段階のフルードサイズを一貫した増分に揃えるタイプスケール、ラインスナップ型エディトリアルレイアウトを紹介しています。CSS Grid 内の固有高さには round() と calc-size(auto, ...) を組み合わせ、丸め前に実際の要素高を取得します。round() はハード依存ではなくプログレッシブエンハンスメントとして活用することを推奨しています。
READ_FULL_LOGarrow_forwardArticle · HTML セマンティクスREAD TIME: 18m
HTML Listを本当には知らない
ol と ul だけでなく、HTML には 5 種類の固有のリスト型と、正しく選ぶための決定木があります。制御リストは、固定選択肢には select・option・optgroup を、range や week を含むあらゆる入力タイプへの候補提示には input と datalist を使います。順序付きリストは reversed および start 属性で順序依存の意味をエンコードします。Description list（dl・dt・dd）— HTML5 で進化した定義リスト — はキーと値のメタデータや JSON デバッグに活用されます。menu 要素はツールバーボタンなどのインタラクティブコントロールを意味的にグループ化し、ul への role=menu 付与を不要にします。dl を 2 カラム flex レイアウトで表示する CSS パターンと、型付き attr() 関数と writing-mode を使って range input に datalist の目盛りを配置する方法も紹介しています。
READ_FULL_LOGarrow_forwardArticle · フルード タイプREAD TIME: 13m
CSSで代数学を学び直した — しかも楽しかった
グリッドエリア内の img に紛れ込んだ margin-block-end が原因のカルーセルレイアウトバグが、コンテナクエリを使ったフルードタイポグラフィの深掘りへと発展しました。clamp() の中間引数は y = mx + b の傾き切片方程式であり、cqi などの CSS 長さ単位は係数とコンテキスト変数を 1 トークンにエンコードしています。MIN・MAX・2 つのコンテナ幅 W1 と W2 が決まれば、傾きと切片は導出値として求まります。実際のピクセル値を使った計算例と、4 つのパラメータを CSS カスタムプロパティで管理するコードスニペットを提供しています。長い複合語に対する hyphens: auto、フルード padding と font-size の連動、そして cqi が測定するコンテンツボックスと DevTools が表示するアウターボックスの重要な違いも解説しています。
READ_FULL_LOGarrow_forwardsummarizeDigest_Summary
今週はブラウザに新しいCSS機能が数多く追加されました。Safari 26.5は details・dialog・select・input 要素の open 状態を統合スタイリングする :open 疑似クラスを出荷し、CSS random() で名前付きキャッシュキーがデフォルトでグローバルスコープになる仕様更新、Anchor Positioning の5件のバグ修正、Scroll-driven アニメーションの信頼性パッチ4件も含まれています。CSS 2025 スナップショットに収録され Chrome 137+ で利用可能になった CSS if() 関数は、プロパティ値内にインラインで style クエリ・インライン media クエリ・feature クエリをサポートする条件ロジックを追加します。Firefox と Safari のサポートはまだ開発中です。
新しい数学・位置関数が純粋な CSS で実現できる範囲を拡大しています。Ahmad Shadeed は round() が clamp() やコンテナクエリ単位から生成されるフルードサイズ値を予測可能なピクセルステップにスナップする方法を実演しました。例えば font-size を最近傍4pxに丸め、calc-size(auto, ...) と組み合わせて CSS Grid の固有高さを処理します。CSS sibling-index() と sibling-count() は、JavaScript なしで動的なスタガーアニメーションと OKLCH カラーグラデーションを実現するため、要素の位置と兄弟要素の総数を CSS に直接公開します。
Kevin Powell は全ブラウザで baseline-newly-available となった contrast-color() を使ってボタンテーマシステムを構築し、プライベートカスタムプロパティパターン・color-mix()・light-dark() を組み合わせる方法を示しました。HTML リストセマンティクスの深掘り記事では ol・ul を超えた5種類の固有リスト型が明確に説明されました。datalist を活用した select、reversed 順序リスト、dl 説明リスト、インタラクティブコントロールグループ向け menu 要素などです。
Key Takeaways- CSS if() が Chrome 137 で style クエリ・インライン media クエリ・feature クエリをサポートして登場しました。今すぐ実験できますが、Firefox と Safari のサポートはまだ開発中のため @supports でゲートしてください。
- CSS round() はフルードサイジングに欠けていたピースです。clamp() の出力を round(nearest, ..., 4px) で包んでサブピクセルのフォントサイズや間隔値を排除し、Grid の固有高さには calc-size(auto) と組み合わせましょう。
contrast-color() がクロスブラウザの baseline になりました。プライベートカスタムプロパティパターンと sRGB の color-mix()・light-dark() と組み合わせると、JavaScript のカラーロジックなしに完全自動化されたカラースキーム対応ボタンテーマを構築できます。
