CSS関数@function — CSSのNative Custom Function
CSS Functions and Mixins Module Level 1 の @function at-rule により、CSS がネイティブのユーザー定義関数をサポートするようになりました。Sass やビルド時プリプロセッサーは不要になります。関数はデフォルト値付きの型指定パラメーターを受け取り、ローカル変数を定義し、条件付きの @media ブロックを含めることができます。スコーピングモデルは動的で、ローカル変数がパラメーターをシャドウし、パラメーターがコールサイトの custom property をシャドウします。Chromium 139 で @function がサポートされ、Firefox と Safari はまだ未対応です。静的な clamp() フォールバックに @function 呼び出しを続けるカスケードベースのプログレッシブエンハンスメントパターンは、CSSOM のパース時フィルタリングにより二重計算を回避できます。
Read Articlearrow_forward Video · CSS関数
CSS @functionの使い方 — Native Custom Functionを解説
この Coding2GO 動画は実践的でわかりやすい例を通じて CSS @function at-rule を解説します。OKLCH 形式の相対カラー構文とパラメトリックな alpha 値を使った透明度ヘルパーをデモし、color や number のような山括弧型の型指定パラメーター、オプションのデフォルト値、number または percentage のようなユニオン型のための type() 関数を説明します。JavaScript との重要な概念の違いも解説されます：result ディスクリプターは早期リターンではなく、CSS は関数本体全体を評価し続け、最後にマッチした result が適用されます。最後に inner-radius 関数で max() を使って負の値を防ぐ outer-radius-minus-padding 公式のカプセル化を紹介します。
AI_INFOGRAPHICWATCH_VIDEOarrow_forwardArticle · テストREAD TIME: 8m
css-expect：CSS Custom Function向けBrowser-backed Unit Test
css-expect はネイティブ CSS @function ルールを実際のブラウザエンジンでテストするためのファーストベータ assertion ライブラリです。Sass True にインスパイアされ、Playwright で Chromium インスタンスを起動し、CSS ファイルをライブドキュメントに読み込み、各 assertion ごとに一時ルールを生成して getComputedStyle() で計算値を読み取ります。css.function("--double", ["4px"]).as("inline-size").equals("8px") のように流暢にチェーンでき、.with({ "--gap": "2px" }) でコールサイトの custom property を注入して動的スコープ動作をテストできます。Vitest と直接統合でき、unsupported: "skip" モードで @function 非対応ブラウザでは安全にスキップします。
READ_FULL_LOGarrow_forwardArticle · レイアウトREAD TIME: 3m
Grid Lane Field Guideを発表
WebKit チームが CSS Grid Lanes のインタラクティブリファレンスガイドを gridlanes.webkit.org で公開しました。ガイドはウォーターフォールとブリックレイアウトの切り替え、flow-tolerance スライダーの操作、タブ順の再生によるアクセシビリティ確認ができるライブ編集プレイグラウンドを提供します。チートシートは display: grid-lanes、fr 単位、minmax()、repeat()、auto-fill と auto-fit の違い、gap、トラックスパン、明示的配置など全プロパティと値をカバーしています。Photos、Recipes、Newspaper、Mega Menu、Timeline、Pinboard の 6 つのデモには、Flexbox・Multicolumn・Grid とのレイアウト比較パネルが含まれます。Grid Lanes は現在 Safari 26.4 以降で動作します。
READ_FULL_LOGarrow_forwardArticle · ビジュアルエフェクトREAD TIME: 4m
React NativeでLiquid Glassを使う方法
Apple の Liquid Glass は iOS 26 の新しいデザイン素材で、タブバーやウィジェットなどの UI クロームに GPU アクセラレートされたリアルタイムの半透明と屈折効果を提供します。Callstack はリリース初日から React Native 開発者がこの効果を使えるよう、@callstack/liquid-glass オープンソースライブラリを公開しました。ライブラリはインタラクティブタッチ効果、effect スタイル（clear vs regular）、tintColor オーバーレイ、colorScheme props を持つ LiquidGlassView と、spacing prop で制御されるモーフィングアニメーションで隣接する glass 要素を結合する LiquidGlassContainerView を提供します。isLiquidGlassSupported フラグで iOS 26 未満および Android でのフォールバックスタイリングが可能です。
READ_FULL_LOGarrow_forwardArticle · レイアウトREAD TIME: 2m
Grid LaneによるProgressive Enhancement型Data-dense Layout
Project Wallace の CSS アナライザーページは予測不能な数十の指標を表示するため、レポートが少ない場合に大きな余白が生じます。Bart Veneman は @supports を使った 3 段階のプログレッシブエンハンスメントでこれを解決しました。display: grid-lanes をサポートするブラウザはモダンな masonry レイアウトを、grid-template-rows: masonry のみサポートするブラウザはレガシー Firefox 構文を、それ以外は minmax(24rem, 1fr) カラムの標準 auto-fit グリッドを使います。否定ガードにより両機能をサポートする仮想ブラウザでレガシー構文が有効化されるのを防ぎます。JavaScript なしでブラウザサポート範囲内においてビューポートを明らかに高密度にしました。
READ_FULL_LOGarrow_forwardArticle · ブラウザREAD TIME: 5m
WWDC26のWeb Technology Session
WebKit チームは WWDC26 で Safari 27 の主要機能を取り上げる 6 つのセッションを発表しました。Grid Lanes はアクセシビリティ制御のための flow-tolerance とともに waterfall および brick 方向の CSS のみの masonry を Safari に導入します。Customizable Select は appearance: base-select を導入し、ネイティブのアクセシビリティセマンティクスを保ちながら ::picker(select)、::picker-icon、::checkmark 擬似要素への完全な CSS 制御を提供します。model 要素は iOS、iPadOS、macOS Safari 27 に environmentmap、stagemode="orbit"、JavaScript アニメーション API とともに導入されます。visionOS 27 では Immersive API が model を完全な空間環境に拡張します。Web Extensions のパッケージングは Xcode や Mac なしで任意の OS のブラウザから App Store Connect 経由で提出できるようになりました。
READ_FULL_LOGarrow_forwardsummarizeDigest_Summary
今週のスタイリング分野最大のニュースは CSS ネイティブカスタム関数の登場でした。CSS Functions and Mixins Module Level 1 の @function at-rule が Chromium 139 でサポートされ、デフォルト値付きの型指定パラメーター、ローカル変数、@media ベースの条件付き戻り値など、Sass のようなプリプロセッサーがランタイムでは根本的に実現できなかった機能が利用可能になりました。併せて登場した css-expect ライブラリは Playwright を活用して @function ルールを Vitest と直接統合したユニットテストを可能にし、この新しい機能のテスト空白を埋めます。@supports at-rule(@function) ガードは Chromium 148 でようやく導入されたため、推奨されるプログレッシブエンハンスメントパターンはカスケードベースの clamp() フォールバックに @function 呼び出しを続ける形式です。
CSS Grid Lanes も WWDC26 の話題とともに今週大きな存在感を示しました。WebKit チームは gridlanes.webkit.org にインタラクティブリファレンスガイドを公開し、waterfall と brick レイアウトモードのライブ編集デモ、アクセシビリティ調整のための flow-tolerance スライダー、Flexbox・Multicolumn・標準 Grid と比較する Photos・Recipes・Newspaper・Mega Menu・Timeline・Pinboard の 6 つの実世界デモレイアウトを提供しています。Project Wallace は JavaScript 不要で Grid Lanes を活用する実用的な 3 段階 @supports プログレッシブエンハンスメントを公開し、WWDC26 セッションでも CSS Grid Lanes、appearance: base-select によるカスタマイズ可能な select、Safari 27 に登場する model 要素が注目を集めました。
ビジュアルエフェクト分野では Callstack が Apple の iOS 26 Liquid Glass マテリアルをモバイルに提供するオープンソース React Native ライブラリ @callstack/liquid-glass をリリースしました。effect style・tintColor・colorScheme の props を持つ LiquidGlassView と LiquidGlassContainerView コンポーネント、旧 iOS および Android 向けの isLiquidGlassSupported フォールバックフラグを提供します。
Key Takeaways- CSS @function（Chromium 139+）は型指定パラメーター・ローカル変数・@media 条件付き戻り値を備えたネイティブカスタム関数を実現し、多くの Sass ユースケースを代替します。クロスブラウザ安全性にはカスケードベースの clamp() フォールバックが推奨されます。
- CSS Grid Lanes が gridlanes.webkit.org（Safari 26.4+）に包括的なインタラクティブリファレンスガイドを公開し、@supports ベースの段階的エンハンスメントで JavaScript なしの masonry スタイルレイアウトが実現可能になりました。
@callstack/liquid-glass ライブラリは Apple の iOS 26 Liquid Glass エフェクトをリリース初日から React Native に提供し、LiquidGlassView・LiquidGlassContainerView・isLiquidGlassSupported によるグレースフルデグラデーションをサポートします。
