第30回 W3C CSS Module 仕様書もくもく会@東京のまとめ

tokyo-css-module-specs.connpass.com

参加者のみなさま、会場を貸してくださったto-Rさま、ありがとうございました！

次回（5月）はリモート開催かスキップになるかもしれません。またどこかでお知らせします。

---

お題

CSS Grid Layout Module Level 1

会の中で参考にしたページ

• CSS Layout News
• Best Practices With CSS Grid Layout — Smashing Magazine
• Auto-Sizing Columns in CSS Grid: `auto-fill` vs `auto-fit` | CSS-Tricks
• Aspect Ratio in pure HTML
• これからのレイアウトはGrid Layoutで決まり？特徴で使い分けたいCSSレイアウト手法 - ICS MEDIA
• https://jsfiddle.net/q2bsozt5/
• Grid by Example - Usage examples of CSS Grid Layout
• これからのグリッドレイアウト | CodeGrid
• CSS Gridのデバッグ方法 - 各種ツールとデバッグの実際 | CodeGrid
• Grid Garden - A game for learning CSS grid layout

第29回 W3C CSS Module 仕様書もくもく会@東京のまとめ

tokyo-css-module-specs.connpass.com 参加者のみなさま、今回もありがとうございました！

次回も月末頃に、渋谷か池袋あたりで開催します。よろしくおねがいします。

---

お題

CSS Basic User Interface Module Level 3 (CSS3 UI) 日本語訳

参加者の@kazuhitoさんによる覚え書き

第29回 W3C CSS Module 仕様書もくもく会@東京 | 覚え書き | @kazuhito

それに対して、この回で読んだCSS Basic User Interface Module Level 3 (CSS3 UI) 日本語訳の訳者である@momdo_さんからのレス

＞一体そのエネルギーというかモチベーションはどこから湧いてくるのか...... 期待させておいて申し訳ないけど、ただの惰性です（）

— もんど (@momdo_) 2018年3月30日

でまあ、アクセシビリティおじさんの記事に戻ると ＞広いレビューの機会を確保するために少なくとも2018年2月1日までProposed Recommendationのままってありましたけど、その後の動きが気になりました。 来月のCSSWG f2fで何か話題が出れるかもしれないし、そうじゃないかもしれない

— もんど (@momdo_) 2018年3月30日

＞「CSS2.1のユーザーインターフェイス機能」、って何がどこまで包含されているのだろう？ 概ねCSS 2.1の18章を指していると解釈して問題ないかと

— もんど (@momdo_) 2018年3月30日

＞「次の曖昧性除去」に続く内容が読んでも全然わからなすぎてやばいw あれはCSS 2.1の視覚整形モデル詳細を置換している文言なので、CSS 2.1の10章と一緒に読まないと「わけがわからないよ」な内容かと。

— もんど (@momdo_) 2018年3月30日

＞アウトラインについて、「ボックスの"上"に描画される」というのは、どういう処理がなされているんでしょ。z-index値で制御されるのとは別次元？ CSS 2.1付録E.2を"アウトライン"で検索すれば当該箇所が分かるはず

— もんど (@momdo_) 2018年3月30日

＞「ユーザーエージェントは、各次元で独立してこの制約を適用すべきである」の「次元」とは何なのか問題。 dimensionをそう訳している（よく、寸法と取られるけども、英和にその用例がないため、やむなく次元と訳出。和英ならあるけど、和英から用例を取っていいのか誰か教えて欲しい）

— もんど (@momdo_) 2018年3月30日

＞「多くのCSSレイアウトの要素に依存してもよい」とあったけど、ちょっと頭の中で引っかかってしまったのは、「要素」というのが一般名詞なのか、HTMLのソレなのか、というのがパッと掴めなかったのね。 たぶん文脈からして、HTMLのそれではない（あまり訳がよくないかもしれない）

— もんど (@momdo_) 2018年3月30日

＞「文字は部分的にのみレンダリングされてもよい」というのも、さらっと読み流せなかったところ。 まあこれも訳が怪しいかもしれない

— もんど (@momdo_) 2018年3月30日

＞「ヒットテストの詳細はこの仕様の範囲外である。ヒットテストはうまくいけば、CSSまたはHTMLの将来の改訂版で定義される。」とあるけど、結局規定されているのか謎。 css-ui-4で今のところ書いてあることもui-3とさして変化がない予感

— もんど (@momdo_) 2018年3月30日

＞「高価値データ」って何？？？ 原語ではhigh-value data。Security and Privacyなものなので、そのコンテキストだとどう訳せばいいのか、おしえて欲しい。 https://t.co/FnqzTDsisR

— もんど (@momdo_) 2018年3月30日

＞「動作すべきか？」に対する答えが変化しない。というのは、どうもしっくり来ない......「動作しない。」なら超しっくり。 誤訳かもしれないし、そうかもしれない

— もんど (@momdo_) 2018年3月30日

会の中で参考にしたページ

