Hints & Suggestions

slides.oddbird.net/hints/eleventy/

Miriam Suzanne @ 11ty International Symposium

May 8, 2024

We’re talking about:
Origins of the web,
But especially design on the web, using

CHSS

Cascading HTML style sheets -- a proposal, Håkon W Lie, 10 Oct 1994

CHSS
Håkon Lie, 1994
email, still archived online

not the only proposal
not the first
based on several existing proposals

(HEAD,BODY fontSize=normal
           BGColor=white
           FGColor=black
  (H1 fontSize=largest
      BGColor=red
      FGColor=white)
  (H2 fontSize=large)
  (A FGColor=red)
  (CMD,KBD,SCREEN,LISTING,EXAMPLE fontFamily=fixed)
  (BOLD,EMPH,STRONG fontWeight=bold)
)

“an easily parsable format”

@DEFAULT fo(fa=ti,sp=pr,si=14,we=me,sl=ro,fo=in,bo=in,li=no,nu=1,fn='')
ju(st=le,hy=0,ke=0) co(nu=1,wi=80) br(lo=af,ob=it)
li(lo=in,ma=no,li=un,nu=1,be=no,af=no,hi=0)

@UL in(le=5)
@LI ma(pr=ro,be=4) in(le=10,ri=10)

solves a major problem for the new platform

Technology Is Political

not technical
but philosophical
political, like all decisions we make
designing a new platform or interface

The first world wide website in the WWW Hypermedia Browser/Editor, on the neXt desktop -- an exercise in global availability

first web browser
Hypermedia WWW Browser and Editor
CERN
NeXt machine
graphic interface

Old IBM desktop with a text-only green on black display

You can’t make a web that’s world-wide, by saying it works on my machine, and everyone else is an edge-case.

The second browser, a text-only terminal with numbered links for keyboard control

Nicola Pellow
Line Mode browser
text-only
no install
any device with an internet connection

Web for all. Web on everything.

– W3C Mission Statement

Mission statement of W3C

A zillion different devices of all sizes

includes devices without screen
or screen readers
read the screen (a combination)

Web for all. Web on everything.

– W3C Mission Statement

If we really want this to work
Everywhere for everyone

leads to some interesting constraints
documented on the original website
(still online)

See the Pen Resilient HTML by @miriamsuzanne on CodePen.

browsers ignore code they don’t understand

[DEMO]

individual attributes
entire HTML tags

Protect the Content

across devices, and over time

the code is optional
the content is essential
whatever else happens
browsers should protect the content
that’s why…

we can still see
first website on modern browsers

11ty symposium site and oddbird CSS workshop pages displayed as black and white text on the WWW browser emulator

modern website, on the first browser
(this is an emulator you can play with)
No css
No images
all the text is there

It is required that HTML be a common language between all platforms…

– WWW Project, HTML constraints

limitation is more dramatic
for graphic design
to be a common language anywhere…

…This implies no device-specific markup, or anything which requires control over fonts or colors.

– WWW Project, HTML constraints

Web Design Will Never Happen

(at least in a graphic sense)

Viola WWW browser demonstrating early stylesheets

problem isn’t styles
early browsers internal stylesheets

Even text-only browser
headings, paragraphs, etc
But the styles are different per browser
not per website

not the way print works
define everything…
page size (static, forever)
export to PDF, jpg,
send it to the printer

Published book with badly super-imposed hand-pointer cursor and scribbled word click!

It just sits there
The same was true for other digital formats at the time…

PostScript, 1982 Page Description Language

PostScript around almost a decade
page description language
Like print
describes a static page
how big is it? where does each thing go?
We set fonts, colors, etc.
We have complete control, but…

The fact we can control a paper page is really a limitation of that medium.

– John Allsopp, A Dao of Web Design

That control comes at a cost
The page, print or PDF, is a static medium
can’t adapt to context or preferences
a limitation of the medium

Web Styles Must Be Contextual

web is different
even static sites aren’t static
what we ship is not always what our audience sees
styles must adapt to situations…
the web is responsive to context

`@media` `min-width`

Not just the width of the viewport

`@media` `prefers-reduced-motion`

user needs & preferences

`@media` `hover`

device interfaces

`@supports` `container-type: inline-size`

changing capabilities over time
in other words…

We're Not Alone (in big block letters, in space)

We’re not alone here
We’re part of an ecosystem
Our decisions impact other people
And we don’t get final say

Same We're Not Alone, with browser logos on top

We’re collaborating with browsers
(instructed to ignore us)

