(BUSAN.SASHIMI)
週刊ダイジェスト // STYLING — 2026年 第38週
palette週刊レポート

Safari 27・コンテナークエリー・ネイティブ操作 | 第38週スタイリング

Safari 27のブラウザー改善、コンポーネントの空間に応じるコンテナークエリー、ネイティブのフォーカス動作を保つチェックボックス実装を整理します。

calendar_todaysummarize2026年 第38週bolt重要更新 1件
Safari 27.0のWebKit新機能
タグ: フレームワークアップデート読了_時間: 80分

Safari 27.0のWebKit新機能

Safari 27.0は83の機能と844の修正を提供し、ネイティブコントロール、レイアウトの安定性、JavaScriptのモジュール読み込みを改善します。カスタマイズ可能なselectでは、キーボード操作、検証、フォーム送信を維持したまま、appearance: base-selectと新しいスタイリングの仕組みを利用できます。スクロールアンカリングは標準で有効になり、変形したアンカーにツールチップやポップオーバーが追従し、position-anchorの初期値もautoからnormalに変わります。再実装したECMAScriptモジュールローダーはtop-level awaitの実行順序を修正し、WebAssemblyにはJavaScript Promise Integrationが加わります。WebKitのBigInt数学APIはStage 1の提案に基づくため、APIの形が変わる可能性を考慮し、ブラウザー間の動作を確認してから依存する必要があります。
記事を読むarrow_forward
CSS機能9:47

流動的なタイポグラフィを修正する

Kevin Powellは、コンテンツのラッパーが最大幅に達した後も、ビューポート基準の文字サイズが拡大し続ける問題を示します。コンテナークエリー単位は局所的な空間に追従しますが、入れ子のコンテナーでは同じ見出しが異なる幅を基準に計算される問題が生じます。提案する方法はカスタムプロパティを長さとして登録し、子孫が各コンテナーで元の式を再評価する代わりに計算済みサイズを継承できるようにします。意図的に局所的な再計算をしたい場所のため、登録しないサイズ計算式も残せます。要点は、どこで文字サイズを計算し、どこで結果を統一するかを決め、入れ子のレイアウトで動作を試すことです。
AI_インフォグラフィック
流動的なタイポグラフィを修正する — インフォグラフィック
動画_を見るarrow_outward
タグ: CSS機能読了_時間: 5分

アイコンとラベルをより自然に揃える

Ahmad Shadeedは、複数行のラベルの横でアイコンを垂直中央に揃えると、最初の行ではなく行間に置かれる場合があることを説明します。固定のピクセル値による補正は一例では機能しても、文字サイズや行の高さが変わると合いません。代案では最初の行の高さと既知のアイコンサイズの差から移動量を求め、calc()の式でlh単位を使います。アイコンを上端から始めて最初の行に合うように移動させ、サイズと縮小の動作も明示します。この方法は、一枚の画面に合わせた位置ではなく、タイポグラフィの変化に応じて配置を保ちます。
タグ: CSS機能読了_時間: 5分

::checkmarkが使えるようになるまでのカスタムチェックボックスパターン

Andy Bellは実際のチェックボックスinputとネイティブのフォーカス動作を保ちながら、カスタムチェックボックスを作ります。全体を囲むlabelがテキストとコントロールを結び、aria-hiddenを指定したSVGが支援技術の不要な読み上げを増やさずにチェック印を表示します。inputにはappearance: noneと絶対配置を使い、CSSの:checkedでアイコンを切り替え、:has()で周囲のボックスを変更します。相対単位のemとexによって文字サイズに合わせて拡大でき、ベースライン揃えで折り返したラベルの位置を維持します。このパターンはラジオボタンにも応用でき、チェックボックスでappearance: baseと::checkmarkが広く使えるようになるまでの代替手段になります。
タグ: CSS機能読了_時間: 10分

CSSコンテナークエリーを従来のメディアクエリーと同じに扱わない

コンテナーのサイズクエリーは再利用するコンポーネントを割り当てられた空間に応じて変化させ、メディアクエリーはページ全体のレイアウトやユーザー設定を担当します。Victor Ayomipoは、広いデスクトップ画面でも狭いサイドバー内のカードには縦配置が必要になる例を示します。親コンテナーに名前を付けてcontainer-type: inline-sizeを指定すると、@containerで子孫をスタイリングでき、cqiとclamp()で文字サイズもコンポーネント幅に連動させられます。記事はflexの折り返しを利用する手法を示す一方、コンテナーは自身を照会できず、明示的な寸法なしのcontainer-type: sizeは高さを失わせる可能性があり、クエリーのしきい値にはvar()を使えないと説明します。ビューポートのしきい値を流用せず、コンポーネントが実際に必要とする空間から切り替え条件を決めることが重要です。
summarizeダイジェスト_要約

Safari 27.0はカスタマイズ可能なselect、自動スクロールアンカリング、多くの互換性修正によって、コンポーネントの動作を担うブラウザーの役割を強めます。独自のコントロール処理に置き換える前に、ブラウザーが提供する動作を土台にすることが重要です。

この原則はレスポンシブ設計にも当てはまり、コンテナーのサイズクエリーは実際に与えられた空間にコンポーネントを合わせ、メディアクエリーはページ配置やユーザー設定を担当します。ビューポートの切り替え条件を別の規則へ移すだけでなく、適切なコンテナーとサイズの封じ込めによる影響を検討する必要があります。

ネイティブ機能はコントロールごとに異なり、新しいselectのスタイリングが同じチェックボックスのカスタマイズを保証するわけではありません。Andy Bellの暫定パターンは実際のinputとフォーカス動作を残して見た目を変え、基盤となるコントロールを捨てずに表現を改善する方法を示します。

タイポグラフィでは、同じ境界がより小さな単位で現れます。Ahmad Shadeedは行の高さからアイコンをラベルの最初の行に揃え、Kevin Powellは流動的な文字サイズをどこで計算するかを考えます。両者とも特定のレイアウトに合わせた補正より、内容が変わっても保たれる関係を重視します。

重要ポイント
  • 既存コンポーネントでSafari 27.0のネイティブselectスタイルと変更されたposition-anchorの初期値を検証してください。
  • コンポーネントに使える空間からコンテナークエリーの切り替え条件を決め、ページ単位の判断にはメディアクエリーを使ってください。
  • チェックボックスの見た目を変える際も、実際のinputとキーボードフォーカスを維持してください。