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