00:04
はい、おはようございます。
8月11日、時刻は9時を回りました。
今日は珍しく寝坊してしまいまして、
起きたら8時57分で、今バタバタと準備してきた感じです。
本日も朝活を始めていきたいと思います。
本日は、タイトなやり取りですけど、
Body margin 8px、昨日読んでいた記事の残り半分を読んでいこうと思います。
時間が余るかどうかわからないですけど、
終わったらですね、リアクトアプリでのパフォーマンス改善の記事ですね。
500ミリ秒から1.7秒に改善したという記事があるので、
そこをちょっと読んでいけたらなと思っております。
では早速書いていきましょう。
Body margin 8pxですね。
この方が何だっけ?
ブラウザのデフォルトスタイリングに、
Body margin 8pxが入っていて、
これ確か各ブラウザは同じような設定が入っているのが多かったですよね。
それが何でかというところまで、
昨日ずっと喋っていて、
その今日は歴史の話ですね。
なんで8pxが指定されているのかという歴史の観点から、
振り返ってみようかなというところからでしたね。
では行きたいと思います。
レノアさんとKさんですね。
おはようございます。ご参加ありがとうございます。
今日は休日かな?
朝から参加いただいて嬉しいですね。
では早速入っていきたいと思います。
デフォルトスタイルシートの一部であることを、
Bodyのmargin 8pxという指定は、
デフォルトスタイルシートの一部であることは知っていましたし、
初級のブラウザによって提供されていて、
ウェブとブラウザの一貫性のための最終的に標準化された
レガシーなスタイルであることも一応想定はしていました。
しかしこのスタイルは元々どこから来たんでしょうかという疑問から、
一応Twitterで質問してみたところ、ほぼ突き止めることができました。
これは昨日読んだところでしたね。
一応、CSSYGとかW3Cの使用書がありますが、
そこの使用書に一応書いてあったりしたそうです。
2003年と2004年あたりにだいたい書かれていて、
最初はパディング8pxが一応指定されていたっぽいですね。
途中からパディングとマージン両方入っていたんですけど、
2004年からもガッツリマージンの方に切り替わったそうですね。
最初はパディングで指定していたそうです。
なぜかマージンになったので、
その辺がちょっと突き止められればいいなと思ったりしてますけどね。
その話の続きを読んでいきたいなというところですね。
確か昨日ここまで読み終わって終了した気がするので、
次のステップ2のところですね。
The Original Browsersというところですね。
オリジナルブラウザーですけど、
03:00
CSSの初期の歴史に興味があるとき、
時々訪れるリンクがいくつかあるんですね。
私のお気に入りはソース文書そのものです。
Cascading HTML Style Sheets Proposalというリンクがありまして、
そこに直接見に行くと、
これはW3Cのプロポーザルのページですね。
ここにそもそもアクセスしに行くというのが一つと、
もう一個はHistorical Style Sheets Proposalというのがありますね。
これも同じW3Cなんですけど、
そのプロポーザルの歴史がガーッと固まったサイトもあるんですね。
それらを個別に切り出したものがあると。
この辺を記者の方はアクセスするそうですね。
全然知らなかった。こんなサイトあったんですね。
しかしCSSがどのように生まれたかを物語る素晴らしい記事というのも他にもありまして、
大体3つくらいの記事のリンクが貼られていますね。
一つ目がA Brief History of CSS Until 2016というやつですね。
CSSの使用書ですね。
使用のコーファウンダー、コーオーサーか、
の方の一人が書かれているA Brief History of CSS Until 2016ですね。
2016年までのCSSの歴史をガーッと並べたという感じですね。
もう一個がA Look Back at the History of CSSというところですね。
という方ですね。
もう一個がThe Languages Which Almost Became CSSというところですね。
この辺の記事がCSSの歴史のところを物語ってくれるリンクで、
この辺も見たら面白いんじゃないかというところでしたね。
結構皆さんそういう歴史について書かれていたんですね。
公式に既にプロポーザルの歴史がガーッと流れているので、
その辺を見れば大体わかる気もしたんですけど、
多分それとは別の観点で、これらの方々が個別に
CSSの歴史についてバーッと書かれていたんでしょうね。
それぞれ気になるというか、歴史の勉強をしていくことは
我々として損はないはずなので、
そこを見に行くのが面白いかなと思いましたね。
では本文に戻りますね。
この言語がなぜそのように機能するかを理解するために、
是非一読されることをお勧めします。
そうなんや。
なぜCSSが今こんな挙動になっているかが理解できるんですね。
これでCSSを使った最初のブラウザのリストができましたが、
ボディマージの問題についてこれ以上詳しくは教えてくれませんでした。
一応ツイートがあるんですけども、
ちなみにCSSを搭載した最初の商用ブラウザはIE3でした。
3万。すげえな。
1996年のことです。
96年。私9歳ですね。
小学生の頃ですね。
その後ネットスケープ4が若干のサポートを追加しました。
06:01
そのどちらよりも前に、
CSSはアルゴとアレナでテストされていた。
どこまで遡るんだこれはみたいな。
というようなツイートをしている方もいて結構面白いですね。
では続いてステップ3ですね。
wwwtalkとwwwstyleっていうもののアーカイブですね。
両方とも知らない名前なんですけど。
もちろんこれらの歴史的なスタイルの提案のほとんどは
もともとwww.talk.w3.orgのメーリングリストか
後により焦点を絞ったwww.style.w3.org
というリストへのメールとして書かれたもので
どちらもよくアーカイブされており検索可能になっています。
情報科学オタクの集団に寄って作られたメディアを持つことの利点の一つだわ
こういうことにありますよねみたいなのを言ってましたね。
なんかまあ皮肉を言っているのがある意味のメリットというか。
情報科学オタクも役に立つことあるぞみたいなニュアンスだとかって思いましたけど。
面白いな。
アーカイブを検索すると1998年3月のTOT
ファーナーからのメールに行き着きますと。
そのメールも一応ちゃんと公開されているんですね。
もしそのメールの
この記事の中にそのメールのリンクがあるので見てみてあがった感じですけど
本当すげえな本当ちゃんとメールそのものがバンと載ってますね。
すげえな署名までちゃんと含めて載ってるけど。
1998年の3月11日の水曜日に送っているメールですね。
こういうの残すんですね。面白いですけど。
結局はそのw3.orgの先ほど出したサイトの中にありますね。
W3Cってこうやってみるといろんな観点でページに残してるんですね。
単に仕様書だけを書き連ねてるだけという風に勝手に思ってましたけど
こういうものも載ってるんだったら
割とW3Cをひたすら眺め倒すっていうのも悪くないなという気もしてきましたね。
そんなに仕様とか歴史が知りたい方はということですけど。
では続いていきましょう。
そのメールの中にありますけど
ベーススタイルシートの最新の改訂版では
ボディのマージンを0にパディングを8ピクセルに設定しています。
これ1996年のメールでしたっけ?
うそ、98年ですね。98のメールだから
そうですね、当時はまだパディング8ピクセルで位置を指定されていて
マージンは0にしてたと。
以前はマージンを8ピクセルにパディングを0に
バックグラウンドポジションを-8ピクセルに設定しました。
ほう、1998年のメールでこういうことを言ってるんであれば
もっと前に先にマージンを8ピクセルに1回になってたってことなのか。
使用書では先にパディングが8ピクセルになってて
そこからマージンを8ピクセルに変更したって言ってるけど
09:02
実は歴史的にはもっと前に先にマージンを8になってたんですか。
はいはい。
ちなみにバックグラウンドイメージズの適切な処理についての
メールスレッドなので正確なトピックではないんですけど
本文に我々の8ピクセルのパディングまたはマージンというものの
一応言及はありますよねってところでした。
よくこんなの見つけたなこの人本当に。
すげえな。
じゃあ次ですねステップ4です。
The Wayback Machineですね。
この参照リンクは壊れているんで
Wayback Machineに飛び
アーカイブされたコピーがあるかどうか調べてみました。
そしていくつか見つけることもできましたよと言ってますね。
Wayback Machineっていうのがあるんですね。
web.archive.orgっていうドメインですね。
ドメイン名からするとwebの本当にいろんなもののアーカイブをしているサイトなんですねこれ。
へえ。
なんか全然知らんかった。
はい。
また見始めるとこれもどんどん沼にはまりそうですけど。
ざっくりとですね。
メニューの名前だけ見ると
Wayback Machine Availability APIとChrome Extension
FirefoxのアドオンとSafari Extensionと
MS EdgeのアドオンとiOS App Android Appっていうリンクがあるんで
それぞれのページに対してのアーカイブを残しているっぽいので
Webのアーカイブっていうドメイン名からすると
それはちょっと大きいタイトルかなって気はしましたね。
はい。
まあいいや。戻りましょう。
このWayback Machineに飛んでとりあえずアーカイブされたコピーがあるか見てみたら
いくつか実はあったよと。
まずですね。
ベーススタイルシートの
1999年2月22日にたどり着きましたと。
はい。
さっきのメールのちょっと後ですね。
約1年後だったんですけど。
最終更新日は1998年の11月7日となってますので
さっきのメールの半年後くらいですね。
そしてこのページの最も古いアーカイブである
The Base Style Sheet 1998年の1月30日をクリックすると
最終更新日は2022年4月4日だと書かれていました。
どっちだよ。
あ、私がこのページをロードした瞬間だってそういうふうに言ってますけど。
でも最も古いアーカイブは98年の1月30日だそうですと。
はい。
で、待てよと。なんだ。
ソースコードを見てみるとこんなことが書いてあるというので見てみますと
Pタグが書いてあってですね。
This is the work in progress. Last modified.
スクリプトタグが書いてあるドキュメント.writeの
ドキュメント.lastmodifiedというのが書いてあって
ノースクリプトホゲホゲと書いてますけど
work in progress.lastmodifiedというような記述が一応ありますと。
さらにドキュメント.lastmodifiedというのがスクリプトと書かれてますねと。
するとページを読み込むたびに
ドキュメント.lastmodifiedがwayback machineによって更新されてんじゃねーのっていうところなので
これあんま信用ならないなっていう気もしますね。
12:00
なるほどね。
で、続いていきましょう。
で、ファイナルアンサーですね。やっとファイナルアンサーが最終回答ですけど
ベースとなるスタイルシートですね。
The Base Style Sheetっていうところのファイナルアンサーが出てきたので
これこそ私たちが探したものです。
まだ開発中のオリジナルのデフォルトスタイルシートですと。
目立つ引用がいくつかありますよってところで
引用が出てくるんですけど一個ずつ読んでいきましょう。
ベーススタイルシートっていうのは
モザイク由来のウェブブラウザ
ネットスケープ、ナビゲーターとかマイクロソフト、インターネット、エクスプローラー
における全てのHTML4.0要素の合意されたデフォルトのレンダリングを記述します。
これは現状を把握してそれを超えていくためのものですよっていう風な
一応引用がありますと。
これらは当時の主要なブラウザエンジンであり
どちらもそのルーツっていうのは以前のモザイクブラウザに遡ると。
モザイクまで遡るんですね。すげーな。
めっちゃすごいな。
CSSって割と創書機ですね。ウェブのぐらいのところからしっかり言及されていて
その中でマージン8ピクセルかどうかっていうところまで遡れるんですね。
もう一個の引用ですね。
モザイクブラウザの中立的とされるデフォルトのスタイルシートっていうのは
ヨーロッパにおける科学論文の規範的なスタイルですね。
しかも印刷されてた時代ですね。
それを単純に適用したものであります。
一応その規範的なスタイルっていうところに注釈があって
ワーニングフランクとかインターナショナリアとかタイラーグラフィーとか
いろんなカタカタがバーって書かれてる。
教書で書かれた一応一つの論文があって
それを参考にして単純にする適用したものだと言ってますね。
これはウェブの起源がCERNであることを考えれば十分に妥当なことであります。
しかし商業、娯楽、ジャーナリズム、人文科学など
ウェブの遥かに一般的な用途と
モザイクベースのブラウザーの深く根付いた市場支配を考えると
正しいHTMLはガンやウイルスのように確実に
不適切なスタイルに感染していると言って良いでしょうと
結構強いワードを使いますね。
CERNの科学コミュニティからモザイクブラウザーデフォルトスタイルシート
MBDSで略すらしいですね。
っていうもののウイルスが流出して
突然変異を起こしたツールや特定のMBDS効果を呼び出すためだけに
マークアップをご用する作者というのがウェブ上に何世代も生み出されています。
垂直方向の空白を作るためのPタグの使用だったりとか
非表記情報のためのテーブル構造というのは代表的な例になります。
垂直方向の空白を作るためのPタグの使用というのは
現代ではDIVタグを使うこともありますけど
あんまりよろしくない感じですよね。
かといってBRタグをバンバン入れるかというと
それはそれで苦しいとなるので
スペーサー的なコンポーネントを作るときもありますけどね。
15:02
実際そういうコンポーネントがUIフレームワークの中にも実装されたりはしますけど
Pタグだけで段と空白を作るのは難説だと思いますね。
このような操作の高い信頼性というのは
HTMLが学会を超えてグロテスクなカニバリゼーションを起こし
アーキテクチャ的に不釣り合いなHTML拡張が症状を緩和するために
史上で成功したことを説明します。
この文章はちょっと難しいな。
そもそも文章を理解するの大変やな。
HTMLが学会を超えてグロテスクなカニバリゼーションを起こし
今ではわかる。
アーキテクチャ的に不釣り合いなHTML拡張というのが
症状を緩和するために史上で成功した。
まあ要は拡張の話か。
というのがそのさっきのカニバリゼーションを
少しは緩和するために一応史上で成功していて
今いろんなところで皆さん使ってますよねというところですね。
この流行に逆らうにはまずウイルスを分離し
その遺伝子を精密かつ包括的な操作にさらすことが必要であります。
ベーススタイルシートというのはMBDSのウイルスのCSS1ですね。
バージョン1みたいなモデルであり
スタイルの交代すなわちHTMLのための包括的な代替スタイルシートの
開発の第一歩になるんですと。
はい。
まあ一応笑いとかにつけて
これは悪口ですねっていう風に言ってます。
はい。
なるほどね。
モザイクのデフォルトスタイルシートというのが
まださかのぼって
それはこの人にとってはやっぱりガンだという風に言ってますね。
はあ。
はい。というわけで一応この記事については終了になりますと。
このスタイルシートはモザイクベースのブラウザーで
CSSが存在する前に既に起こっていたことを捉え
それらのスタイルをCSSで再現することを意図しています。
本文の8ピクセルの空白っていうのは
CSSより前のものであったと実は。
はい。
このスタイルっていうのもCSSが発明される以前の
モザイクの内部ルールから直接来ていると思われるので
残る問題はこれらをどのように表現するかですね。
結局どうするかってことですよね。
はい。
一応Todd Farnersの
early draftのベースのスタイルシートっていうのの
一応リンクがガッと書いてますね。
その中のベーススタイルシートに
いわゆるデフォルトのスタイルシートのCSSが
ガーッと書いてます。
もちろんこれも長いので読まないんですけど
参考に見てみてください。
現代のいろんなリセット系のCSSとか
デフォルトのスタイルシートと比較すると
いろんなものが見えて面白いかもしれないですね。
はい。
で、えっと
最後なんか
もうちょっとなんか記述書に行きましょうか。
リメディー for the MBDS virusと
MBDS virusの特効薬みたいなところの
一応鑑定の質問がありますね。
で、この計画っていうのは
そのTodd Farnersが想像していたようにはいきませんでした。
その基本スタイルシートっていうのは
モザイクベースのスタイルの数々を
そのままに生き続けていますと。
で、HTMLのためのフォーカス的な
代替スタイルシートっていうのは
少なくともW3Cやブラウザベンダーからは
提供されてないです。
18:00
どちらも広報互換性を重視するあまり
ウェブのデフォルトスタイルに
抜本的な変更を加えることができないんですよと言ってます。
ウェブ製作者が広報互換性を気にすることなく
新しいスタイルシートの使用を選択できるように
しなければならないでしょう。
そりゃそうね。
で、ある程度までは
様々なリセットと正規化は
新しいフォーカス的なスタイルシートの
試みと考えることができます。
リセットは一般に多くを削除しすぎですと。
全てを元に戻すことを作者に依存してますと。
しすぎですし、正規化っていう方ですね。
標準化、正規化っていうのは
しばしばタイルの改善よりも
ブラウザとの整合性を心配するものになります。
そりゃそうですよね。
また、スタイルシートのリセットCSSも
確かに削除しすぎな
CSSリセットもありますよね。
いや、本当に
リセットCSSだったり
ノーマライズCSSだったり
いろんなやつありますよね。
僕は結構最近レスを使うことが多いんですけど
スタンダードCSSとかいろんなやつが
毎年毎年新しい
CSSリセットが更新されていて
単純にいわゆるリセットですよね。
綺麗にまっさりにするっていうやつと
ブラウザの互換性とか
正規化か
本文でいうと正規化というところですけど
両方とも加味した
CSSのリセットっていうのもあるので
使って別に悪くはないと思いますけどね。
ただ物によっては本当に
単なる真っ白なキャンバス的なものにするっていう
削除しかしないリセットCSSもあって
それはそれで結構面白かったですね。
なので意外とそれ使ってみると
ブラウザのデフォルトのCSSって
そんなに悪くないというか
便利だなって思うときもあるので
なんとも言えないですね。
やってみるといろんなことが出てくるので
何を使うかっていうのは大変ですし
新しいスタイルシートの使用選択できるように
しなければいけないので
後方互換性を気にすることがないように
できるのであるんですね。
なので結構複雑なものは絡み合っている感じがしますね。
これがですね
Jen Simmonsって方が
CSS Remedyを作るきっかけとなりました。
先ほどちょっと紹介した
CSS Remedyっていうやつですね。
のベーススタイルシートがあるんですけど
私はその中心的なコントリビューター一人ですけど
最近あまり作業を行っていません。
目標は
現代のウェブのためのデフォルトスタイルシートを
再構築することです。
ブラウザのためとかでわけでもないし
そのリセットのためとかなくて
ウェブのためっていう風に
ちょっと高いというか
しざが一個上の
視点で
デフォルトのスタイルシートを再構築してみたい
という風に言ってますね。
もしモザイクが約30年前に行ったことに
制約されなかったら
私たちは今何を思いつくでしょうかと。
まだまだ多くの議論がありますが
メインの救済用のスタイルシートの
47行目で一つのことが明らかになっていますと。
はい。
それは何かというと
はい。
いわゆるそのボディマーチンゼロってやつですね。
はいはいはい。
21:00
ボディマーチンゼロなんですね。
実は。
レメディのスタイルシートの47行目には
ボディマーチンゼロにしているそうです。
で、CSSレメディっていうのは
ほとんどの場合
物事をきれいにしようとするのではなく
より良いデフォルトを提供しようとするだけです。
また基本的なHTML要素に対して
完全にデザインされたスタイルを提供する
よりも
より現的なアプローチを取るプロジェクトもあります。
で、先月
ペンドル氏っていう方がいらっしゃって
この方が
HTMLをまともに見せるために書ける
最小限のCSSとは何か
みたいなものを
記事を投稿しました。
もちろんこれもリンクがあるので
興味ある方は見てみてください。
あとで多分ツイートするかなと思います。
The smallest CSS
っていう記事ですね。
で、
これには約15行のCSSに
着地したという素晴らしい小さな探求があります。
すごいですね。15行に着地したんですね。
また
クラスなしのフレームワーク
特別なセレクターは必要とせず
完全にセマンティックなHTMLを書くことに基づいている点
っていうのを評価できます。
他にもクラスレスのCSSライバリティもいくつかありますよね。
それに対してもやっぱりリンクがありますし
ノークラスフレームワークというものの
リンクもあります。
自分でも何かやってみたい気がしますし
いずれも見えてくるものもあるでしょうと。
とにかくこのサイトもそれぞれ
リフレッシュの時期がでも必要かもしれませんね
ということで
この記事は終わっていますというところでした。
CSSのボディマージン8ピクセル
っていうところを色んな観点とか
歴史とかから振り返っていくと
色んなものが見えてきましたよ
というお話でした。
案の定やっぱり今日も
もう一つの
記事はちょっといけなさそうですね。
やっぱ
昨日読んでて前半で
30分使い切ったので
後半読み切ってどこまでいけるかと思ったんですけど
30分超えたので
一旦ちょっと区切りもいいので
今日はここで終了にしたいと思います。
もう一個読もうと思ってた記事は
明日読もうと思いますね。
500ミリ秒から1.7ミリ秒に
パフォーマンスを改善した
リアクトアプリケーションにおける
という記事があるので
これを読んでいこうかなと思います。
ほとんどソースコード出てこなかったので
多分音読しても大丈夫だろうと思います。
いくつかのソースコード出てくるんですけど
多分大丈夫と勝手に思ってます。
というところで
今日の朝活は以上で終了にしたいと思います。
結構面白かったですね。
知的な意味で面白かったです。
CSSの歴史とか
デフォルトのブラウザのスタイルシート
そういうもんなんだへーとか
思ってましたけど
歴史をたどっていくと
結局はネットスケープにたどり着くのか
モザイクにたどり着くのが面白くて
CSSがしかも設計される前の
モザイクの
ウイルスというか
モザイクに引っ張られてきて
今のものがあり
でも広報互換性というところを書くブラウザベンダーは
この先もずっと多分ずっと
対応し続けるので
モザイクの
このガンというのは
24:00
ずっと続くんだろうなという気はしました。
どっかでこの辺使ってないでしょとか
いろんな人と
全世界のサーベイを取って
実は良くないみたいな話が出てきたら
改めてガンとその辺を
削除したりとか
エイヤーで変えるかもしれないので
そういう動きが出てきたらそれはそれでちょっと
面白いとは思いますけど
全世界巻き込むのは結構大変だと思いますし
結局
サーベイってどんだけ取っても多分
何万人とかの意見を
得ることは多分不可能だと思うんですよね
今までその
いろんなサーベイあるじゃないですか
CSSもJavaScriptも毎年毎年
結構有名なサーベイがあるんですけど
でも結局回答者の数見ても
多分全世界のウェブエンジニアの中の
多分何分の1ぐらいしか多分ないと思うので
その人たちの意見で
物事を決めるのは結構危険だというのは
あると思いますしね
結局主要ブラウザーではそういうことはしないんだろうな
っていうのはちょっと悩ましい感じはしますけど
それに対してどうしようか
というのでこの弊社の方もいろいろ
やってみようと思ったし
さっき言ったスモールレストCSSも結構
面白いなと思いましたもんね
15行のCSSってやつですけど
とかノークラスCSSフレームワークス
といって
ノークラスのCSSのフレームワークって結構面白いですよね
聞いたことないなと思ったんですけど
でも結構ありますね
ページは見てるんですけど
リンク10何個ぐらい
ライブラリのリンクがあるので
その辺見ても面白いかもしれないです
では一旦こんなところで
今日は終了にしたいかなと思います
ちょっと後半ぐだぐだってしゃべりましたけど
じゃあ今日はですね
中身じゃねえわ
お休みの日ですね皆さん
なのでしっかり
休んでいただいたりのんびりするなり
おいしいもの食べにくくなりひたすらゲームするなり
寝るなりいろんな休日の
過ごし方があると思いますけど
のんびり過ごしてまた明日金曜日ですね
お仕事をして
多分夏休みに入る方多分多いと思うので
夏休みを多くしていただければいいんじゃないかな
と思います
では今日もたくさんの方お参加いただき
ありがとうございましたまた明日ものんびり
読んでいきたいと思うのでお付き合いいただければ幸いです
では終了しますお疲れ様です