• 108 byte CSS Layout Debugger · GitHub
• -moz-outline-radius - jsdo.it - Share JavaScript, HTML5 and CSS
• CSS でドラッグをきめる · GitHub
• <input>: 入力欄（フォーム入力）要素 - HTML | MDN
• Can I use... Support tables for HTML5, CSS3, etc
• 4.10 Forms — （古）HTML 5.1 日本語訳
• HTML Standard 日本語訳
• CSS3関連規約

---

参加者の皆様のおかげで知見を深められる会、それがW3C CSS Module 仕様書もくもく会@東京です。

このブログのことは今日の今まで忘れていました！これからは頑張って記録していこうと思います。

第28回 W3C CSS Module 仕様書もくもく会@東京のまとめ

tokyo-css-module-specs.connpass.com

参加者のみなさまありがとうございました。

※この記事は2018/3/31に投稿しています。イベントの開催順で記事を登録するため投稿日時を操作しています。

---

お題

CSS Multi-column Layout Module Level 1 （日本語訳）

会の中で参考にしたページ

• 発話（はつわ）の意味 - goo国語辞書
• columnプロパティが特定の状況でおかしくなる - dskd
• CSS WG Blog
• CSS Regions Module Level 1
• CSS Regions - Chrome Platform Status
• W3Cスタイルシート仕様の歩き方みたいなもの（メモ） - 水底の血
• 仕様書の読み方 CSSプロパティ編 - 仕様表を読んでみよう | CodeGrid
• 基本の前の基礎知識 - Back to Basics CSS 2015-08-30
• Emulate Print Layout with Chrome DevTools
• column-fill - CSS | MDN

第27回 W3C CSS Module 仕様書もくもく会@東京のまとめ

tokyo-css-module-specs.connpass.com

参加者のみなさまありがとうございました。

※この記事は2018/3/31に投稿しています。イベントの開催順で記事を登録するため投稿日時を操作しています。

---

お題

CSS Will Change Module Level 1 （日本語訳）

会の中で参考にしたページ

• Dev.Opera — CSS will-changeプロパティについて知っておくべきこと
• CSS: will-change指定時の挙動, パフォーマンスへの影響と考察 - Qiita
• Can I use... Support tables for HTML5, CSS3, etc
• CSS "Will Change" – Welcome to the Windows developer feedback site!
• will-change - CSS: Cascading Style Sheets | MDN

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

グッドパッチさんで。 読んだのはボックスモデルです。

tokyo-css-module-specs.connpass.com http://togetter.com/li/939225

デモなど

• o_ti [8:33 PM]
  border-widthのキーワード指定、主要ブラウザではさほど違いはなさそう。
  https://jsfiddle.net/fvujhn00/

• matori [8:34 PM]
  2009年に書いたやつ
  http://unformedbuilding.com/articles/border-style-ridge-groove-outset-inset/

• o_ti [8:55 PM]
  https://jsfiddle.net/fvujhn00/1/
  全部ためしてないけど、Chromeだと border-style: groove に border-color つかなくなってる

• geckotang [8:56 PM]
  currentColorを使うようになってないのかな
  border-color: indigo; ならいけるね (edited)
  border-color: currentColor; はダメ

• geckotang [8:58 PM]
  ridge inset outset groove は currentColorを使うようになってないね。

• geckotang [9:04 PM]
  @o_ti: https://code.google.com/p/chromium/issues/detail?id=316559

• matori [9:19 PM]
  できました https://jsfiddle.net/hLyvo3pc/1/

  yoshiko 匿名ブロックボックスって要素に囲われてないテキストとかに暗黙的に作られるものだと思うんですが、それに子ができることってあるんですかね・・・？

  たとえば、上記のDIV内の匿名ブロックボックスの子が、パーセント高さを解決するためにその包含ブロックの高さを知る必要がある場合、匿名ブロックボックスではなくDIVによって形成された包含ブロックの高さを使用する。

みなさんありがとうございました。

第4回 W3C CSS Module 仕様書もくもく会@東京 第7章メディアタイプを読む

グッドパッチさんで。
読んだのはメディアタイプです。

tokyo-css-module-specs.connpass.com togetter.com

参考リンク

• http://momdo.github.io/css2/media.html
• http://www.hcn.zaq.ne.jp/___/WEB/mediaqueries4-ja.html#media-types
• https://developer.mozilla.org/ja/docs/Web/CSS/@media

デモなど

o_ti [9:05 PM]
メディアタイプ周りの指定、エラー処理優秀っぽい。
https://jsfiddle.net/k7a4jzy4/

みなさんありがとうございます。

第3回 W3C CSS Module 仕様書もくもく会@東京 CSS 2.2 テーブルの章を読む

グッドパッチさんでやりました。 読んだのはテーブルです。

tokyo-css-module-specs.connpass.com

togetter.com

Slackの様子

o_ti 17.5 テーブルコンテンツの視覚レイアウト http://momdo.github.io/css2/tables.html#table-layout 規則5のライブデモです。
http://jsfiddle.net/ryku20qh/
Chrome/Firefox/Safariで同じレンダリング結果でした。

みなさんありがとうございます。