Hints & Suggestions

slides.oddbird.net/hints/camosun/

Miriam Suzanne @ Camosun College

November 18, 2024

CHSS

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

Håkon Lie, 1994
email, still archived online

not the only proposal for styles on the web
not the first

Solved a Problem

solves a major problem for the new platform

Technology Is Political

not technical, but philosophical
political, like all decisions
designing a platform or interface
our work is driven by choices
that have political consequences

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

This becomes the mission statement
Of the world wide web consortium
(Established several years later)

A zillion different devices of all sizes

‘Everything’ is a lot of things
Not just this range of mobile devices

includes devices without screen

or screen readers
which render then read a screen
(this also shows a braille keyboard)

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, info.cern.ch)
Includes this technical requirement…

See the Pen Resilient HTML by @miriamsuzanne on CodePen.

browsers should ignore code

[DEMO]

individual attributes
entire HTML tags

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

Protect the Content

across devices, and over time

whatever else happens
browsers should protect the content
the code is optional
the content is essential

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

– WWW Project, HTML constraints

A problem for design specifically
In order for HTML to be a common language…

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

– WWW Project, HTML constraints

Sir Tim at a computer showing a badly photoshopped image of the previous slide

Sir Tim wrote that
Right after he invented the web
He immediately declared that…

Web Design Will Never Happen

Viola WWW browser demonstrating early stylesheets

The problem isn’t styling documents
Early browsers all had built-in stylesheets,

Even the text-only browser
(headings, paragraphs, etc)
Styles from the browser
Apply the same to every page
All websites look the same

PostScript, 1982 Page Description Language

PostScript almost a decade old
Gives authors complete control
Describe the page in detail
then package up the results

Like a print designer
In control of every detail…
We set the page size (static, forever)
down to the inks used, and the paper to print on

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

It just sits there
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…

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

And often unpredictable content
Changing all the time
All of these variables, because…

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 on the web, 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)
We’re also collaborating with…

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

aliens 👽
Maybe, who knows?
We should help them out

ET and the kids flying their bicycles across the sunset

They’re probably just trying to get home.

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

– me

So we’re trying to do…
(slide)
It’s absurd

Web Design Seems Impossible

Under those constraints,
design seemed 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
put everything in an image, and it never changes
Just like print design!

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

or it doesn’t show up at all
and we lose everything that makes HTML special
Can’t protect structured 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
(slide)

And so we get a rush of proposals
around 1993 and 1994
trying to save the web from images!

Closeup of the Style history page with one phrase in focus, HTML To The Max

It’s time to take HTML to the max!

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

Pei Wei’s Viola browser
First to allow page styles
A year before CSS was proposed
Selectors, nesting, property-value pairs, even inheritance

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

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

Several months before Viola
You can see the default selector,
Set fonts in the fo function
Family=times, spacing is proportional, size 14,
and then ‘we’ is ‘me’, which…

I Am the Walrus Lyrics, I am he as you are he as you are me And we are all together, Genius annotation - John Lennon is attempting to set the default font weight to medium using Robert Raisch's stylesheet proposal, while also suggesting that we are all one. The 'we' property describes the general weight of a character representation, Lennon told Playboy in 1980.

I don’t know,
Sounds like a Beatles song?
John Lennon had a lot to say about web typography

[Times] is not meant as a font name, per se. Rather it is a suggestion of a particular style of character representation.

– Robert Raisch, Request for comments: STYLESHEETS

Robert is clear: these styles are suggestions!
Even the times font-family
not ‘times’ specifically, something like times,
a serif font!
And he repeats this phrasing…

Styles are suggestions or hints about behavior, not rules…

– Robert Raisch, Request for comments: STYLESHEETS

Over and over,
We’re not writing rules,
but suggestions or hints about behavior.

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

– Robert Raisch, Request for comments: STYLESHEETS

Sometimes all-caps
hints and suggestions which might not be used.
And the other proposals pick this up…

Specified attributes are taken as “hints” that will degrade in a controlled way depending on the level of support… in the operating environment.

– Jon Bosak, Proposal for a language optimized for WWW delivery

Jon Bosak’s
Hints that will degrade in a controlled way
Or, with CHSS…

…Allow the author to attach style hints.

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

We can allow the author to attach style hints

Provide hints that the browser may or may not use.

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

Hints that the browser may or may not use

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

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

Authors should 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 that they don’t understand
We don’t get a blank page with an error message,
We get the content with default styles.
Always protect the content!

