Designing on the Web

Frontend Conference Hokkaido 2025
saku🌸 / @sakupi01

saku

🤗
Design Technologist / ex-Web Frontend @Cybozu
Goolgle Developer Expert for Web Technologies

🍏 / ☕ / 🌏 >

❤

🐦 @sakupi01
📝 blog.sakupi01.com
🐙 @sakupi01
🦋 @sakupi01.com

CSS

Designing on the Web ?

The first Web Browser: WorldWideWeb

WorldWideWeb

The Second Accessible Web Browser: Line Mode Browser

Making the web work, for everyone.

ー Our mission | W3C

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

ー W3C Design Principles

Everyone is sooooo many ones!!

Everything is sooooo many things!!

HTML の制約：不明なものは全部無視

WWW parsers should ignore tags which they do not understand, and ignore attributes which they do not understand of tags which they do understand.

ー HyperText Mark-up Language

Ignoring Tags/Attributes
→ Protecting the Content

Protecting the Content on All Platforms

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.

ー WWW Project, HTML design constraints

No Control over Fonts or Colors

Printed Design - Author Controls Design

Printed Design の制約

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page.
We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things".

ー John Allsopp | A Dao of Web Design – A List Apart

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

We're not Alone

We're Collaborating

We're Collaborating

ブラウザ

We're Collaborating

ブラウザ ユーザ

We're Collaborating

ブラウザ ユーザ

Dev

ディベロッパー

We're Collaborating with Unknowns

Is Designing on the Web possible ・・・?!

Demand for Stylish Web

HTML is the kind of thing that can only be loved by a computer scientist.
Yes, it expresses the underlying structure of a document, but documents are more than just structured text databases; they have visual impact.
HTML totally eliminates any visual creativity that a document’s designer might have.

ー 1993, Roy Smith, www-talk “Re: Adobe’s PDF”

Mosaic <IMG> Tag

IMG Tag の実装された Mosaic

We lose everything what HTML made special

  • ネットワークの状況によってはコンテンツがロードされない。何も残らない。No protection of content.
  • 異なるデバイス、ユーザ、設定、etc... を考慮できない。No flexibility.
  • 画像がないと、コンテンツが伝わらない。No accessibility. No SEO.
Not Found Image with no alt

CSS “to save HTML”

Historical Style Sheets Proposals

Håkon Wium Lie: Web が巨大な Fax Machine になってしまう

The web would have become a giant fax machine where pictures of text would be passed along.

Dev.Opera — CSS: It was twenty years ago today — an interview with Håkon Wium Lie

CHSS - Cascading HTML Style Sheets

CHSS - Cascading HTML Style Sheets

The proposed scheme provides a simple mapping between HTML elements and presentation hints.

1993, Håkon W Lie's Proposal: Cascading HTML Style Sheets

CHSS - Cascading HTML Style Sheets

The proposed scheme provides a simple mapping between HTML elements and presentation hints.

Properties like font family and window size can be suggested by the style sheet, and it can also provide logic to make presentation decisions based on the user’s environment

1993, Håkon W Lie's Proposal: Cascading HTML Style Sheets

CHSS - Cascading HTML Style Sheets

The proposed scheme provides a simple mapping between HTML elements and presentation hints.

Properties like font family and window size can be suggested by the style sheet, and it can also provide logic to make presentation decisions based on the user’s environment

the user/browser specifies initial preferences and hands the remaining influence over to the style sheets referenced in the incoming document.

This will provide publishers with stylistic influence without resorting to page description languages.

1993, Håkon W Lie's Proposal: Cascading HTML Style Sheets

CHSS - Cascading HTML Style Sheets

The proposed scheme provides a simple mapping between HTML elements and presentation hints.

Properties like font family and window size can be suggested by the style sheet, and it can also provide logic to make presentation decisions based on the user’s environment

the user/browser specifies initial preferences and hands the remaining influence over to the style sheets referenced in the incoming document.

This will provide publishers with stylistic influence without resorting to page description languages.

Indeed, if conflicts arise the user should have the last word, but one should also allow the author to attach style hints.

1993, Håkon W Lie's Proposal: Cascading HTML Style Sheets

Styles are suggestions or hints about behavior, not rules.

1993, WWW-Talk, Robert Raisch’s RFC: STYLESHEETS

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

display: initial; is Inline by default

display initial は inline にフォールバックする

Soften the tension b/w the Author and the Reader

This proposal tries to soften the tension between the author and the reader

ー Cascading HTML Style Sheets — A Proposal

個性的な表現を求める Author vs. 一貫性を求める User

While the author (or publisher) often wants to give the documents a distinct look and feel, the user will set preferences to make all documents appear more similar.
Designing a style sheet notation that fill both groups' needs is a challenge.

二者択一への解決策

ユーザが最優先、スタイルをヒントとして適用する

Indeed, if conflicts arise the user should have the last word, but one should also allow the author to attach style hints.
... This proposal tries to soften the tension between the author and the reader by:
a) giving readers a richer visual (or auditory and tactile) environment while they retain control if necessary, and
b) providing authors and publishers with stylistic influence without resorting to page description languages.

