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

CSS @scope：命名規則と重い抽象化に代わる選択肢 — Smashing… — 2026年 第6週 CSS・スタイリング

今週はCSSが注目を集めました。中心はCSS @scopeがBEM命名規則やCSS-in-JSツールチェーンを代替できる実用的なBaseline互換の選択肢であるという明確な主張でした。2025年12月のFirefox…

calendar_todaysummarize2026年 第6週
CSS @scope：命名規則と重い抽象化に代わる選択肢 — Smashing Magazine
タグ: 詳細解説読了_時間: 8分

CSS @scope：命名規則と重い抽象化に代わる選択肢 — Smashing Magazine

CSS @scope at-ruleがBaseline互換（Firefox 146、2025年12月）となり、BEMのような命名規則やCSS-in-JSツールチェーンを置き換えられる現実的な選択肢になりました。@scope (nav) to (ul) { a { font-size: 14px; } }のように上限スコープルートと下限境界を組み合わせることで、:not擬似セレクタ不要で特定のサブツリーをスタイル対象から除外できます（"ドーナツスコーピング"）。複数の境界指定やスコープのネストも可能です。新しい近接性ベースの詳細度ルールにより、同じ詳細度を持つ選択子が競合する場合、一致要素に最も近いスコープルートが優先されます。.jsx-3130221066のような自動生成クラス名やBEMの冗長な階層構造を使わずに、Cascadeとブラウザ開発ツールの恩恵を維持しながらHTMLをシンプルに保てます。
記事を読むarrow_forward
チュートリアル14:24

厄介な問題を解決するCSSプロパティ

Kevin Powellはあまり知られていないCSSプロパティ5つをテンポよく紹介しています。insetはtop/right/bottom/leftをmarginライクな短縮表記で置き換えます（全体オーバーレイにはinset: 0）。isolation: isolateはz-indexなしで独立したstacking contextを作り、z-index: -1の疑似要素が親要素の外に出てしまう問題を防ぎます。width: fit-content（論理プロパティではmin-inline-size: fit-content）はボタングループがオーバーフローする代わりに自然に折り返せるようにします。aspect-ratioとobject-fit: coverの組み合わせはユーザーがアップロードした画像の比率を維持し、object-positionにCSSカスタムプロパティを使えば焦点位置も制御できます。最後にtext-wrap: balance（見出しの不自然な改行防止）とtext-wrap: pretty（段落最終行の一語孤立防止）を紹介しています。
AI_インフォグラフィック
厄介な問題を解決するCSSプロパティ — インフォグラフィック
動画_を見るarrow_outward
詳細解説56:53

スタイルで解決：CSSを再考する - Dylan Beattie - NDC London 2026

Dylan BeattieはNDC London 2026で、CSSが過小評価されており活発に進化しているという主張を展開する幅広い講演を行っています。HTMLのdetails/summary要素（2011年からブラウザ対応、相互排他的動作は2024年末にBaseline完成）でJavaScriptのアコーディオンウィジェットを完全に置き換える方法を実演します。10年来の"transition to auto"バグのオプトイン解決策であるinterpolate-size: allow-keywordsを紹介し、滑らかなheightアニメーションを実現します。step-start/step-endの非対称タイミングを使った複数プロパティのtransitionスタッキングでborder-radiusをコーナー単位でアニメーションする手法も解説します。カラーセクションではHSLに対するOKLCHの知覚的に均一な明度、相対カラー構文、@propertyドリブンのアニメーションを取り上げます。最後にChromiumエンジンでネイティブドロップダウンをCSSで完全スタイリングできるappearance: base-selectと::picker(select)を紹介しています。
AI_インフォグラフィック
スタイルで解決：CSSを再考する - Dylan Beattie - NDC London 2026 — インフォグラフィック
動画_を見るarrow_outward
タグ: テクニック読了_時間: 4分

CSSコンテナクエリであふれるテーブルセルを自動スクロール | chriskirknielsen

Christopher Kirk-NielsenはMastodon上で発見されたState of JS UIの不具合をきっかけに、テーブルセルのはみ出しテキストをホバー時にCSSだけで自動スクロールさせる手法を解説しています。核心はcontainer queryのインラインユニットを使い、セルのレンダリング幅を100cqi、子spanの自然幅を100%として把握する点です。オーバーフローのオフセットは--offset: max(0px, 100% - 100cqi)で計算し、短いラベルは0pxにクランプされて不要なアニメーションが起きません。テーブルレイアウトを維持するためtd内にdivを追加してdisplay: blockを指定し、インライン端にCSSのmaskでフェードのアフォーダンスを付与します。72 DPIのFirefoxで生じるGPUちらつき対策として静的なtranslate: 0も追加しています。
タグ: ガイド読了_時間: 2分

モバイルのテキスト拡大を尊重する新しいmetaタグ - Manuel Matuzovic