Content should be viewable and accessible by default.

– W3C, Platform Design Principles

This becomes another design principle of the w3c
content should be viewable and accessible by default
Which is why…

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

Default overflow is visible
if we try to shove large text in a small box
The browser will bail us out
Not because it’s the best-looking solution
but because the web is unpredictable
and browsers prioritize content over style
That’s a good thing!
What’s the alternative?

InDesign doesn’t even worry about accidental overflow
The whole word just disappears!
But that’s fine, because we can fix it
before we hit print,
and it will stay fixed forever

Unchanging
Unaware of context
Unable to adapt
By giving up some deign control

We allow the web to carry our designs
Farther than we could ever go alone
Because we’re not alone,

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

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

While CHSS wasn’t the first stylesheet proposal,
It didn’t invent selectors, or properties, or even inheritance
It was the first to suggest an equal collaboration
Designed to soften the tension
Between the author and the reader

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.

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

Authors want creativity and branding,
a distinct look and feel,
make the document visually interesting.
But users will have preferences,
styles that they like better (or even require)
like large text or dark mode,

Give People Agency

control over their own experience

sites can respect those preferences!
Give our users agency
Over their own browsing experience
A political value that I think is essential

The proposed scheme is balanced in the sense that it provides author and reader with the same notation for specifying style.

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

We do that by allowing everyone to contribute styles
Written in the same language

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

Each of us providing
our style hints as declarations,
a property and a value

/* a selector, with attached declarations… */
/* a 'style rule' (or 'rule set') */
p {
  background: white;
  color: mediumVioletRed;
}

We can group those together,
and add selectors
forming rule-sets…

<!-- a 'style sheet' -->
<link rel="stylesheet" href="styles.css">

Which can be attached to an HTML document,

/* another 'style sheet' */
@import url('styles.css');

Or chain together,
Resulting in…

An ordered list (cascade) of style sheets.

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

An ordered list (or ‘cascade’) of stylesheets
all applied to the same web site,
But not coordinated…

Remember, anyone can add styles to the page
So, of course, this leads to conflicts!…

/* <button type="submit" id="send" class="action"> */
button          { background: gray; }
.action         { background: darkBlue; }
[type=“submit”] { background: darkGreen;
                  background: var(--submit, black); }
#send           { background: maroon; }

We have any number of declarations
coming from different sources
likely applying different values
to the same properties, on the same elements!

For Browsers… Every CSS Property
On Every HTML Element,
Must Have a Single Value

Browsers need to resolve conflicts.
Every CSS property
on every HTML element
must have a single value

Every `<button>` Needs One `Background-Color`
& One Text `Color`
& One `Padding-Left`
& One `Margin-Inline-End`
& …

Every button needs
one text color,
one padding-left,
one margin-inline-end, etc.
To get there, we need…

Tina Turner as Aunty Entity in the Mad Max Thunderdome, with the law 'Two styles enter, one style leaves' in bold text

Some way to thunder-dome our declarations
And choose a single winner
Two styles enter, one style leaves

/* button { background: gray; } */
/* .action { background: darkBlue; } */
[type=“submit”] {
  /* background: darkGreen; */
  /* background: var(--submit, black); */
}
#send { background: maroon; }

The simplest way to choose a winner,
We can let each declaration override the previous one
Until there’s only one left
Last takes precedence
We’ll start there, but…

Someone has to go first,
And who gets to go last?
We have to put everyone into some kind of order

First… 🖥 User Agent Styles

Sure, ok.
We can start with the styles we already have
At the bottom of our cascade,
first and least important
The browser, or user agent
providing legible defaults
That’s essential!

You can’t render text without styling it somehow!

This email archive doesn’t add any document styles,
But the browser is providing some!
Let’s see what happens when we remove those.
[demo]
* { all: initial; }

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

Here we’re seeing initial values…
The specification defines
An initial value for each property
Display inline, background transparent, and so on

body { display: initial; } /* inline */
section { display: initial; } /* inline */
div { display: initial; } /* inline */
span { display: initial; } /* inline */
head { display: initial; } /* inline */
title { display: initial; } /* inline */

The initial value for display
is always inline!
Doesn’t matter what element we’re talking about
Body, section, div, span…

Proposal email with dev tools open and * { display: inline; } applied, inspecting the title element in the document head, which is now visible on the page before the h1 that starts the email.

Even something hidden like the head or title element
Would get display:inline by default
If the browser didn’t come along and set…

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

