Designing CSS Elika J. Etemad aka fantasai W3C CSS Working Group Invited Expert

Specs I've Worked On Since 2004

CSS2.1
CSS Style Attributes
Selectors Levels 3 & 4
CSS Pseudo-Elements Level 4
CSS Scoping Level 3
CSS Cascading & Inheritance Levels 3 & 4
CSS Backgrounds & Borders Level 3
CSS Images Level 3
CSS Values & Units Level 3
CSS Text Decoration Level 3
CSS Text Level 3
CSS Ruby Layout Level 1
CSS Inline Layout Level 3
CSS Line Grid Level 1
CSS Rhythm Level 1
CSS Logical Properties Level 1
CSS Writing Modes Level 3
CSS Box Alignment Level 3
CSS Flexible Box Layout Level 1
CSS Grid Layout Levels 1 & 2
CSS Intrinsic & Extrinsic Sizing Level 3
CSS Display Level 3
CSS Fragmentation Level 3
CSS Paged Media Level 3
CSS Overflow Level 3
CSS Fill & Stroke Level 3

What is CSS?

A basic Web page is composed of HTML and CSS.

HTML is just annotations around the text, describing its structure.

CSS is just annotations keyed off the HTML, describing its presentation.

Design for the Web is very different from design for Print.

You often don't have control over the content.

You almost never have control over the display size or orientation.

Resizable CSSWG Redesign circa 2011 (Divya Manian & Elika Etemad)

But with CSS, we can make designs that take whatever environment and content we have as input, and lay it out to fit perfectly. (Try resizing the page above!)

5 Principles of Web Architecture

Web Architecture Cross-Device & Cross-Platform

Screen / Print / Braille / Terminal / Speech / Mobile / ...
Landscape / Portrait / High-res / Low-res / Widescreen / Phone screen / ...
NeXT / MacOS / Windows / Linux / Irix / Solaris / Symbian / Android / iOS / BeOS / ...
Gecko / Presto / Trident / WebKit / Servo / ...
Mouse / Keyboard / Touchscreen / Wiimote / Voice nav / ...

Web Architecture World-Wide Web

All Writing Systems
All Languages
Handle Hybrids

Web Architecture Forwards- and Backwards-Compatibility

Forwards-compatible Parsing
Levels, not Versions

Web Architecture No Dataloss

Visible By Default
Readable By Default

Web Architecture Separation of Content & Style

HTML for content & structure
CSS for presentation

Why? Separation of Content & Style

Efficiency of Implementation, Maintenance, Memory/Bandwidth
Accessibility for Speech, Search, Reader Mode and Other Re-use
Variability Exploring Choices, Changing over Time

How? Separation of Content & Style

CSS Zen Garden: Separation of Content & Style

Principles of Web Architecture

Cross-Device & Cross-Platform
World-Wide
Forwards- and Backwards-Compatible
No Dataloss
Separated Content & Style

Fundamental Goal of the Web = Accessibility of Information

Constraints of CSS

Unknown display size and orientation
Unknown font availability
Unknown content (user-generated, database-generated)
Unknown language / writing system (localization, translation)
No post-processing

Design Principles of CSS

Flexible
Powerful
Robust
Understandable
Performant

Multi-column Layout

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

columns: 2

columns: 15em

columns: 15em 3

Flexible Box Layout

First

Second Longer Item

Third

justify-content: center

First

Second Longer Item

Third

justify-content: space-evenly

First

Second Longer Item

Third

flex: 1

First

Second Longer Item

Third

flex: auto

Initial Letters

Automatic Sizes

Resizable Typography Experiment using “Intrinsic Design” (Jen Simmons)

Automatic Sizes

grid-template-columns: max-content max-content 1fr min-content

Automatic Typesetting

日本語English فارسی
２０１８年9月19

writing-mode: vertical-rl;
text-orientation: mixed;
text-combine-upright: digits 2;

Relativity: What is your sizing based on?

Containing block size? → Use auto, stretch, or percents.
Viewport size? → Use viewport units vw, vh, vmin, vmax
Font height? → Use em or rem.
Font pitch? → Use em, ch, ic.
Content size? → Use auto or min-content/max-content.
Combination of the above? → Use compound formulas via flex, min-width, minmax(), etc.

Design Principles of CSS

Flexible
Powerful
Robust
Understandable
Performant

Design Pitfalls of CSS

Iterative Layout / Expensive Algorithms
Unsolveable Constraints
Likely Dataloss (Unexpected Clipping or Overlap)

`shape-inside`

Exclusions

Regions

Grid Layout First Proposal

Grid Layout

MSFT Grid Layout v2 + Bert’s Template Layout + Line-based Model Δ
→ CSS Grid Layout Model

Interoperability

Specifications
Layout Engines
Test Suites
Web Content

Open Standards

Proprietary	.....🐇	5年
Open	....................................................................................................🐢	100年

Designing CSS Elika J. Etemad aka fantasai W3C CSS Working Group Invited Expert

Specs I've Worked On Since 2004

What is CSS?

Design for the Web is very different from design for Print.

Resizable CSSWG Redesign circa 2011 (Divya Manian & Elika Etemad)

5 Principles of Web Architecture

Web Architecture Cross-Device & Cross-Platform

Web Architecture World-Wide Web

Web Architecture Forwards- and Backwards-Compatibility

Web Architecture No Dataloss

Web Architecture Separation of Content & Style

Why? Separation of Content & Style

How? Separation of Content & Style

CSS Zen Garden: Separation of Content & Style

CSS Zen Garden: Separation of Content & Style

CSS Zen Garden: Separation of Content & Style

Principles of Web Architecture

Fundamental Goal of the Web = Accessibility of Information

Constraints of CSS

Design Principles of CSS

Multi-column Layout

Flexible Box Layout

Initial Letters

Initial Letters

Initial Letters

Initial Letters

Automatic Sizes

Automatic Sizes

Automatic Sizes

Automatic Typesetting

Relativity: What is your sizing based on?

Design Principles of CSS

Design Pitfalls of CSS

shape-inside

Exclusions

Regions

Grid Layout First Proposal

Grid Layout

Interoperability

Open Standards

天下一网ワンウェブ

Thanks! ~fantasai

`shape-inside`