Manuel Matuzovićは、Josh Tumathが提案した新しいメタタグ — <meta name="text-scale" content="scale" /> — を紹介しています。このタグはブラウザにユーザーのシステムテキストサイズ設定をウェブサイトで尊重するよう指示します。現時点ではChrome Canaryのみに実装されており、emやremなどの相対単位で指定されたテキストはOSのフォントサイズに合わせてスケールされますが、px指定のテキストは固定されたままです。Firefoxは選択的なテキストスケーリングではなくページ全体のズームを行うため、px宣言のテキストも拡大され、メディアクエリのブレークポイントにも影響します。Matuzovićは、自身のサイトで確認したように、このメタタグを追加すると横スクロールが発生しうるため、導入前に十分なテストを行うよう注意を促しています。
タグ: リリース読了_時間: 2分

The CSS Selectionを発表 - Project Wallaceブログ

Bart Venemanは、10万以上のウェブサイトをスクレイピング・分析して制作した大規模なCSS使用状況調査「The CSS Selection 2026」を発表しました。Web Almanacを補完するコンセプトで、より多くのCSSメトリクスをカバーしながら、文脈を掴むためのアウトライアーも取り上げています。新しいCSS機能の実際の普及パターンとアンチパターンを把握でき、統計的なトレンドと時には驚くべきエッジケースも確認できるよう設計されています。Polypaneが公開スポンサーとして参加し、既存スポンサーのNetlifyとともにプロジェクトを支援しています。Venemanは今後のエディションでさらなる改善を取り入れる予定と述べています。
タグ: リリース読了_時間: 4分

Geist Pixelを発表

VercelがGeistファミリーをGeist Pixelで拡張しました。Geist SansやGeist Monoと同じグリッドベースの設計原則に基づいたビットマップインスパイアのタイプフェイスです。Square、Grid、Circle、Triangle、Lineの5つのバリアントがそれぞれ独立してエクスポートされ、npm i geistでCSSカスタムプロパティ（--font-geist-pixel-squareなど）として利用できます。ピクセルグリッドの見た目にもかかわらず、不均一なウェイト分布や途切れた斜線を防ぐため全グリフが手作業で調整されています。ファミリー全体で480グリフ、7つのスタイリスティックセット、32言語スクリプトをサポートし、既存のGeistファミリーと垂直メトリクスが揃えられているためシームレスに混在させることができます。Geist Serifも開発中であることを示唆し、システムのさらなる拡張が予告されています。
summarizeダイジェスト_要約

今週はCSSが注目を集めました。中心はCSS @scopeがBEM命名規則やCSS-in-JSツールチェーンを代替できる実用的なBaseline互換の選択肢であるという明確な主張でした。2025年12月のFirefox 146でクロスブラウザサポートが完成した今、上限ルートとオプションの下限境界の間をスコープするドーナツスコーピングは、冗長なクラス階層や生成されたセレクタに疲れたチームがすぐに活用できるツールです。近接性ベースの詳細度により、手動オーバーライドなしに同じ詳細度の競合でスコープが優先されます。

今週のスタイリング議論にはDylan BeattieのNDC London講演も含まれていました。interpolate-size: allow-keywordsでheight-to-auto遷移をスムーズに処理し、OKLCHで知覚的に均一な色を実現し、appearance: base-selectと::picker(select)でChromiumエンジンにて完全CSSスタイルのネイティブドロップダウンを実現する方法を示しました。Kevin Powellはisolation: isolate、text-wrap: balance、aspect-ratioなど使われていないプロパティ5つでJavaScriptなしに一般的なレイアウト問題を解決する方法を紹介しました。Christopher Kirk-Nielsenはcqiユニットを活用してオーバーフローするテーブルセルを自動スクロールするcontainer queryテクニックを披露しました。

エコシステムへの注目すべき追加も二件ありました。VercelはCSSカスタムプロパティを通じてGeistデザインシステムにシームレスに統合できる5バリアントのビットマップインスパイアのタイプフェイス、Geist Pixelをリリースしました。Bart Venemanは100,000以上の実サイトをスクレイピングして新しいCSS機能の実際の普及状況をマッピングするThe CSS Selection 2026調査を発表しました。

重要ポイント
  • CSS @scopeはFirefox 146でBaseline互換が完成し、今すぐBEMのクラス階層を代替できます。ドーナツスコーピングと近接性ベースの詳細度がコンポーネント分離の仕組みを変えます。
  • interpolate-size: allow-keywordsはheight-to-auto遷移問題の待望の解決策であり、OKLCHやappearance: base-selectとともに、ネイティブCSSが多くのJavaScriptの回避策を静かに追い越しました。
  • 100,000以上の実サイトをサンプリングするThe CSS Selection 2026調査は、新しいCSS機能が実際のプロダクションにどれだけ普及しているかを示すコミュニティ最高の資料となるでしょう。