Google I/O 2026のChrome新機能、CSS @functionと::search-textが利用可能に
Google I/O 2026が開催され、Chromeの関連セッションは公式サイトからオンデマンドで視聴できる状態になっています。CSSの領域で近年注目されているのが、@function（引数を受け取り値を返すカスタム関数）と::search-text（ページ内検索でマッチした文字列を装飾するとされる擬似要素）です。これまでSassなどのプリプロセッサに頼っていた処理や、標準では手が届かなかった検索ハイライトの見た目が、CSSだけで扱えるようになることが期待されています。本記事では、この2つの機能の概要と実務での使いどころを整理します。
Google I/O 2026とChromeの新機能
Google I/Oは、Googleが年に一度開催する開発者向けカンファレンスです。今年もChromeチームからプラットフォーム機能のアップデートが紹介されました。ここで取り上げる@functionは、CSS Working Groupの仕様「CSS Functions and Mixins Module」に基づくものです。ただしこの仕様は現時点でFirst Public Working Draft（初期の草案）段階にあり、ブラウザでの利用可能状況は今後の対応拡大を待つ形になるとみられます。::search-textについても、標準仕様の枠組みで議論が進められている可能性があります。
CSS @function：再利用できるカスタム関数
@functionは、引数を受け取り、内部でロジックを組んで値を返せる「CSSカスタム関数」を定義するアットルールです。カスタムプロパティ（CSS変数）だけでは表現しづらかった計算の再利用が、CSS標準の範囲で完結します。
@function --spacing(--level) {
result: calc(var(--level) * 8px);
}
.card {
padding: --spacing(2); /* 16px */
}
これまで同種の処理はSassの関数などプリプロセッサ側で書くのが一般的でした。@functionは評価のタイミングが計算値の算出時（呼び出し時点）にあるため、カスタムプロパティの値が動的に変わっても、それに追従して値を求められる点が従来手法との違いです。デザイントークン（間隔・色・タイポグラフィなどの設計値）をCSS内で一元管理しやすくなると期待されます。
::search-text：ページ内検索の見た目を制御
::search-textは、ブラウザの「ページ内検索（Ctrl+F / Cmd+F）」でヒットしたテキストを対象にする擬似要素とみられます。これまでブラウザ任せだった検索ハイライトの配色を、サイト側のCSSで指定できるようになる可能性があります。
::search-text {
background: #fff3b0;
}
::search-text:current {
background: #ffb703;
color: #000;
}
:currentを組み合わせると、いま注目しているマッチ（Enterで移動している現在位置）と、それ以外のマッチを見た目で区別できるとみられます。ダークテーマのサイトなどで、標準のハイライト色が背景に埋もれてしまうケースの改善に役立つことが期待されます。
Webディレクター視点での使いどころ
@functionは、コーポレートサイトやオウンドメディアで運用しているデザインシステムの間隔・スケール計算を、プリプロセッサへの依存を減らしつつ整理する用途に向くとみられます。ビルド工程を持たない小規模サイトでも、計算ロジックを再利用できるのは実務上の利点になりそうです。
::search-textは、ヘルプページや長文のドキュメントなど、ユーザーがページ内検索を多用する画面のUX改善に効くことが期待されます。ハイライト色をブランドカラーに寄せつつ、文字色との組み合わせでコントラストを確保することが大切です。WCAG（Web Content Accessibility Guidelines）のコントラスト基準を意識して配色を決めると、読みやすさを損なわずにデザインを統一できます。
いずれの機能も、まずはChromeでの動作を前提に段階導入し、対応していないブラウザではフォールバック（標準挙動）で問題が出ないことを確認する運用が現実的とみられます。
まとめ
Google I/O 2026の時期に注目されたCSS機能のうち、@functionはプリプロセッサに頼っていた計算の再利用をCSS標準に引き寄せる方向性を示し、::search-textはページ内検索の見た目をサイト側で制御できるようにすることが期待されています。まずは自分たちのデザインシステムやドキュメントページで小さく試し、ブラウザ対応状況とアクセシビリティの両面を確認したうえで採用範囲を広げていくとよいでしょう。