This proposal tries to
soften the tension between the author and the reader.
–
Håkon Lie
An ordered list (cascade) of style sheets …
can be referenced from the same document.
–
Håkon Lie
Potentially
From Different 🗺 Origins…
🖥 User Agent (Browser),
👥 User,
or
🎨 Author
Balance of Intent
The author often wants to give the documents
a distinct look and feel,
the user will set preferences to make
all documents appear more similar.
–
Håkon Lie
The user/browser specifies initial preferences
and hands the remaining influence over to the document.
–
Håkon Lie
Stacked in Layers
🎨 Author
👥 User
🖥 User Agent
Balance of Power
If conflicts arise the user should have the last word,
but one should also allow the author to attach style hints.
–
Håkon Lie
The Real Reason For
❗importance
❗🖥 User Agent Important
❗👥 User Important
❗🎨 Author Important
🎨 Author Styles
👥 User Preferences
🖥 User Agent Defaults
Balance of Support
Provide hints that the browser may or may not use.
–
Håkon Lie
Design for The Unknown
Sizes, Interfaces, Preferences, Content, &c…
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.
Define some constraints.
Let the language work out the details.
CSS is unlike anything else…
designed for the realities
of a flexible, multilingual, multi-device web.
–
Rachel Andrew, 2018
Graphic design of unknown content
on an infinite and unknown canvas,
across operating systems, interfaces, & languages…
–
me, on twitter…
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.
Define some constraints.
Let the language work out the details.
–
Keith J Grant
CSS is Resilient
WWW parsers should ignore tags which they do not understand, and ignore attributes which they do not understand of tags which they do understand.
<article-componentdata-scope='article'><h2data-scope='article'>...</h2><sub-componentdata-scope='article'data-scope='sub'><!-- internals of sub only have scope='sub' --></sub-component><footerdata-scope='article'>...</footer></article-component>