CSS adv
Day3では、Day1、2からの流れとしてCSSは「ヒント」であるという話が書かれている “Content should be viewable and accessible by default”であるため、HTMLやCSSに多少のエラーがあってもコンテンツは表示される
そのデフォルトのスタイルに対してAuthor側で「ヒント」を提示することで、コンテンツ独自の表現を足すことができるようになっている。それがCascadeの思想
このCascadeにより、「個性的な表現を求める Author」と「一貫性を求める User」のバランスを保っている
ヒントによってAuthorのニーズを満たし、デフォルトで"viewable and accessible"であることと、「ヒント」は「ヒント」でしかないということでUserのニーズを満たしている
これはEvery Layoutでも最初から最後まで一貫して強調されていたもので、CSSが「ヒント」であることによって、レスポンシブなサイズ計算などをブラウザが自動でいい感じにやってくれるようになっている
Day5でさらに、CSS2から「Userの!importantがAuthorの!importantよりも優先される」という話が書かれている これにより、今まで全部Authorのスタイルが優先されていたけど、!importantではUserのスタイルが優先されるようになり、バランスが取れるようになった
Day6からはCascadeによるのCSSの計算の話 実際にブラウザに表示されるときのActual Valueの算出まで6段階あり、その中でもCascaded Valueの算出に焦点を当てている
Origin & ImportanceやContext、Specificity、Order of Appearanceなど色んな観点で競合解決の優先順位が決められている
ここでいう"Origin"は、User Agent、User、Authorの3つ
Normalな（!importantでない）スタイルは、User Aagent < User < Authorの順に優先度が高くなっていく
User Declarationsは、ブラウザでユーザーが設定する文字色やフォントなど
強制カラーモードとかも多分ここ
Shadow DOMでは、内よりも外のスタイルが優先される
コンポーネントのデフォルトのスタイルを定義しておくけど、使う場所によって上書きしたい、みたいなユースケースを想定してそう
ただ、上書きされたくないものは!importantで上書きを防げる
Reactのコンポーネントでは特にこういうのはなくて、単純に詳細度などで決まっている気がする
FilteringやCascading、Defaultingといった処理を経て計算していく
Cascadingをしてもまだ値が定義されていないプロパティについて、Defaultingする
Defaultingにも色々ある
Inheritされるプロパティについてはinheritする
ただし、ルートでinheritするプロパティがない場合はinitial valueを使用する
Inheritされないプロパティについてはinheritせずにinitial valueを使用する
Inheritする都合上、多分ルートから順番にDefaultingしていくのかな
途中に出てきた、<div>のdisplay値がUA Stylesheetではblockだけどinitial valueはinlineという話は、前にXでも出てた 17日目まではレスポンシブデザインやAlt CSS、Shadow DOMなど色んな観点から伏線を張って、18日目から@layerと@scopeの話
@layer
今まで出てきた3つのOriginの関係のようなレイヤリングを、同一Origin（具体的にはAuthor Origin）内でも利用可能にしたいというモチベ
Cascadeの中でも、ContextとStyle Attributeの間の階層に入れることでいい感じになった
元々はAuthor Originと同じ位置に入る予定だったが、Shadow DOMとの優先順位の組み合わせがカオスになりそうだったのでやめた
!importantの扱いについては既存のOriginと同様に、逆転させることに
1つ前のレイヤーの値に戻すrevert-layerの登場
その他ユースケースの紹介など
既にWidely Available
@scope
@layerはDOMを跨いだ優先順位の解決なのに対して、@scopeはDOMに結びついたスタイリング
近いclass名に紐づくスタイルよりも、遠いclass名に紐づく、後に書かれたスタイルルールがあったらそちらを優先してしまう問題を解決するために、Proximityが導入されている
2つの@scopeがあるとき、より近いセレクタのスタイルが優先される
範囲を指定するドーナツスコープも用意されている
同じグローバルに影響を与えないアプローチでも、グローバルスタイルからも影響を与えないIsolationと、グローバルスタイルからは影響を受けるContainmentの2種類がある。Shadow DOMはIsolationで、@scopeが出るまでは、それ以外のスコープを実現するものがなかった
Cascadeのどこに配置するか問題。Specificityよりも優先させるStrong Proximityと、その逆のWeak Proximityがあったが、前者だと色々めんどくさいので、後者になった
結局、Order of Appearance以外のものよりも優先度が低くなっていることから、影響を受ける側の立場としては解決されたのはそこだけ。だが、影響を与える側の立場としては、（DOM単位で・ドーナツスコープも利用して）グローバルに影響を与えないことができるというメリットがある
21日目からはレスポンシブデザインの話
Every Layoutと似たような話を、Every Layoutの話も出しながら解説
Intrinsic Web DesignやDeclarative Designなどなど
24日目はデザインシステムとDeclarative Designの話
FigmaなどのデザインツールはImperative
デザイントークンの例
CSS変数に対して、普通にサイズや色の値を指定するのはImperative
しかし、「通常状態では、Primary Color または Secondary Color のいずれかを使用する。ホバー状態では、背景色を元の色より 20% ダークにすることで、インタラクティブであることを示す。」のように、具体的にこれ、という値ではなくて状況に応じて値が異なるような柔軟性を持たせたものはDeclarative
「デザイントークンの意図」は保ったまま、より抽象的に定義されている
デザインツールはImperativeなので、デザインをそのままCSSに起こすだけではImperativeになってしまう
ちゃんと「コンテナの半分の横幅にしたい」や「適度な余白を持たせたい」などといった「デザインの意図」を理解して、それに応じたDeclarativeな書き方をする必要がある