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
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
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

すべての HTMLElement の
すべての CSS Properties に対して、
必ず一つの Value が決定されていないと
ブラウザはスタイルできない
ウェブの「クライアントの拡張」
「Visual Space」 on the Web
「Visual Space」 on the Web: CSS Spatial Layout explainer
.card {
spatial: page;
inset-back: 20px;
}
「AI Agent」on the Web
AI Content Disclosure Proposal
<aside ai-disclosure="ai-generated" ai-model="gpt-4o" ai-provider="OpenAI">
...
</aside>
Web MCP
execute: async ({ product_id }, agent) => {
const confirmed = await agent.requestUserInteraction(async () => {
// check for user
});
if (!confirmed) throw new Error("Cancelled by user.");
// ...
}
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.
Appendix — References
- W3C Mission / Ethical Web Principles
- W3C TAG — Web Platform Design Principles / RFC 8890
- W3C Process Document / How to participate in W3C
- Web Platform Tests / Test262
- WebDX Community Group / Baseline
- WebMCP Draft / llms.txt / NLWeb
- WebKit
CSS Spatial Layoutexplainer - Robert Raisch's RFC: STYLESHEETS, 1993
- Håkon W Lie — Cascading HTML Style Sheets, A Proposal, 1994