Same We're Not Alone, with browser logos and a guy in construction clothes carrying a laptop

Also the people who interact with our sites
On their chosen devices
(with varying capabilities)
wearing handy little tool belts

We're Not Alone, with browser logos, a guy in construction clothes carrying a laptop, and ET

aliens 👽
Maybe, who knows?
We should collaborate with them…

ET and the kids flying their bicycles across the sunset

just trying to get home.

The CHSS proposal is explicitly designed around this collaboration

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

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

Designed to soften the tension
But specifically…

If conflicts arise the user should have the last word…

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

If conflicts arise,
User should have last word

🖥 User Agent Defaults
👥 User Preferences
🎨 Author Styles
❗🎨 Author Important
❗👥 User Important
❗🖥 User Agent Important

The Cascade ensures that
from step one, origins and importance
When a user marks styles important
They take priority over anything we can say

The purpose of… ❗importance

Darth Vader
choking a rebel soldier
as storm troopers watch

Not for us to get in petty squabbles
And stomp around force-choking our colleagues

Kylo Ren and Rey
standing in front of an entire star war
with spaceships and lasers
and AT-AT walkers

But to maintain balance in the universe
And give power back to the rebel…
um… users. I don’t know.
Analogies are hard.

Yoda leans on a walking stick among leaves

A Jedi uses [importance] for knowledge and defense, never for attack.

– Yoda (almost)

If a trade-off needs to be made, always put user needs above all.

– W3C, Platform Design Principles

That’s a core W3C principle
If a tradeoff needs to be made
(in the design of the platform)
Always put user needs above all

Web Design Seems Impossible

Under those constraints,
design seemed almost impossible, but…

HTML totally eliminates any visual creativity that a document’s designer might have.

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

No one was happy with that outcome
When every site looks the same
That’s boring for both authors and users

Turning point, 1993
Mosaic added image tag to HTML
Before web standards
web styles suddenly possible

A pixelated broken-image icon, showing a photo torn at one corner

lose what makes HTML special
Can’t protect the content in an image…
If it doesn’t load, it’s lost

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

– Håkon Lie, 2014 interview

A real risk to the platform

1993-1994
a rush of different proposals

…Allow the author to attach style hints.

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

author style hints

Styles are suggestions or hints about behavior, not rules…

– Robert Raisch, Request for comments: STYLESHEETS

Not rules, but hints and suggestions.
(phrase shows up over and over)

Provide hints that the browser may or may not use.

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

A set of HINTS or SUGGESTIONS to the renderer which might be used…

– Robert Raisch, Request for comments: STYLESHEETS

Sometimes all-caps
[slide]

Provide authors and publishers with stylistic influence without resorting to page description languages.

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

In Håkon’s proposal…
authors and publishers have
stylistic influence
without resorting to page description languages
without giving us full control
Use the same resilient logic as HTML…

See the Pen Resilient HTML by @miriamsuzanne on CodePen.

browsers ignore css
always protect the content!

See the Pen CSS is Rad by @miriamsuzanne on CodePen.

reason default overflow is visible
if we get cocky
make a box too small for our text
Browser will try to bail us out
Not because it’s the best-looking solution
but because the web is unpredictable
so browsers protect content

Content should be viewable and accessible by default.

– W3C, Platform Design Principles

another design principle of the w3c
content should be viewable and accessible by default

InDesign doesn’t worry about
accidental overflow can be found and fixed
before we hit publish
and then it stays the way we designed it

Graphic design of unknown content with unknown collaborators, on an infinite and unknowable canvas, across operating systems, interfaces, languages, and writing modes…

– me

It’s absurd.

There are too many variables to consider. The point of CSS is to make it so you don’t have to worry about them all.

– Keith J Grant

CSS is A Declarative Language

/* a 'declaration' */
property: value;

write our hints as declarations,
a property and a value

`width``: 500px;`

Declare seemingly simple concepts
width of a box

`text-wrap:` `pretty``;`

More abstract concepts
wrapping text so it looks ‘pretty’
(whatever that means)

`width:` `500px``;`

Even the concepts that seem ‘simple’, hide deeper complexity
Should our box be smaller on a screen that has higher resolution?
What do we mean by a pixel?
How does that unit respond to zooming in and out?

Diagram of an element box, with content, padding, border, and margin -- width and height labels are applied to the content only

width of the content box?
padding and border are added

Diagram of an element box, with content, padding, border, and margin -- width and height labels are applied to everything except the margin

Or the width of the whole box,
with padding and borders?
No good answer
Depends on what we’re doing

