Now and Next Generation of CSS Cascading Model

Now and Next Generation of CSS Cascading Model araya @arayaryoma FRONTEND CONFERENCE OKINAWA 2023 araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023

自己紹介 araya / Ryoma Abe x.com/arayaryoma github.com/arayaryoma bsky.app/profile/araya.dev Web standardsやBrowser APIが好き 今日はCSSの新しめの仕様について 話します araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023 2020年4月 日経入社 日経電子版のWeb開発

Agenda 1. 誰しもが一度は通る道なアレ 2. CSSのcascadeについておさらい 3. Layerとは 4. Scopeとは 5. これからのCSSとどう付き合う？ slide: araya.dev/slides/fec-okinawa-2023 araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023

みんな(?)一回はやってる 結果 Modal 1を上に置きたい なんらかのCSSライブラリ lib.css なんかz-index効いてない araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023

CSSで、魔法のコトバといえば？ araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023

!important araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023

とりあえず !important !importantはすべてを解決する!!(?) 結果 lib.css -> !important地獄へ araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023

正々堂々(?) specificity(詳細度)で勝負 結果 lib.css -> 詳細度を上げるために無駄にclassやidを増やしまくる戦いへ araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023

CSSの宣言の順位付け araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023

CSSの宣言の順位付け CSSの宣言の順位付けの決定についての仕様はW3CのCSS Cascading and Inheritance というmodule で定義されている ● 現状読むべきなのはLevel4~Level6 ○ https://www.w3.org/TR/css-cascade-4/ ○ https://www.w3.org/TR/css-cascade-5/ ○ https://www.w3.org/TR/css-cascade-6/ araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023

• https://www.w3.org/TR/css-cascade-4/
• https://www.w3.org/TR/css-cascade-5/
• https://www.w3.org/TR/css-cascade-6/

CSSの宣言の順位付け - css-cascade-4 1. Origin and Importance 2. Context 3. Specificity 4. Order of Appearance araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023 この順に評価されていく

CSSの宣言の順位付け - css-cascade-5 1. Origin and Importance 2. Context 3. Element-Attached Styles 4. Layers 5. Specificity 6. Order of Appearance araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023 この順に評価されていく

CSSの宣言の順位付け - css-cascade-6 1. Origin and Importance 2. Context 3. The Style Attribute 4. Layers 5. Strong Scoping Proximity 6. Specificity 7. Weak Scoping Proximity 8. Order of Appearance araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023 この順に評価されていく

Level4までで定義されていた概念の復習 araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023

Origin and Importance スタイルシートがどこで宣言されているか。Origin間と!importの有無で優先度の強弱がある 1. Transition declarations 2. Important user agent declarations 3. Important user declarations 4. Important author declarations 5. Animation declarations 6. Normal author declarations 7. Normal user declarations 8. Normal user agent declarations araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023

Context ShadowDOMなどのカプセル化されたコンテキスト ShadowDOMに、ShadowDOM外からstyleを差し込んでいる場合、!importantなしでは外側のコンテ キストに由来する宣言が勝ち、!importantでは内側のコンテキストに由来する宣言が勝つ araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023

Specificity CSSセレクターの詳細度 詳細度自体の仕様はSelectors moduleで定義されている 詳細度の強さの例: ( `>` はセレクタではなく強弱を表している) ● h1 > * ● .heading > h1 ● h1.heading > .heading ● h1#foo.heading > h1.heading araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023

Order of Appearance 宣言の出現順 後ろに現れたものが優先される 右の例では z-index:10; が使われる araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023 lib.css

CSSの宣言の順位付け - css-cascade-5 1. Origin and Importance 2. Context 3. Element-Attached Styles 4. Layers 5. Specificity 6. Order of Appearance araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023

新しい概念1 - Layer araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023

Layer CSS Cascading and Inheritance Level 5で追加された概念 Originsのように、stylesheetがどこに属するかによって優先度を決定づけする仕組みをauthorに提供 する stylesheetにlayerを指定する方法は@layer 宣言と@import 宣言での layer 付与の2つ layerを宣言しなかった宣言については暗黙的に”final” layerとして扱われる araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023

