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.
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.
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
Which is a lot of power for us to have!
Sometimes we’re not even paying attention
Or we throw a fit…
And stomp around force-choking everyone in our way
But Håkon was clear…
If conflicts arise
the user should have the last word
/* 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
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
Yes, browsers defaults are often important
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…
We start to think
We’re the center of the universe
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
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?
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?
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
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
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 sometimes16px
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.
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?
![InDesign is [+]](/img/rhqYG1iQfc-1410.avif)
