Drafting the Future of CSS

#tpac_study
saku🌸 / @sakupi01

saku

🤗
Design Technologist / ex-Web Frontend @Cybozu

Goolgle Developer Expert for Web Technologies

Question:

What is a standard?

標準化(Standardization)とは、「自由に放置すれば、多様化、複雑化、無秩序化する事柄を少数化、単純化、秩序化すること」です。 また、標準(=規格: Standards)は、標準化によって制定される「取決め」と定義されます。
-- 日本産業標準調査会:産業標準化とJIS

A standard is a document that provides requirements, specifications, guidelines or characteristics that can be used consistently to ensure that materials, products, processes and services are fit for their purpose.
-- ISO - Standards

Standards are documents established by consensus and approved by a recognized body.
-- Standards | Standards Council of Canada

A standard is an agreed way of doing something.
—- British Standards Institution

Standards are the result of a consensus and are approved by a recognized body.
-- Role of standards | UNITED NATIONS INDUSTRIAL DEVELOPMENT ORGANIZATION

"Consensus", "Agreements" or "秩序" to fit for s-thing/body's "purpose"

What is Consensus?

A substantial number of individuals in the set support the decision and there is no sustained objection from anybody in the set.
Individuals in the set may abstain. Abstention is either an explicit expression of no opinion or silence by an individual in the set.

その集団に、決定を支持する人がかなりの数おり、集団内から継続的な反対意見も出ていない状態。
ただし、集団内の個人は棄権することができる。棄権とは、個人が明確に意見がないことを表明すること、あるいは沈黙することのいずれかを意味する。
-- W3C Process Document

[css-grid-3][masonry] item-flow row vs. column in masonry layouts

  • Flexbox と Grid の記法を統一し、 Grid-Lanes (Masonry) も定義できる鋭意仕様策定中のプロパティ
  • このプロパティにおける「Direction」という概念の定義について

Flex は Shape と Flow が一致するので、 Direction を決定できる
Grid は Shape がどちらにも取れるので、 Flow が Direction を決定できる

flex-flow の shape

flex-flow の flow

grid-flow の shape

grid-flow の flow

Waterfall Masonry は item-flow: rowitem-flow: column

  • Masonry レイアウトでは Shape と Flow が一致しない
  • → どちらに基づくかで Direction の解釈が変わる
  • grid-auto-flow: column;
    • 「Shape」に基づくなら「Waterfall」
    • 「Flow」に基づくなら 「Brick」
  • Shape 案は直感的な見え方を反映でき、Flow 案は Grid との一貫性を反映できると言える

Shape of Layout:
Shape of Layout

Flow of Layout:
Flow of Layout

- これが決まると、Item Flow の仕様が芋蔓式に決定できる

tab: 「もし waterfall レイアウトでrowを使うなら formal objection する」
tab: 「formal objection する!」
nt1m: 「もしそうならこっちだって formal objection する」
miriam: 「対話したいと言ったのに formal objection?自分たちには発言権ないの?」
alan: 「formal objectionを投げ合うのは不適切かつ生産的じゃない」
fantasai: ライブコーディングで折衷案を出す
florian: 「ここではまとまらないから、オフラインで話せてよかったとして、一旦次に進もう。」

Outside of the formal discussion:

Side Note from CSSWG Member ~fantasai

Chair を断り続けている理由

Roles in Standardization

  • Working Group Member

Roles in Standardization

  • Working Group Member
  • Chair

Roles in Standardization

  • Working Group Member
  • Chair
  • Editor

Roles in Standardization

  • Working Group Member
  • Chair
  • Editor
  • Reviewer

Roles in Standardization

  • Working Group Member
  • Chair
  • Editor
  • Reviewer
  • Tester

Roles in Standardization

  • Working Group Member
  • Chair
  • Editor
  • Reviewer
  • Tester
  • Implementer

Roles in Standardization

  • Working Group Member
  • Chair
  • Editor
  • Reviewer
  • Tester
  • Implementer
  • Community Member

Roles in Standardization

  • Working Group Member
  • Chair
  • Editor
  • Reviewer
  • Tester
  • Implementer
  • Community Member
  • End-user

Chair を断り続けている理由

  • それぞれには適切な役割がある
  • > 「私はテックリード、Alan はスクラムマスター」

Spec のエディタになるには?

Path for Speccing

  1. Read the spec
  2. Complain about it!
  3. Opine in issues
  4. Suggest improvements
  5. Edit the spec

Spec Edits "だけ"が必要なわけじゃない

Technically Beneficial & Interoperable "Web Standards"

Collaboration + Wide Review → Technical Benefit

Consensus + Documentation → Interoperability

Spec Edits だけが必要なわけじゃない

  • リアルワールドのユースケースや実装経験からのフィードバックが欲しい
  • ある意味「貴重」

Why Standardize? Why we need it?

The promise of web standards:

W3C standards define an open web platform for application development.
The web has the unprecedented potential to enable developers to build rich interactive experiences, that can be available on any device.
-- Web Standards | W3C

Drafting the Future of CSS

ultimately means...

Drafting the Future of the Open Web

Future of the Open Web

fin.

Appendix