Layer - 宣言の仕方 araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023

Layer - 優先度との関与 final layer > explicit layer 右の例では color: blue; が優先される araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023

Layer - 優先度との関与 異なるlayerにある同一の宣言は 後に定義されたlayerが優先される layerの宣言時にlibよりもoverrideのほうが 後になっているため、lib layer内の宣言は override layer内の宣言に負ける araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023

modalの例をlayerで解決してみる 結果 lib.css araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023

新しい概念2 - Scope araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023

Scope CSS Cascading and Inheritance Level 6で策定中の概念 Document Treeにおいて、stylesheetを適用する範囲を定義することができる 例: main が scope root, .contents が scope limits となる araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023

@scopeでのscope定義例 araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023 結果

@scopeでのscope定義例 - limit付き 結果 .nav-bar から .sub-list までのscope にあるulにlist-style: noneを適用 (境界は含まない) araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023

@scopeでのscope定義例 - limit付き 結果 nav.nav-bar ul li li ul.sub-list li araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023

style elementでの定義 結果 nav.nav-bar ul li li ul.sub-list li araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023

scopeが重なる宣言はどうなる？ 結果 div.root nav.nav-bar ul li li ul.sub-list li araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023

scopeが重なる宣言はどうなる？ 結果 div.root nav.nav-bar ul li li ul.sub-list “scope proximity” の近いものが優先 .nav-bar > ul > li から見ると一番近いscopeに定義されている styleは `list-style: none` li araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023

Strong or Weak proximity? scopeのproximityをspecificityよりも先に見るか https://github.com/w3c/csswg-drafts/issues /6790 issueはopenだが、Chromeはweakでshipしてお り、W3Cの議論でもweakでまとまった様子 冒頭に話したcascadeの順序は整理されるはず araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023

• https://github.com/w3c/csswg-drafts/issues/6790

Layer と Scope とどう付き合うか araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023

実装状況 - Layer 各ブラウザでship済み これより下のバージョンをサポートしたい場合は @csstools/postcss-cascade-layers でトランスパイル可能 araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023

実装状況 - Scope Chrome系のブラウザでship済み Safariはサポート予定 https://github.com/WebKit/standards-positions/issues/13 Firefoxは議論中 https://github.com/mozilla/standards-positions/issues/472 specもまだ固まり切っていなくpostcssのpluginもないのでまだ実験以上に実用するのは難しい araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023

• https://github.com/WebKit/standards-positions/issues/13
• https://github.com/mozilla/standards-positions/issues/472

LayerとScope(発表者の見解) ● 具体的な事例はこれから出てくる ● LayerはCSS libraryとサービスstylesheetの強弱関係を明示することに役立つ ● Scopeはcomponent libraryの実装側に相性がいい ○ ビルド時にclassやattrにhash値を入れる必要がなくなる ○ sourcemapsがなくともソースと成果物の対応がつけやすくなる ■ ○ ● が、grepのしやすさはBEMなどのほうがいいかもしれない ブラウザ拡張などでのstylesheet上書きに対してフレンドリーに フロントエンド開発におけるCSS-in-JS/CSS modules問題に対しての1つの解答 araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023

まとめ ● !import書かない、詳細度で戦わない、命名ルール頑張らない、hash値のclassいらない、 未来のCSS ● Scope, Layerの概念説明はしましたがspecificityやnestなど細かい仕様については説明を削った のでぜひMDNやdraftを読んでみてください ● ○ https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers ○ https://www.w3.org/TR/css-cascade-5/#cascade-layers ○ https://drafts.csswg.org/css-cascade-6/#scoped-styles ユースケースや活用事例については我々CSSを書くエンジニアが探っていく araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023

• https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers
• https://www.w3.org/TR/css-cascade-5/#cascade-layers
• https://drafts.csswg.org/css-cascade-6/#scoped-styles