day10 #193
day10 #193
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
|
|
||
| CSS エコシステム動向における手始めとして、ブラウザ/ブラウザベンダの動向をみていきます。 | ||
|
|
||
| Web で最初の標準化団体である W3C が発足したのは 1994年10月で、CHSS が提案されたのも同年の 10月。W3C が発足した当初は、まだまだ標準化団体としての影響力が弱く、ベンダが実装を試行錯誤せずを得なかったのも頷ける時期です。 |
|
|
||
| この頃に誕生したのが、ベンダプレフィクスです。 | ||
|
|
||
| 試験的に非標準な CSS や JS API に各ブラウザの接頭辞をつけて実装することで、標準化が進むまでの間、各ブラウザの実験的な実装を可能にするものです。実験的に提供する機能に `**-moz-**transition` や `**moz**RequestAnimationFrame` などとすることで、理論上は Author 側コードを壊すことなく、新しい機能の取り入れが可能です。好き勝手独自機能として実装していた時代からは一定進歩したと言えるのかもしれません。 |
There was a problem hiding this comment.
「頭が赤い魚を食べた猫」
- 試験的に非標準な CSS や JS API に各ブラウザの接頭辞をつけて実装することで~
+ ベンダプレフィックスとは、 CSS や JS API を試験的に実装する際に、 API 名につけるベンダ固有の接頭辞を指します。標準化の進むまでのあいだ〜するものです|
|
||
| 試験的に非標準な CSS や JS API に各ブラウザの接頭辞をつけて実装することで、標準化が進むまでの間、各ブラウザの実験的な実装を可能にするものです。実験的に提供する機能に `**-moz-**transition` や `**moz**RequestAnimationFrame` などとすることで、理論上は Author 側コードを壊すことなく、新しい機能の取り入れが可能です。好き勝手独自機能として実装していた時代からは一定進歩したと言えるのかもしれません。 | ||
|
|
||
| しかし、実験的な提供が目的でであったにも関わらず、ベンダプレフィクスは開発者間で根強く普及してしまいます。 |
|
|
||
| しかし、実験的な提供が目的でであったにも関わらず、ベンダプレフィクスは開発者間で根強く普及してしまいます。 | ||
|
|
||
| 実験としての意味を失い、標準化が進むまでの間に、非標準の書き方のみが広く普及してしまうと、最終的に標準化された記法を導入してもらうことが困難になるという、ベンダにとっては自分で自分の首を絞めるような結果を招くことになりました。 |
There was a problem hiding this comment.
もうすこし正確に言うと
- ベンダプレフィックスの間は実験なので挙動が自由に変えられるはずだった
- しかし、実際にはみんながそれを書くので、挙動依存のコードが出てきて簡単には変えにくくなった
- プレフィックス無しが実装されたら消すつもりだった
- しかし、プレフィックスで書いて更新されないアプリが世界に沢山残って、消すのも大変になった
どっちかというと開発者のせいなので、ベンダが自業自得みたいな言い方はよくない。
|
|
||
| 実験としての意味を失い、標準化が進むまでの間に、非標準の書き方のみが広く普及してしまうと、最終的に標準化された記法を導入してもらうことが困難になるという、ベンダにとっては自分で自分の首を絞めるような結果を招くことになりました。 | ||
|
|
||
| 標準化団体としても、ベンダプレフィクスの乱用を防ぐために、以下のようなガイドラインを設けるなどの取り組みを行ってはいたようですが、ベンダプレフィクスが性善説の上に成り立つ仕組みであることに変わりはありませんでした。 |
| - [Preflight - Base styles - Tailwind CSS](https://tailwindcss.com/docs/preflight) | ||
| - ... | ||
|
|
||
| 初期 Reset CSS のように「全てをリセットする」というアプローチは、今でいう `all: initial;` に近い考え方です。 UA StyleSheet の差分が顕著な時代は有効でしたが、UA StyleSheet の差分が次第に小さくなってくると、「全てをリセットする」ことは、むしろ Author がする際の負担になるようになりました。 |
There was a problem hiding this comment.
Author がする際の負担
どこがどう負担なんだろ？
実装を書くコード量が多くて負担？
数が多くて調べるのが負担？
ブラウザで実行するコストがパフォーマンスの負担？
差分が小さくなってきてる、って振られると、負担が下がってるって繋がるのかなと思うと、そうじゃないので。
|
|
||
| ### Normalize CSS | ||
|
|
||
| Normalize CSS は、ブラウザ間のデフォルトスタイルの差分を解消し、より一貫性のあるスタイルを提供することを目的としたスタイルシートです。 |
There was a problem hiding this comment.
ずっと仕様の話をしてるので、これだけだと Normalize CSS も仕様にある言葉っぽく見えるかも。
ライブラリ/フレームワークだってことを明示したほうが良さそう。
|
|
||
| - [jensimmons/cssremedy: Start your project with a remedy for the technical debt of CSS.](https://github.com/jensimmons/cssremedy) | ||
|
|
||
| ブラウザ間での CSS 実装に一貫性持てたとしても、「それが**ベストプラクティスで**一貫しているとは限らない」ですが、今から UA StyleSheet をベストプラクティスで大統一しようものなら、多大な影響を与えてしまいます。 |
There was a problem hiding this comment.
多大な影響を与えてしまいます
こういう言い回し、よく出てくるけど、「誰の何にどういう影響」なのかが不明なまま言い捨ててるので、もう少し目的語とか補語をちゃんと書いた方が良い。
|
|
||
| 全てではないですが、現在の UA スタイル には、Mosaic など過去に栄冠を得たブラウザの UA StyleSheet の影響を強く受けているものがあります。これまでの CSS 仕様や現在の HTML Living Standard が推奨する [`body { margin: 8px;}`](https://html.spec.whatwg.org/multipage/rendering.html#rendering:~:text=then%20a%20default%20value%20of%208px%20is%20expected%20to%20be%20used%20for%20that%20property%20instead.) なんかはその顕著な例で、そこには「Mosaic がそうだったから」以外の何の理由もないことが知られています。 | ||
|
|
||
| そうした「過去を引き継いだ以外の理由がないスタイル」ではなく、現在のベストプラクティスに則った UA Style を再定義することを目的としています。 |
There was a problem hiding this comment.
過去を引き継いだ以外の理由がないスタイル
というか、「過去を引き継ぐ」が最大の理由で、それこそが互換性なので。
さっきの多大な影響を、ここで「互換性が壊れるから」っていう説明ですれば良さそう。
そして、その互換性を技術的な負債とみなしたときに、過去をリセットできるならこうしたい。が Remedy(改善) だっていう流れのほうがわかりやすいかも。
|
|
||
| --- | ||
|
|
||
| 過去のブラウザの”技術的負債”から重ねられてきた試行錯誤は、多くあります。 |
There was a problem hiding this comment.
やっぱこういう投げやりで、なにか言ってそうで何をいいたいかよくわからん、ただの編集点みたいなまとめ文、なら要らないって思っちゃうんだよな。
Deploying studiosakupi01com with
|
| Latest commit: |
856b229
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://51124bb6.studiosakupi01com.pages.dev |
| Branch Preview URL: | https://feat-2025-advent-10.studiosakupi01com.pages.dev |
|
@Jxck
day9 のコメントにも書いたんですが、 day10 は全体としてもちょっと構成ミスしてしまったな、、、と思います |
@Jxck
Day10 の記事を執筆しました。お手隙でレビューいただけると幸いです！