`inline-size:` `500px``;`

Maybe we don’t want width at all
We’re really talking about the inline-size
The size available to a line of text

`width:` `min-content``;`
`width:` `max-content``;`

We could size the box
Based on it’s contents

`width:` `45ch``;`

Or the size of a character
in the font we’re using?

`width:` `100%``;`
`width:` `90vw``;`
`width:` `80cqi``;`

Or even based on context
a parent element, viewport, or container

`width:` `min(34ch, 100%)``;`

Or some combination
Like the minimum, of two values

A pink box labeled
context (defines available space),
and blue text overflowing the box
in the style of the awesome meme says
this content (takes up space)

Everything in CSS based on
constant back-and-forth
context pushing in,
(defining available space)
content pushing out
(taking up space)

How do we ensure
Our content will fit
any container we put it in?

We Can’t

We can’t
We don’t have all the information

But The Browser Can

But the browser does have all that info
If we want this power,
We have to give up control

`width:` `auto``;`

The most useful tools in CSS
express this kind of abstract behavior
let the browser work out details
if we can avoid touching it, we should
the browser knows more than we do

Expressive Like Language

not describing the page in step-by-step detail
but expressing high-level concepts
Our job is poetic, providing subtext
Not just the resulting style
But the purpose of a style choice
The intent

Subtext… `padding: 16px` != `padding: 1em`

Units are great at this
why CSS has so many
1em sometimes same as 16px
But they have different meaning
And adapt differently in context

Design For Change

My job is not
make it look good on my device
But make sure it adapts
to unexpected changes in context

In CSS… `flex` != `grid`

Similar with layout methods
We can get the same result using flexbox/grid
different movement and behavior

Express… More Meaning
Fewer Constraints

Writing CSS is about
expressing our intent clearly
using hints and suggestions
provide more meaning with fewer constraints

See the Pen CSS is Rad by @miriamsuzanne on CodePen.

To me, this meme perfectly captures what is actually awesome about CSS – and how we can go wrong by taking too much control without considering the consequences. So how can we lighten our grip here?

[demo] change to use intrinsic sizes

To Avoid Harm… Express Clear Intent

To avoid harm
Not describing a static page,
But expressing a design vision
Through HINTS and SUGGESTIONS
Help the browser understand constraints

to Avoid Harm Design For Change

so that when things change,
browsers can adapt our design

to Avoid Harm Design Systems

A cascading style sheet is a design system
A set of guides for maintaining cohesive design
Across a variety of contexts

To Avoid Harm… Use a Light Touch

define the edges, not the details

Use a light tough
Define the outer boundaries…

Web for all. Web on everything.

– W3C Mission Statement

We provide hints
Help the browser understand our goals,
Let the browser take care of details

First Do No Harm

This is our job as designers (engineers)
everything else in CSS
built around this political vision
protect the content, protect the user
Our first responsibility is not to break things
First, Do no harm

CHSS

“an easily parsable format”

Technology Is Political

Protect the Content

Web Design Will Never Happen

PostScript, 1982 Page Description Language

Web Styles Must Be Contextual

@media min-width

@media prefers-reduced-motion

@media hover

@supports container-type: inline-size

The purpose of… ❗importance

Web Design Seems Impossible

CSS is A Declarative Language

width: 500px;

text-wrap: pretty;

width: 500px;

inline-size: 500px;

width: min-content; width: max-content;

width: 45ch;

width: 100%; width: 90vw; width: 80cqi;

width: min(34ch, 100%);

We Can’t

But The Browser Can

width: auto;

Expressive Like Language

Subtext… padding: 16px != padding: 1em

Design For Change

In CSS… flex != grid

Express… More Meaning Fewer Constraints

To Avoid Harm… Express Clear Intent

to Avoid Harm Design For Change

to Avoid Harm Design Systems

To Avoid Harm… Use a Light Touch

First Do No Harm

`@media` `min-width`

`@media` `prefers-reduced-motion`

`@media` `hover`

`@supports` `container-type: inline-size`

`width``: 500px;`

`text-wrap:` `pretty``;`

`width:` `500px``;`

`inline-size:` `500px``;`

`width:` `min-content``;`
`width:` `max-content``;`

`width:` `45ch``;`

`width:` `100%``;`
`width:` `90vw``;`
`width:` `80cqi``;`

`width:` `min(34ch, 100%)``;`

`width:` `auto``;`

Subtext… `padding: 16px` != `padding: 1em`

In CSS… `flex` != `grid`

Express… More Meaning
Fewer Constraints