day8 #191
day8 #191
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
Deploying studiosakupi01com with
|
| Latest commit: |
30f552b
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://147144a9.studiosakupi01com.pages.dev |
| Branch Preview URL: | https://feat-2025-advent-8.studiosakupi01com.pages.dev |
sakupi01
force-pushed
the
feat/2025-advent-8
branch
from
e9c56db to
f2925d6
Compare
| 前回までで、Level4 時点での Cascade について一通り解説してきました。 | ||
|
|
||
| 今日からは一旦 Cascade から離れた話題に移りたいと思います。Day8 では、CSS の基本処理について見ていきます。 |
There was a problem hiding this comment.
前回までは、〜ました。
今日からは、一旦 Cascade から離れ、 CSS の基本処理について見ていきます。
|
|
||
| 今日からは一旦 Cascade から離れた話題に移りたいと思います。Day8 では、CSS の基本処理について見ていきます。 | ||
|
|
||
| 実際にレンダリングエンジンで CSS がどのように処理されるのか、今後の内容に直結する最低限の範囲を確認しておく温度感で進めます。CSS の中でも特に「Style Resolution」の部分にフォーカスするため、Layout や Paint などのレンダリングの過程は、今回は割愛します。 |
There was a problem hiding this comment.
ここでは、今後の内容に直結する〜進めます。
実際にレンダリングエンジンで〜処理されるのかの中でも、特に「Style 〜 にフォーカスするため、〜は割愛します。
|
|
||
| ## Style Resolution | ||
|
|
||
| document 内の各要素に対して、ブラウザはその要素に適用される**すべての CSS プロパティ**に値を割り当てます。たった1つの `<h1>` でも 638 の CSS プロパティ（2025/07/19 時点：[Current Property Names](https://www.w3.org/Style/CSS/all-properties.en.html)）が当たっており、何かしらの値を持っています。 |
|
|
||
| document 内の各要素に対して、ブラウザはその要素に適用される**すべての CSS プロパティ**に値を割り当てます。たった1つの `<h1>` でも 638 の CSS プロパティ（2025/07/19 時点：[Current Property Names](https://www.w3.org/Style/CSS/all-properties.en.html)）が当たっており、何かしらの値を持っています。 | ||
|
|
||
| メインスレッドで CSS が字句解析されパースされたあと、要素に対して単一かつ表示可能な値になるまで計算が繰り返されます。この値は、Cascade、Inheritance/依存関係、単位変換、表示環境に基づく Defaulting の計算結果です。 |
There was a problem hiding this comment.
字句解析 - トークナイズ
構文解析 - パース
の組み合わせのうち、なぜか斜めのペアを選んでる。
There was a problem hiding this comment.
この値は、Cascade、Inheritance/依存関係、単位変換、表示環境に基づく Defaulting の計算結果です。
日本語にするのか、英語にするのかのチョイスが混ざりすぎ感。
|
|
||
| メインスレッドで CSS が字句解析されパースされたあと、要素に対して単一かつ表示可能な値になるまで計算が繰り返されます。この値は、Cascade、Inheritance/依存関係、単位変換、表示環境に基づく Defaulting の計算結果です。 | ||
|
|
||
| :::note{.info} |
There was a problem hiding this comment.
今回は CSS の処理について見ていく、っていう始まりなら、これが実はメインなんじゃないか感ある。
それをすっ飛ばしていきなり Style Resolution から始めたいなら、むしろ今更これいらなそうな気も。
どのくらい読者を振り切るのか、迷いを感じる。
|
|
||
| ### Filtering | ||
|
|
||
| 「CSS 文法上の誤りがあるものを排除する」ことが、主たる目的とする過程です。仕様上では、**[Filtering](https://www.w3.org/TR/css-cascade-4/#filtering)** と呼ばれる過程に該当します。 |
There was a problem hiding this comment.
これは流派あるかもだけど、見出しに Filtering があるとは言え、この書き出しなら「Filtering とは CSS 文法上の〜」で始まるほうが読みやすいと思う。じゃないと、「過程です」を読むまで主語が省略されてて、かつ、それが見出しだったことに気づかない。
|
|
||
| ここでのチェックは、known property name（文法的に正しいプロパティ名）に match するかどうかだけでなく、「そもそも Style Sheet に入っているか」や「Style Rule に包含されているか」などもありますが、要は 「CSS 的に正しいかどうか静的に確認」する処理です。値が [declared value](#1-declared-values) として抽出され、適用外の値が **invalid at parse-time** となるのはこの段階です。 | ||
|
|
||
| Filtering の結果、単一の要素に適用可能な「declared value のリスト」が得られます。 |
There was a problem hiding this comment.
ただ、仕様を書き起こしてるだけな感じがしてしまうんだよな。
解説をするのであれば、仕様に書いてあることを噛み砕くのでなければ、仕様を読めばいいじゃんになってしまう。仕様より正確になることはないので、であれば、付加価値は「わかりやすさ」とか「時代背景」とか、仕様に無い何かが書いてあると良いと思うんだよな。
例えばこれも、具体例として間違った CSS を例に上げ、 Filtering されると内部的にはこういう扱いになりますよ、みたいなのなブレークダウンがあるとか。ブラウザの実装だとこの行ですよみたいな、リアルワールドの話があるとか。そもそもこの仕様はこういう背景でできて、、とか。
そういう何かがあったら、より良いとおもう。
|
|
||
| Cascading の過程で、単一の宣言を採用するアルゴリズムが、 Cascading Sorting Order です。こうして宣言を単一に絞ることで、後続の [Value Processing](#value-processing) において値を単一に絞って計算していくことができます。Cascading の結果、単一に絞られた値は、**[cascaded value](#2-cascaded-value)** となります。 | ||
|
|
||
| Cascade に関しては、このアドベントカレンダーでも多分に触れてきました。詳細は、[Day3](2025-css-advent-3)~[Day5](2025-css-advent-5) を参照されたいです。 |
There was a problem hiding this comment.
「参照されたいです」は、デス・マスとダ・デアルが混ざってて、なんか不自然。
「参照されたい。」か「参照して下さい。」
|
|
||
| Filtering の結果、単一の要素に対して複数の宣言が適用された場合、[Cascading](https://www.w3.org/TR/css-cascade-4/#cascading) でその競合を解決しなければなりません。 | ||
|
|
||
| UA Stylesheet、User Stylesheet、Author Stylesheet、その中でもインラインスタイルや `@import` でのスタイル読み込みなど、さまざまなソースからすべてのスタイルを集約し、最終的に唯一の宣言を採用する必要があります。Author StyleSheet で何も指定していなくとも、ほとんどのブラウザで UA StyleSheet が適用されていることを鑑みると、この過程は必須と言っても良いでしょう。 |
There was a problem hiding this comment.
下と同じように「Author/User/UA Stylesheet」の方が見やすいと思う。
| :::note{.memo} | ||
| 💡 FUN FACT | ||
|
|
||
| UA Stylesheet によって設定される値と initial value は異なります。例えば、`<div>` の `display` は UA Stylesheet によって `block` に設定されますが、`display` プロパティ自体の initial value は `inline` です。 |
There was a problem hiding this comment.
UA Stylesheet によって設定される値と initial value は異なります。
この対は「仕様に定義される initial value」みたいに明示されてた方がわかりやすそう。
|
@Jxck
ちょっとこれは、day9 でまとめを入れることにしました orz |
@Jxck
Day8 の記事を執筆しました。お手隙でレビューいただけると幸いです！