公共財としてのウェブ、あるいは Stewardship について

2026年第1回 W3C日本会員会議
saku🌸 / @sakupi01

saku

🤗
Design Technologist @Cybozu

Google Developer Expert for Web Technologies 🌏✨ / CSS&UI

  • Working Group
    • Cascading Style Sheets (CSS) Working Group
  • Community Groups
    • Design Tokens Community Group
    • Open UI Community Group
    • Web Components Community Group
    • WebDX Community Group
✨

Truly exciting era
for Web UI

✨

Flexbox gap / :focus-visible / :has() / appearance / Logical properties / Forced colors / aspect-ratio / prefers-contrast media query / color-scheme / Individual transform properties / overflow: clip / Container queries / Media query range syntax / linear() easing / Nesting / Hyphenation / color-mix() / :dir() / Quotes / ::file-selector-button / contain-intrinsic-size / dynamic-range media query / Cascade layers / :nth-child() of <selector> / :modal / Oklab and OkLCh / calc() keywords / font-synthesis / paint-order / Lab and LCH / white-space-collapse / lh unit / scripting media query / Update frequency media query / color() / counter-set / sin(), cos(), tan(), asin(), acos(), atan(), and atan2() (CSS) / Motion path / Hyphenate character / font-variant-alternates / Subgrid / image-set() / Two-value display property / :user-valid and :user-invalid / Overflow media queries / @counter-style / font-palette / HWB / font-synthesis-weight / font-synthesis-style / Inline-size containment / font-synthesis-small-caps / pow(), sqrt(), hypot(), log(), and exp() / cap unit / rlh unit / ic unit / ::backdrop / color-gamut media query / contain / Layout containment / Paint containment / Size containment / Style containment / fit-content / Grid animation / resolution media query / tab-size / text-align-last / text-combine-upright / 3D transforms

Baseline CSS features from 2021/04 ~ 2026/04 - Web Platform Status

Duration from first implementation to Baseline Newly Available

So many. So fast. So interoperable. So exciting.

Interoperable Feature Deliberation

Web platform features explorer - Web features timeline

Cascading Style Sheets (CSS) is a core language of the open web platform, and is used for adding style (e.g., fonts, colors, spacing) to Web documents.
-- Cascading Style Sheets

The more exciting.

The more complicated.

What's NOW?

Web on everything?!

Everything is soooooo many things!!!

(Including the future.)

It is required that HTML be a common language between all platforms.
This implies no device-specific markup, or anything which requires control over fonts or colors, for example.

HTML は全てのプラットフォームにおける共通の言語でなければならない。
つまり、例えば、特定のデバイスに依存したマークアップや、フォントやカラーのコントロールが求められるものは、これをしてはならない。
HTML Design Constraints

1.1. Put user needs first

Web Platform Design Principles

Control from User → Creator

4.5. Content should be viewable and accessible by default

Design CSS properties or CSS layout systems (which are typically values of the display property), to preserve the content as viewable, accessible and usable by default.
Web Platform Design Principles

Web for all. Web of trust. Web on everything.

Client controls Design

Web Design - Client Controls Design

Web でのスタイリングはコンテキストに依存する

  • @media (Viewport, light/dark, prefers-*, etc...)
  • User Settings (font-size, color scheme, etc...)
  • Interactions (Hover, Focus, Touch, Long-press, Voice, etc...)
  • Device Capabilities (PC/Mobile, OS, Screen Size, Input Methods, etc...)
  • User Abilities (Languages, Writing/Reading Modes, Accessibility Needs, etc...)
  • Browser Capabilities (Browser Versions, Builds, Feature Flags, Finch Hits, etc...)
  • Environment (Network, Battery, etc...)
  • And Many More...

We're not Alone

We're Collaborating

We're Collaborating

ブラウザ

We're Collaborating

ブラウザ ユーザ

We're Collaborating

ブラウザ ユーザ

Dev

ディベロッパー

We're Collaborating with Unknown people in Unknown space

Cascading Style Sheet

big fit

すべての HTMLElement
すべての CSS Properties に対して、
必ず一つの Value が決定されていないと
ブラウザはスタイルできない

ウェブの「クライアントの拡張」

「Visual Space」 on the Web

「Visual Space」 on the Web: CSS Spatial Layout explainer

.card {
  spatial: page;
  inset-back: 20px;
}

WebKit CSS Spatial Layout explainer

「AI Agent」on the Web

AI Content Disclosure Proposal

<aside ai-disclosure="ai-generated" ai-model="gpt-4o" ai-provider="OpenAI">
  ...
</aside>

AI Content Disclosure · Issue #261 · WICG/proposals

Web MCP

execute: async ({ product_id }, agent) => {
  const confirmed = await agent.requestUserInteraction(async () => {
    // check for user
  });
  if (!confirmed) throw new Error("Cancelled by user.");
  // ...
}

webmachinelearning/webmcp: 🤖 WebMCP

AX (Agent Experience) vs. UX (User Experience) ?

AX is inseparable from UX

Developers cannot control the Web, but it's a feature for humanity.

The platform evolves faster than our understanding of it, and the only way to know what the web actually is — not what we imagine it to be — is to look.
... I really wish that the W3C (and member orgs which include academia) had taken up the charge to begin to figure out how to really study the web and use that information to inform standards work.

プラットフォームは私たちの理解を越える速さで進化しています。Webが(私たちがこうあるべきだと想像している姿ではなく)実際にどうなっているかを知る唯一の方法は、実態を見ることです。
……W3Cやそのメンバー組織が、Webの実態を研究し、その情報を標準化作業に活かすという責任をもっと早く果たしてくれていれば、と切に願います。)
-- Brian Kardell The Secret Life of Custom Elements

fin.