display:block and display:none
everywhere we expect it

body { margin: 8px; }
a:link {
  color: blue;
  text-decoration: underline; }
h1, h2, h3, h4 /* etc */ {
  font-weight: bold;
  font-size: something big I dunno; }

They also add things like
8px margin on the body
Link colors and underlines
Heading styles, large bold text
Space around paragraphs and lists, etc

Firefox/Gecko
resource://gre-resources/
Safari/WebKit
Chrome/Blink

These are the user agent styles
And they apply to every site on the web
With only minor differences between browsers

Second… 👥 User Styles

After browser defaults
Users apply their preferences

[CSS] provides author and reader with the same notation…

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

Originally using CSS syntax as well

Safari settings panel, advanced tab, with a red scribble highlighting a style sheet option, with none selected by default.

Safari still supports this option
In the settings panel, upload a stylesheet

Language and appearance preferences in Firefox include light/dark mode, colors, fonts, and zoom level

Other browsers have mostly switched
To limited preference settings in a graphic interface

Safari/WebKit:
Settings / Advanced / Style sheet…
Firefox/Gecko:
about:preferences
Chrome/Blink:
chrome://settings/appearance

The details are different
But the results are the same
Users get to set some default preferences
That are applied to every site they visit

And to be clear,
When we talk about ‘users’ or ‘readers’
on the web…

We All Use The Web

More than we author it

We’re talking about all of us
We all use the web
And I think it’s safe to say
We spend more time using the web
Than we spend building it

We can all Have Preferences

And we’re all allowed to have preferences!
Not just light mode or dark mode,
But fonts, font sizes, all of it.

Go ahead… Make The Web Your Own

I used to worry as a dev - “but I’ll see something different than the user” - That’s the point! People might see something different! - Having a unique setting is a great way to remember that

Finally… 🎨 Author Styles

from the author origin

Finally, ‘document’ or ‘author’ styles
(also us, making stuff for the web)
We come last

🗺 Cascade Origins

🖥 User Agent Defaults (first, lowest priority)
👥 User Preferences
🎨 Author Styles (last, too powerful)

And so we get the highest priority,
Last takes precedence, remember!
These are called the ‘cascade origins’
We override the user preferences
Which override the browser defaults

girl reaching into a white bucket, with paint all over her hands and the floor around her

Which is a lot of power for us to have!
Sometimes we’re not even paying attention
Or we throw a fit…

Darth Vader
choking a rebel soldier
as storm troopers watch

And stomp around force-choking everyone in our way
But Håkon was clear…

If conflicts arise the user should have the last word

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

When it really matters,
The user should have the last word

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

– W3C Web Platform Design Principles

This has also become a W3C principle
Always put user needs above all

color: blue 64%;

So the original proposal included
A percentage next to each declaration
Expressing how important that style is

/* user styles */
html { background: blue 64%; }

/* site styles */
html { background: red 100%; } /* only 36% */

And if the user requests 64% control,
It doesn’t matter how much we want,
This isn’t winner-takes-all,
It’s first-come-first-served
And there’s only 36% remaining influence for us…

`color-mix(in srgb, blue 64%, red)`

And the result is a weighted average of our styles!
I wanted blue, but you asked for red,
So here’s the purple no one asked for!
People immediately pointed out how this could go wrong
And how hard it would be to average other values like fonts

A comic-sans papyrus mashup font specimen with upper/lower latin characters and punctuation, on textured parchment with a drawing of Anubis laying face-up on snoopy's dog house, and a small tagline claiming the most beutifulest font ever created. ever. full special character set included (not shown here)

Although I wish we had tried harder on that one

:      User            Author
Font   o-----x--------------o 64%
Color  o-x------------------o 90%
Margin o-------------x------o 37%
Volume o---------x----------o 50%

I honestly love this final diagram that Håkon provides
ASCII art of a graphic interface with range sliders
So users can fine-tune their design
Live-mixing the relative weights of every declaration

html { background: blue; }            /* 0%   */
html { background: red !important; } /* 100% */

It was simplified into a binary option
0% by default, or 100% with the important flag…

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

Important styles generate three new origins!
They always win over normal styles,
But now we go in reverse order –
Authors first, but then user preferences
And the browser plays cleanup

It’s a mirror universe where
All our evil twins have goatees

Searching firefox user agent styles for important with 26 results, three visible setting area display none and fullscreen iframes border none, parring unset

