Hints & Suggestions

@ 11ty International Symposium
  • We’re talking about:
  • Origins of the web,
  • But especially design on the web, using
  • 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
  (H1 fontSize=largest
  (H2 fontSize=large)
  (A FGColor=red)
  (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)

@UL in(le=5)
@LI ma(pr=ro,be=4) in(le=10,ri=10)
  • solves a major problem for the new platform
  • not technical
  • but philosophical
  • political, like all decisions we make
  • designing a new platform or interface
  • first web browser
  • Hypermedia WWW Browser and Editor
  • CERN
  • NeXt machine
  • graphic interface

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

  • Nicola Pellow
  • Line Mode browser
  • text-only
  • no install
  • any device with an internet connection
  • Mission statement of W3C
  • includes devices without screen
  • or screen readers
  • read the screen (a combination)
  • If we really want this to work
  • Everywhere for everyone
  • leads to some interesting constraints
  • documented on the original website
  • (still online)
  • browsers ignore code they don’t understand


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

  • 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
  • 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
  • Not just the width of the viewport

@media prefers-reduced-motion

  • user needs & preferences
  • device interfaces

@supports container-type: inline-size

  • changing capabilities over time
  • in other words…
  • We’re not alone here
  • We’re part of an ecosystem
  • Our decisions impact other people
  • And we don’t get final say
  • We’re collaborating with browsers
  • (instructed to ignore us)
  • Also the people who interact with our sites
  • On their chosen devices
  • (with varying capabilities)
  • wearing handy little tool belts
  • aliens 👽
  • Maybe, who knows?
  • We should collaborate with them…
  • 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
  1. 🖥 User Agent Defaults
  2. 👥 User Preferences
  3. 🎨 Author Styles
  4. ❗🎨 Author Important
  5. ❗👥 User Important
  6. ❗🖥 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
  • Not for us to get in petty squabbles
  • And stomp around force-choking our colleagues
  • 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
  • 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
  • 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
  • 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
  • browsers ignore css
  • always protect the content!
  • 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

/* a 'declaration' */
property: value;
  • write our hints as declarations,
  • a property and a value
  • Declare seemingly simple concepts
  • width of a box
  • More abstract concepts
  • wrapping text so it looks ‘pretty’
  • (whatever that means)
  • 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?
  • width of the content box?
  • padding and border are added
  • Or the width of the whole box,
  • with padding and borders?
  • No good answer
  • Depends on what we’re doing
  • 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
  • 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
  • Or some combination
  • Like the minimum, of two values
  • 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 don’t have all the information
  • But the browser does have all that info
  • If we want this power,
  • We have to give up control
  • 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
  • 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
  • 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
  • My job is not
  • make it look good on my device
  • But make sure it adapts
  • to unexpected changes in context
  • 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

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
  • Help the browser understand constraints
  • so that when things change,
  • browsers can adapt our design
  • 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
  • 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