第五回 W3C CSS Module 仕様書もくもく会@東京 - CSS 2.2 第8章ボックスモデルを読む

2キロ痩せて、そのあと1キロ痩せる @hB4Avzp2Zb

本日はグッドパッチ社の3Fをお借りしてます。 #tokyocssspecs

よしこ @yoshiko_pg

本日です、会場は3Fですのでお間違いなく！ 第5回 W3C CSS Module 仕様書もくもく会@東京 tokyo-css-module-specs.connpass.com/event/26890/ #tokyocssspecs

もんど @momdo_

諸般の事情で反応悪い可能性ありますが、訳文で何かあればメンション飛ばしてください #tokyocssspecs

げこP @GeckoTang

いまｓ #tokyocssspecs

よしこ @yoshiko_pg

今日はボックスモデルの仕様書を読みます #tokyocssspecs momdo.github.io/css2/box.html

げこP @GeckoTang

ボックスモデルのこと、ボクモっていうのどうかな

よしこ @yoshiko_pg

いきなりこっちが気になりだす #tokyocssspecs 視覚整形モデル momdo.github.io/css2/visuren.h…

2キロ痩せて、そのあと1キロ痩せる @hB4Avzp2Zb

真剣に読んでいます #tokyocssspecs

よしこ @yoshiko_pg

「とあるボックスがその子孫に対する包含ブロックを"設置する"」という表現を学んだ #tokyocssspecs 設置するといっても、そのボックス自身が包含ブロックになる

よしこ @yoshiko_pg

> ボックスレベル主要ボックス > ブロックレベル要素 > ブロックレベルボックス > ブロックコンテナボックス > ブロックコンテナ要素 > ブロックコンテナ > ブロックボックス > ブロック 😇 #tokyocssspecs momdo.github.io/css2/visuren.h…

よしこ @yoshiko_pg

これそれぞれ明確な定義があるっぽいんだけど頭のなかで整理できてなくて先の読み進めがつらい #tokyocssspecs twitter.com/yoshiko_pg/sta…

ｵｯﾁｰ @otiext

ボクモの闇

よしこ @yoshiko_pg

なんか「要素」と「ボックス」が違うっていう感覚がいまいちつかめない、要素によってボックスが生成されるというのはなんとなくわかるんだけど、でもイメージの中で同じものになってしまう #tokyocssspecs

もんど @momdo_

これ貼っておきますかね（途中まで*は*あってる）／みてる：CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ webdesignrecipes.com/css-blocklevel… #tokyocssspecs

よしこ @yoshiko_pg

（やばい途中からページ取り違えて視覚整形モデルのほう読んでたことに気づいてなかった）（なんかやたら難しいと思った） #tokyocssspecs

もんど @momdo_

要素はHTML（CSSではSGML用語の）要素であって、それ以外の何物でもない。デフォルトUAスタイルシートのことは一旦脇に置くとわかる（かもしれない） twitter.com/yoshiko_pg/sta… #tokyocssspecs

よしこ @yoshiko_pg

非置換インライン要素の非置換って何だっけ・・・って毎回なる 置換インライン要素＝属性などによって寸法の認識が変わる要素（img, input等）で、それ以外のインライン要素が非置換インライン要素 #tokyocssspecs w3g.jp/css/guide/targ…

よしこ @yoshiko_pg

（マージンの）割合は、生成されるボックスの包含ブロックの幅に関して計算される。これは'margin-top'と 'margin-bottom'にも当てはまることに注意する。 これ利用したCSS比率固定 yoshiko-pg.github.io/slides/2015083… #tokyocssspecs

よしこ @yoshiko_pg

やっとマージンの相殺きた #tokyocssspecs momdo.github.io/css2/box.html#…

もんど @momdo_

というかCSS2の8～10章ってどう考えても行ったり来たりしないと理解できないのがより読みづらくしてるよね… #tokyocssspecs

げこP @GeckoTang

code.google.com/p/chromium/iss… 報告者が見たことある人だった

ｵｯﾁｰ @otiext

本日はChromeとSafariで特定のborder-styleにborder-color: currentColorだと色がつかないバグがあるということを学びました。 jsfiddle.net/9sg0h8my/

ｵｯﾁｰ @otiext

2013/11/8にながしまさんがすでに報告していたようです。 code.google.com/p/chromium/iss…

よしこ @yoshiko_pg

> 要素のボーダーの色がborderプロパティーで指定されない場合、ユーザーエージェントはボーダーの色の算出値として、要素の'color'プロパティーの値を使用しなければならない。 これ前 @GeckoTangさんのスライドで知ってへぇーってなった #tokyocssspecs

よしこ @yoshiko_pg

border-styleのgroove, ridge, inset, outsetの色って仕様書で決まってなくてUA依存なんだー 仕様書では「あたかもキャンバスに彫られたかのように見える」ってことだけ定められてる・・・文学的・・・ #tokyocssspecs