Yes, browsers defaults are often important

In the font preferences dialogue, a default-checked option: Allow pages to choose their own fonts, instead of your selections above

And users can set important styles
Using CSS in Safari
Or a checkbox in the Firefox settings

The purpose of… ❗Importance

Importance doesn’t change specificity
It changes the origins
And the priority of origins
The purpose…

Authors 👎🏼 Specificity Wars

With our own colleagues and libraries

Is not for fighting each other
In big teams who can’t agree
Or angrily trying to override
Styles we wrote last year

Browsers/Users 👍🏼 Protect Styles

From higher origins breaking important things

The purpose is for users and browsers
To protect style from future origins
Someone that might come along later…

That’s us
Importance exists to
protect our users from what we might do!

Often Isolated

…
…
🎨 Author Styles
❗🎨 Author Important
❗…
❗…

But the way our origins (normal and important)
Are isolated together…

Mechanical astrolabe with Earth at the center, and concentric rings for other planets/stars

We start to think
We’re the center of the universe

Clockwork orrery, with planets circling the sun, and the earth off to one side

When we’re really just one pale blue dot
In the solar system of the cascade
Which rotates around user needs!
Fair, it’s what we deal with every day
But we need to have perspective

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

– Yoda (basically)

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

– me

So now we’re not just dealing with
some extreme unknowns

Infinite diversity in infinite combinations, Spock wearing a medallion triangle on circle and giving the Vulcan salute

Infinite diversity in infinite combinations

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

But the browser is allowed to ignore us
And the user can override anything we say
There are two many variables,
and everything we say is a suggestion…

The point of CSS is to make it so you don’t have to worry about them all.

– Keith J Grant

But everything we say is also a hint
Telling the browser something about our intent

CSS is A Declarative Language

CSS is a declarative language

`width``: 500px;`

Some declarations seem simple,
the width of a box

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

While some are more abstract,
wrapping text so it looks ‘pretty’
(whatever that means)

`width:` `500px``;`

But even ‘simple’ declarations contain subtext
What do we mean by a pixel?
Should this box get smaller on a screen with higher resolution?
How should it 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

Are we setting the width of the content box?
(so padding and border are added to our width)

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 entire box,
so padding and border are subtracted to get the content size?

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

Should it be based on context
a parent element, viewport, or container

`flex:` `1`

Or flexible in relation to sibling elements
And remaining space

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

Or should we look at the contents
To get the min or max size from there

Maybe it’s not the width we care about at all,

that’s just the direction text flows.
Are we trying to set the length of a line of text?

`inline-size:` `45em``;`

Should it be based on the size of the font?

`width:` `min(45em, 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?

`width:` `auto``;`

We don’t have all the information, but the browser does
So the most useful tools in CSS
express this kind of abstract behavior
let the browser work out details

A cylinder casts a shadow across a chess board, creating an optical illusion - a dark square outside the shadow (A) and a light square inside (B) are actually the same shade of gray

Like all design choices
Our styles are contextual
Properties often behave differently
or not at all, depending on other properties

CSS properties Are Never Pure Functions

As a result, CSS features tend to be intertwined
Behavior is never isolated,
And everything has side-effects
We’re not doing functional programming,

Expressive Like Poetry

What we do is more expressive, like poetry
Not describing the page in step-by-step detail
but communicating high-level ideas through subtext
Not just the result we want
But the intent behind each choice

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

Units are great at this
(it’s why CSS has so many of them)
On the surface 1em is sometimes 16px
But they carry different implications
And adapt differently in context

In CSS… `flex` != `grid`

Similar with layout methods
We can sometimes get the same result
using either flexbox or grid
But they move differently at the edges,

And our job, the entire reason we’re here
Is not to make things look good on one device,
Or in a single browser, but…

Design For Change

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

– John Allsopp, A Dao of Web Design

By letting go of control…

Provide hints that the browser may or may not use.

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

While expressing ourselves clearly
Providing hints and suggestions
We can express what we want
To the browser
So it can help us adapt

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

We’re not alone on this platform
and everything about CSS
is built around that political vision

Always put user needs above all.

– W3C Web Platform Design Principles

Respect the user

It takes craft to set up the circumstances that are simple and yet contain the ambiguities and the incongruity of human experience.

– Anne Bogart

This is our job as designers, design engineers
Not forcing everyone into a singular experience
But setting up the circumstances for communication
In an unpredictable world,
adapting to the incongruities of human experience