Let’s do this…
ok, here we go…
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
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
(at least in a graphic sense)
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
Graphic design of unknown content with unknown collaborators, on an infinite and unknowable canvas, across operating systems, interfaces, languages, and writing modes…
— me
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
(HEAD,BODY fontSize=normal
BGColor=white
FGColor=black
(H1 fontSize=largest
BGColor=red
FGColor=white)
(H2 fontSize=large)
(A FGColor=red)
(CMD,KBD,SCREEN,LISTING,EXAMPLE fontFamily=fixed)
(BOLD,EMPH,STRONG fontWeight=bold)
)
@DEFAULT fo(fa=ti,sp=pr,si=14,we=me,sl=ro,fo=in,bo=in,li=no,nu=1,fn='')
ju(st=le,hy=0,ke=0) co(nu=1,wi=80) br(lo=af,ob=it)
li(lo=in,ma=no,li=un,nu=1,be=no,af=no,hi=0)
@UL in(le=5)
@LI ma(pr=ro,be=4) in(le=10,ri=10)
fo
function[Times] is not meant as a font name, per se. Rather it is a suggestion of a particular style of character representation.
— Robert Raisch, Request for comments: STYLESHEETS
times
(serif), helvetica
(sans-serif), system
(from the OS), and typewriter
(monospace)times
font-familyStyles are suggestions or hints about behavior, not rules…
— Robert Raisch, Request for comments: STYLESHEETS
A set of HINTS or SUGGESTIONS to the renderer which might be used…
— Robert Raisch, Request for comments: STYLESHEETS
Specified attributes are taken as “hints” that will degrade in a controlled way depending on the level of support… in the operating environment.
— Jon Bosak, Proposal for a language optimized for WWW delivery
…Allow the author to attach style hints.
— Håkon Lie, Cascading HTML style sheets – a proposal
Provide hints that the browser may or may not use.
— Håkon Lie, Cascading HTML style sheets – a proposal
Provide authors and publishers with stylistic influence without resorting to page description languages.
— Håkon Lie, Cascading HTML style sheets – a proposal
Content should be viewable and accessible by default.
— W3C, Platform Design Principles
overflow
is visible
This proposal tries to soften the tension between the author and the reader.
— Håkon Lie, Cascading HTML style sheets – a proposal
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.
— Håkon Lie, Cascading HTML style sheets – a proposal
The proposed scheme is balanced in the sense that it provides author and reader with the same notation for specifying style.
— Håkon Lie, Cascading HTML style sheets – a proposal
/* a 'declaration' */
property: value;
color: blue;
/* a selector, with attached declarations… */
/* a 'style rule' (or 'rule set') */
p {
background: white;
color: mediumVioletRed;
}
<!-- a 'style sheet' -->
<link rel="stylesheet" href="styles.css">
/* another 'style sheet' */
@import url('styles.css');
An ordered list (cascade) of style sheets.
— Håkon Lie, Cascading HTML style sheets – a proposal
<button type="submit" id="send" class="action">
button { background: gray; }
.action { background: darkBlue; }
[type=“submit”] { background: darkGreen;
background: var(--submit, black); }
#send { background: maroon; }
/* button { background: gray; } */
/* .action { background: darkBlue; } */
[type=“submit”] {
/* background: darkGreen; */
/* background: var(--submit, black); */
}
#send { background: maroon; }
/* initial values */
display: inline;
background: transparent;
color: CanvasText;
font-style: normal;
flex-basis: auto;
/* etc. */
body { display: initial; } /* inline */
section { display: initial; } /* inline */
div { display: initial; } /* inline */
span { display: initial; } /* inline */
head { display: initial; } /* inline */
title { display: initial; } /* inline */
initial
value for display
inline
!head
or title
elementdisplay:inline
by defaulthtml, body, p, div, article, aside, header,
hgroup, footer, main, nav, section /* etc */ {
display: block;
}
base, basefont, datalist, head, link, meta,
script, style, template, title /* etc */ {
display: none;
}
display:block
and display:none
body { margin: 8px; }
a:link {
color: blue;
text-decoration: underline; }
h1, h2, h3, h4 /* etc */ {
font-weight: bold;
font-size: something big I dunno; }
8px
margin on the body
resource://gre-resources/
[CSS] provides author and reader with the same notation…
— Håkon Lie, Cascading HTML style sheets – a proposal
Settings / Advanced / Style sheet…
about:preferences
chrome://settings/appearance
More than we author it
from the author origin
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.
color: blue 64%;
/* user styles */
html { background: blue 64%; }
/* site styles */
html { background: red 100%; } /* only 36% */
36%
remaining influence for us…color-mix(in srgb, blue 64%, red)
: User Author
Font o-----x--------------o 64%
Color o-x------------------o 90%
Margin o-------------x------o 37%
Volume o---------x----------o 50%
html { background: blue; } /* 0% */
html { background: red !important; } /* 100% */
important
flag…!important
mirror universe!important
behaviorWith our own colleagues and libraries
From higher origins breaking important things
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
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
The point of CSS is to make it so you don’t have to worry about them all.
— Keith J Grant
width
: 500px;
text-wrap:
pretty
;
width:
500px
;
content-box
modelborder-box
modelinline-size:
500px
;
width
we care about exactly,inline-size:
45em
;
width:
min-content
;
width:
max-content
;
width:
100%
;
width:
90vw
;
width:
80cqi
;
width:
min(45em, 100%)
;
width:
auto
;
A
and B
are both #787878
16px
!= 1em
1em
is sometimes 16px
flex
!= grid
The fact we can control a paper page is really a limitation of that medium.
— John Allsopp, A Dao of Web Design
Provide hints that the browser may or may not use.
— Håkon Lie, Cascading HTML style sheets – a proposal
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
It takes craft to set up the circumstances that are simple and yet contain the ambiguities and the incongruity of human experience.
— Anne Bogart
Always put user needs above all.
Content should be viewable and accessible by default.
— W3C, Platform Design Principles