詳細解説 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をシンプルに保てます。
Read Articlearrow_forward Video · チュートリアル 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_INFOGRAPHICopen_in_full close WATCH_VIDEOarrow_forward Video · 詳細解説 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_INFOGRAPHICopen_in_full close WATCH_VIDEOarrow_forward Article · テクニック READ TIME: 4m
CSSコンテナクエリであふれるテーブルセルを自動スクロール | chriskirknielsen Christopher Kirk-NielsenはMastodon上で発見されたState of JS UIの不具合をきっかけに、テーブルセルのはみ出しテキストをホバー時にCSSだけで自動スクロールさせる手法を解説しています。核心はcontainer queryのインラインユニットを使い、セルのレンダリング幅を100 cqi、子spanの自然幅を100% として把握する点です。オーバーフローのオフセットは--offset: max(0px , 100% - 100 cqi)で計算し、短いラベルは0px にクランプされて不要なアニメーションが起きません。テーブルレイアウトを維持するためtd内にdivを追加してdisplay: blockを指定し、インライン端にCSSのmaskでフェードのアフォーダンスを付与します。72 DPIのFirefoxで生じるGPUちらつき対策として静的なtranslate: 0 も追加しています。
READ_FULL_LOGarrow_forward Article · ガイド READ TIME: 2m
モバイルのテキスト拡大を尊重する新しいmetaタグ - Manuel Matuzovic Manuel Matuzovićは、Josh Tumathが提案した新しいメタタグ — <meta name="text-scale" content="scale" /> — を紹介しています。このタグはブラウザにユーザーのシステムテキストサイズ設定をウェブサイトで尊重するよう指示します。現時点ではChrome Canary のみに実装されており、emやremなどの相対単位で指定されたテキストはOSのフォントサイズに合わせてスケールされますが、px指定のテキストは固定されたままです。Firefoxは選択的なテキストスケーリングではなくページ全体のズームを行うため、px宣言のテキストも拡大され、メディアクエリのブレークポイントにも影響します。Matuzovićは、自身のサイトで確認したように、このメタタグを追加すると横スクロールが発生しうるため、導入前に十分 なテストを行うよう注意を促しています。
READ_FULL_LOGarrow_forward Article · リリース READ TIME: 2m
The CSS Selectionを発表 - Project Wallaceブログ Bart Venemanは、10万 以上のウェブサイトをスクレイピング・分析して制作した大規模なCSS使用状況調査「The CSS Selection 2026 」を発表しました。Web Almanac を補完するコンセプトで、より多くのCSSメトリクスをカバーしながら、文脈を掴むためのアウトライアーも取り上げています。新しいCSS機能の実際の普及パターンとアンチパターンを把握でき、統計的なトレンドと時には驚くべきエッジケースも確認できるよう設計されています。Polypane が公開スポンサーとして参加し、既存スポンサーのNetlify とともにプロジェクトを支援しています。Venemanは今後のエディションでさらなる改善を取り入れる予定と述べています。
READ_FULL_LOGarrow_forward Article · リリース READ TIME: 4m
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 も開発中であることを示唆し、システムのさらなる拡張が予告されています。
READ_FULL_LOGarrow_forward summarize Digest_Summary
今週は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 調査を発表しました。
Key Takeaways 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機能が実際のプロダクションにどれだけ普及しているかを示すコミュニティ最高の資料となるでしょう。