balanced scheme with the same notation...?

The proposed scheme is balanced in the sense that it provides author and reader with the same notation for specifying style.
ー Cascading HTML Style Sheets — A Proposal

The same notation

CSS Syntax Module Level 3

Declaration (Property)

  • 名前: 値; のペア
/* property: value; */
color: blue;

Style Rule (a.k.a. Rule-set)

  • セレクタで括られた Declaration のチャンク
/* a selector, with attached declarations… */
p {
  background: white;
  color: mediumVioletRed;
}

StyleSheet

  • Rule の集合
<link rel="stylesheet" href="styles.css">
@import url("styles.css");

Style with Same Notation

/* <input type="text" id="form" class="occupation"> */

/* site style */
input { color: gray; }
.occupation { color: darkBlue; }
[type="text"] {
  color: darkGreen;
  color: var(--submit, black);
}
#form { color: maroon; }

/* user style */
input { color: olive; }

/* ua style */
input { color: FieldText; }

💥 Conflicts!

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

🔥⚔️ Cascade Arena ⚔️🔥

Initial Value (Spec-defined value)

/* initial values */
display: inline;
background: transparent;
color: CanvasText;
font-style: normal;
flex-basis: auto;
/* etc. */

* { all: initial !important; }

すべてのプロパティを仕様初期値に

すべてのプロパティを仕様初期値にした画面

①: UA StyleSheet 🌐

Based on: 15 Rendeing, 15.2 The CSS user agent style sheet and presentational hints - HTML Standard

html, body, p, div, article, aside, header,
hgroup, footer, main, nav, section /* etc */ {
  display: block;
}

base, basefont, datalist, head, link, meta,
script, style, template, title /* etc */ {
  display: none;
}
body { margin: 8px; }
table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}
h1, h2, h3, h4 /* etc */ {
  font-weight: bold;
}

②: User StyleSheet 👤

  • Chrome: chrome://settings/appearance
  • Edge: edge://settings/appearance
  • Safari: Safari > Settings > Advanced > Style Sheet
  • Firefox: about:preferences

Customized CSS WG Page Normal CSS WG Page

③: Author StyleSheet 💻

③: 🖥️ Author (strongest)
②: 👤 User
①: 🌐 User Agent (weakest)

If conflicts arise the user should have the last word

– Håkon Lie, Cascading HTML style sheets – a proposal

If a trade-off needs to be made, always put user needs above all.
– W3C Web Platform Design Principles

🤔🤔🤔

Balance in CHSS - Weighted Influence

/* user styles */
body.background = blue 50%;

/* site styles */
body.background = tomato 100%; /* 50% (MAX 100% - 50%)*/

color-mix(in srgb, blue 50%, tomato 100%)

👀 blue + yellow = green???

WWW-Talk Oct-Dec 1994: Re: Cascading HTML style sheets -- a proposal

CSS - Cascading Style Sheets
(Weighted Influence Importance)

/* user styles */
body { background: hotpink; } /* 0% */

/* site styles */
body { background: tomato !important; } /* 100% */

⑥: ❗🌐 Important Author (strongest) 👀💭
⑤: ❗👤 Important User
④: ❗🖥️ Important User Agent
③: 🌐 Normal Author
②: 👤 Normal User
①: 🖥️ Normal User Agent (weakest)

Author Styles をオーバーライドできない...🙃

If a trade-off needs to be made, always put user needs above all.
– W3C Web Platform Design Principles

… for balance, an “!important” declaration (the keywords ”!” and “important” follow the declaration) takes precedence over a normal declaration.
Both author and user style sheets may contain “!important” declarations, and user “!important” rules override author “!important” rules.
ー Cascading Style Sheets, Level 2

それゆえ、!important では、Origin の優先順位が逆転する

⑥: ❗🖥️ Important User Agent (strongest)
⑤: ❗👤 Important User
④: ❗🌐 Important Author
③: 🌐 Normal Author
②: 👤 Normal User
①: 🖥️ Normal User Agent (weakest)

I am very !important!!!
Please DO NOT OVERRIDE ME!!

!important は...

  • 👎🏻 詳細度バトルに勝つため
  • 👍🏻 UA/User がスタイルを守るため

The Collaboration System is...

Author Controls Design

CSS is a Declarative Language

Tell the meaning of the design.
Not the specific process.
Let the Browser do the smart decision.

width: auto;

どのくらいの px になるかはわからんけど、コンテンツに合わせて幅決めて！

text-wrap: pretty;

なんかいい感じに揃えて！

text wrap

CSS is a Declarative Language

Tell the meaning of the design.
Not the specific process.
Let the Browser do the smart decision.

to Design in Unknown Context.

"Vague, but exciting..."

The Birth of the Web | cern.info.ch - Tim Berners-Lee's proposal

vague but exciting

Thank you for listening!

Appendix

Last publicly available revision of the world's first web browser. This is a source import from 0.15 for NextStep. Originally written by @timbl.

The line-mode browser, launched in 1992, was the first readily accessible browser for what we now know as the world wide web. It was not, however, the world’s first web browser. The very first web browser was called WorldWideWeb and was created by Tim Berners-Lee in 1990.