You can’t make a web that’s world-wide, by saying it works on my machine, and everyone else is an edge-case.
Web for all. Web on everything.
— W3C Mission Statement
[DEMO]
across devices, and over time
It is required that HTML be a common language between all platforms…
— WWW Project, HTML constraints
…This implies no device-specific markup, or anything which requires control over fonts or colors.
— WWW Project, HTML constraints
The fact we can control a paper page is really a limitation of that medium.
— John Allsopp, A Dao of Web Design
@media
min-width
@media
prefers-reduced-motion
@media
hover
@supports
container-type: inline-size
If conflicts arise the user should have the last word…
— Håkon Lie, Cascading HTML style sheets – a proposal
If a trade-off needs to be made, always put user needs above all.
— W3C, Platform Design Principles
HTML totally eliminates any visual creativity that a document’s designer might have.
— Roy Smith, www-talk “Re: Adobe’s PDF”
The web would have become a giant fax machine where pictures of text would be passed along.
— Håkon Lie, 2014 interview
…Allow the author to attach style hints.
— Håkon Lie, Cascading HTML style sheets – a proposal
Styles are suggestions or hints about behavior, not rules…
— Robert Raisch, Request for comments: STYLESHEETS
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
Provide authors and publishers with stylistic influence without resorting to page description languages.
— Håkon Lie, Cascading HTML style sheets – a proposal
overflow
is visible
Content should be viewable and accessible by default.
— W3C, Platform Design Principles
Graphic design of unknown content with unknown collaborators, on an infinite and unknowable canvas, across operating systems, interfaces, languages, and writing modes…
— me
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
Define some constraints. Let the language work out the details.
— Keith J Grant
/* a 'declaration' */
property: value;
width
: 500px;
text-wrap:
pretty
;
width:
500px
;
content-box
modelborder-box
modelinline-size:
500px
;
width:
min-content
;
width:
max-content
;
width:
45ch
;
width:
100%
;
width:
90vw
;
width:
80cqi
;
width:
min(34ch, 100%)
;
width:
auto
;
padding: 16px
!= padding: 1em
1em
sometimes same as 16px
flex
!= grid
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
define the edges, not the details
Web for all. Web on everything.
— W3C Mission Statement