Hints & Suggestions

• A few things before we dive in:
• Can I get a show of emoji,
• or quick comments in the chat…

• Ok, I have so many more questions
• But mostly I want to hear your questions,
• And we have time for that at the end of each day
• But there’s a lot to get through first.
• Some of it will go quickly, but we can always come back
• Don’t have to memorize everything!

• Understand the mental model, what’s possible
• And I want to leave you with resources
• You can come back to on your own time
• Mostly I want to teach you how CSS works
• Not as a theoretical exercise
• It’s the only way to write maintainable CSS!

• I’m going to dive in
• Feel free to interrupt me
• I can’t see you, so you’ll have to say something
• While we’re here, let’s discuss

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

• not the only proposal for styles on the web
• not the first
• solves a major problem for the new platform

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

• Sir Tim at CERN
• first web browser
• Hypermedia WWW Browser and Editor
• 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

• from the start
• goal of the web is universal access
• not building one more closed platform
• but a common language across platforms

• Mission statement of W3C

• read the screen to you

• no screen at all

• These devices aren’t read-only
• also have different controls
• different ways to interact with content

• 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

[DEMO]

• individual attributes
• entire HTML tags

• we can still see
• first website on modern browsers

• modern website, on the first browser
• (this emulator is sadly broken)
• No css
• No images
• all the text is there

• But that creates a big problem for design specifically
• To be a common language everywhere…

• Sir Tim wrote that
• in 1990 or something

• Alright you have the rest of the day off
• Any questions?

• The problem isn’t styles
• Early browsers all had built-in stylesheets,

• Even the text-only browser
• uppercase headings, space between paragraphs, etc
• But these styles come from the browser
• And apply the same to every page on the web
• All websites look the same
• And we have no control as web page authors

• This is not the way print works
• If we’re designing a book, we don’t get defaults from our printer
• We control everything…
• page size (static, forever)
• down to the inks used, and the paper to print on

• We can click all we want

• It just sits there
• We have complete control, but…

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

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

• user needs & preferences

• device interfaces

• changing capabilities over time

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

• 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

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

• Also the people who interact with our sites
• (super cute in their handy tool belts)
• On their chosen devices
• (with varying capabilities)
• And we’re also collaborating with…

• aliens 👽
• Maybe, who knows?

• They’re probably just trying to get home.

• How are we supposed to do…
• It’s absurd

• Under those constraints,
• design is clearly impossible…

• But 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!

• or it doesn’t show up at all
• and we lose everything that makes HTML special

• The browser can’t protect structured content inside an image
• If it doesn’t load, it’s lost

• So images were a real risk
• Suddenly we have control
• But at what expense?

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

• It’s time to take HTML to the max!

• Pei Wei’s Viola browser
• Was the first to allow custom style sheets for a page
• About a year before CSS was proposed
• Parts of this should look familiar
• selectors, nesting, property-value pairs, even inheritance

• They all have inheritance…
• Design would be terrible without inheritance
• Check out the video later if you’re curious

• Robert Raisch proposed this
• ‘easily parsable format’
• a few months before Viola came out
• I assume he means parsable by machines?
• You can see the default selector there, kinda like :root
• We’re setting fonts in the fo() function
• Family=times, spacing is proportional, size 14,

• But Robert is clear that these styles are only suggestions!
• Even the times font-family
• doesn’t mean we get the ‘times’ font specifically,
• it just means we want something like times,
• a serif font!
• And he repeats this phrasing…

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

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

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

• We can allow the author to attach style hints

• Hints that the browser may or may not use

• Authors should have stylistic influence,
• without resorting to page description languages
• like postscript, the language for making PDFs
• without giving us full control
• Our styles should be resilient…

• Like HTML is resilient
• 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!

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

• The default overflow is visible
• if we get so cocky
• that we try to shove large text in a small box
• The browser will try to 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 design control
• We allow the web to carry our designs
• Farther than we could ever go alone
• Because we’re not alone,

• So CSS wasn’t the first stylesheet proposal
• It didn’t invent selectors, or properties, or even inheritance
• But it put the focus on collaboration

• Authors want to show their creativity and branding,
• with a distinct look and feel,
• make their document visually interesting.

• But users will have preferences,
• styles that they like better (or even require)
• like larger text or dark mode,
• and sites should respect those preferences!
• making websites a bit more similar for that user.
• We’re trying to balance creative design with user agency

• Despite what we’re told by massive platforms
• User agency is important!

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

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

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

• Which can be attached to an HTML document,
• Giving us…

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

The cascade exists to ensure there’s balance in the ecosystem –

We can allow authors to attach styles, by treating those styles as hints.

Like HTML, CSS fails silently, protecting the content, and ignoring unrecognized styles.

That’s how we ensure a web that works on everything.

And if conflicts arise between the author and user, then the user gets the last word.

So the web also works for everyone.

• But we’re not writing style rules
• We’re providing hints and suggestions
• In a declarative syntax

• Some declarations seem simple,
• the width of a box

• While some are more abstract,
• wrapping text so it looks ‘pretty’
• (whatever that means)
• The details are left up to the browser!

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

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

• Or the width of the entire box,
• so padding and border are subtracted to get the content size?

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

Which might change depending on our writing mode.

We can express that by using logical properties.

Or maybe the pixels represent something else we can express more clearly, like the intrinsic size of our content

• The width of characters in the current font?

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

• Or flexible in relation to sibling elements
• And remaining space

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

These are all different hints that we can provide to the browser – not just about what we want, but why we want it.

Sometimes 1em is equal to 16px but not always, because they mean different things. 1em is relative to the current font size, and (I don’t want to shock you, but) 1px is relative to the length of someone’s arm and your assumed distance from the screen.

Specs can get weird sometimes.

In CSS, the most useful declaration is the one that communicates our intent the most clearly.

Sometimes that requires a combination of units,

• Or an abstract behavior like auto-sizing,

So that the browser has as much information and flexibility as we can provide when adapting our rules to a range of different situations.

• 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

• The tools we have are expressive, like poetry
• Not describing the exact layout pixel-by-pixel
• (like we would for print)
• but communicating high-level ideas
• through algorithms and subtext
• Not just the result we want
• But the intent behind each choice

• 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

• 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 to design for change

• By letting go of control
• Over individual pixels,
• But instead…

• Express ourselves as clearly as possible
• Through hints and suggestions
• Which the browser can adapt…
• to handle new and unexpected situations

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.

Maybe the size of that box is based on the size of the browser, and the overflow is caused by a small screen.

Maybe the user increased their font size.

This is the problem that CSS is actually trying to solve – and it’s a complex problem.

We’re not just doing graphic design, we’re designing for the unknown…

• And we’re not doing it alone

• browser is allowed to ignore us

• the user always gets final say

• not us vs them
• we’re on both sides of this equation.
• spend more time using the web than building it
• We are both web users and also web authors.

• claim our power as users
• to customize our own web experiences
• insist on a web where that’s possible
• if we want that web, we have to build it for everyone else
• give our readers control

Our job is to ensure that this really is a web that can work everywhere, and a web that works for everyone.