day6 #189
day6 #189
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
| 前回までで、Cascade が「Suggest/Influence」するものであり、`!important` が「create a balance」するものであるという、Cascade の基本思想を解説してきました。 | ||
| これを踏まえた上で、2025年現在、我々が慣れ親しんでいる CSS の Cascade について、改めて整理したいと思います。 | ||
|
|
||
| Cascade に関しての詳説は、すでに日本語でも良質なものが多く存在します。よって、本エントリでは、CSS や Cascade の根幹となる思想を基に、Cascade を解説していくものにできればと思います。 |
There was a problem hiding this comment.
「すでに良質のものがある」で前振るなら「だから今回は〜を端折る」とか、そこと差別化がある、みたいに続くとおもいきや、なんか「真っ向から書きます」みたいになってるので、振り方か続け方が違いそう。
|
|
||
| 同じ「CSS Cascading and Inheritance」というカテゴリではありますが、RT で同一のステータスとして管理されるに相応しくなく、それぞれの実装状況や仕様の安定具合に応じて異なる進捗を持たせるのが妥当であれば、異なる Level に分類されます。 | ||
|
|
||
| ::: |
There was a problem hiding this comment.
ここまでの二つのノート。書きたかったから書いただけ感が強い。
別にいんだけど、伝えたいこと(読み進める上でここは把握しておいて欲しい)が、あるのかないのかもよくわからん。
無いなら、まるっといらなそう。
有るなら、それを伝える努力を怠りすぎ。
|
|
||
| ## The Cascade - Cascade Sorting Order | ||
|
|
||
| 現在、皆さんがみているこのページのスタイルは、完全に CSS ルールの競合が解決され、計算された結果として現れているスタイルです。 |
There was a problem hiding this comment.
完全に CSS ルールの競合が解決され
この語順も、「頭が赤い魚を食べる猫」に片足突っ込んでる。
CSS ルールの競合が完全に解決され
|
|
||
| 後日詳細に解説しますが、 Actual Value の導出には、多くの競合解決・計算過程を経ることになります。 | ||
|
|
||
| その内の Cascade というステップで利用するアルゴリズムが、仕様でいうところの「[Cascade Sorting Order](https://www.w3.org/TR/css-cascade-4/#cascade-sort)」です。Cascade Sorting Order によって、 [Cascaded Value](https://www.w3.org/TR/css-cascade-4/#cascaded) が導出されます。Cascaded Value は、Cascade Sorting Order によって CSS ルールの競合が解決された状態の値を指します。 |
There was a problem hiding this comment.
その内の Cascade というステップ
この書き方をするなら、「多くの計算過程」の解説を後回すのはいいとしても、「ステップの一覧」だけ出しておいて、そのなかの "Cascade" だけここで話す、みたいにしてもよさそう。
|
|
||
| CSS Cascading and Inheritance Level 4 時点での Cascade Sorting Order を図解すると、以下のようになります。 | ||
|
|
||
|  |
|
|
||
| ここでは特に完璧な HTML レンダリング結果のスタイルを得ることは目指していませんので、この程度でやめておきますが、UA StyleSheet が HTML のレンダリング結果をどれだけ整えてくれているのか、おわかりいただけたのではないでしょうか。 | ||
|
|
||
| UA StyleSheet がなければ、我々はもっと冗長で大規模なスタイルシートを書かねばならなかったと考えると、UA StyleSheet の存在が大きなものに感じられます。 |
There was a problem hiding this comment.
つい最近まで UA Style に文句言って、 Reset CSS で更地にすることしか考えてなかった人の発言とは思えないw
There was a problem hiding this comment.
いや〜、ありがたいです www
reset は opinionated な感じあるんで、 一旦 normalize 更地勢なとこはありましたね
|
@Jxck |
Deploying studiosakupi01com with
|
| Latest commit: |
9ca4582
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://d9f2b162.studiosakupi01com.pages.dev |
| Branch Preview URL: | https://feat-2025-advent-6.studiosakupi01com.pages.dev |
@Jxck
Day6 の記事を執筆しました。お手隙でレビューいただけると幸いです！
（書き方が悪いのか、全然進まなかった・・・;-;）