slides.oddbird.net/rad/smashing20/

CSS is Rad

@ SmashingConf Live
7 year old Miriam with her hands on her knees

1989 The Artist (it me)

Not interested in tech at all

A young man collapsed on the ground,
clasping his sister's hand
Headshot of Anne Bogart

Anne Bogart

Theater Viewpoints*

…in which there is room for the audience to move around, imagine, and make associations.

– Anne Bogart

It is required that HTML be a common language between all platforms

WWW Project

…This implies no device-specific markup, or anything which requires control over fonts or colors.

WWW Project

Gutenberg Press

Everything is Variable

Sizes, Interfaces, Preferences, Content, Features, &c…

Compatible Forward & Backward & Sideways

WWW parsers should ignore tags which they do not understand, and ignore attributes which they do not understand of tags which they do understand.

WWW Project

There are too many variables to consider.

– Keith J Grant

Websites don’t need to cannot possibly look the same in every browser.

– Me, right here right now

Browser differences Are a Feature, Not a Bug

The fact we can control a paper page is really a limitation of that medium.

– John Allsopp, 2000

But… Fonts & Colors are Great

For both authors & users

HTML totally eliminates any visual creativity that a document’s designer might have.

– Roy Smith, 1993

The web would have become a giant fax machine where pictures of text would be passed along.

– Håkon Lie

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

Note that properties are inherited down the tree, unless overridden… [This] helps to keep the description short, as lots of information can be derived by the context in the tree structure.

– Pei-Yuan Wei

Request for Comments, STYLESHEETS

Robert Raisch, June 1993

an easily parsable format

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

Font Family = Times

fo(fa=ti,sp=pr,si=14,we=me …)

This is not meant as a font name, per se. Rather it is a suggestion of a particular style of character representation.

– Robert Raisch, 1993

Font Size = 14

fo(fa=ti,sp=pr,si=14,we=me …)

A [“general”] UNIT takes on different interpretation depending on the context.

Styles are suggestions or hints about behavior, not rules…

– Robert Raisch, 1993

A set of HINTS or SUGGESTIONS to the renderer which might be used…

– Robert Raisch, 1993

[Allow] browsers to make ‘appropriate’ decisions… aligned with the intent of the original author.

– Robert Raisch, 1993

Netscape browser
<CENTER>This text is centered</CENTER>

<MULTICOL COLS="3" GUTTER="25">
<P><FONT SIZE="4" COLOR="RED"></FONT></P>
</MULTICOL>
  <P><FONT SIZE="4" COLOR="RED"></FONT></P>
<P><FONT SIZE="4" COLOR="RED"></FONT></P>
<P><FONT SIZE="4" COLOR="RED"></FONT></P>
<P><FONT SIZE="4" COLOR="RED"></FONT></P>
<P><FONT SIZE="4" COLOR="RED"></FONT></P>

Provide hints that the browser may or may not use.

– Håkon Lie

This proposal tries to soften the tension between the author and the reader.

– Håkon Lie

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 🌊 Cascade

A list of stylesheets

The user/browser specifies initial preferences and hands the remaining influence over to the document.

– Håkon Lie

If conflicts arise the user should have the last word, but one should also allow the author to attach style hints.

– Håkon Lie

Weighted Influence

h1.font.size = 16pt 60%     [user]
h1.font.size = 24pt 100% [author]
= ???

Weighted Influence

h1.font.size      = 16pt    60%
h1.font.size = 24pt 40% (100%)
(16*60+24*40)/100 = 19.2pt
h1 { font-size: 16pt; }             [0%]
h1
{ font-size: 24pt !important; } [100%]

Weighted Style Sheets

http://NYT.com/style 30%
http://LeMonde.com/style 70%
           User            Author
Font   o-----x--------------o 64%
Color  o-x------------------o 90%
Margin o-------------x------o 37%
Volume o---------x----------o 50%

Cascade 🗺 Origins

  1. 🖥 User Agent (Browser)
  2. 👥 User
  3. 🎨 Author

🖥 User Agent Defaults

A readable baseline for HTML

resource://gre-resources/

(on Firefox)

revert » Browser/User
initial » Specification

👥 User Styles

Desired preferences

Stacked Origins

  1. 🎨 Author
  2. 👥 User
  3. 🖥 User Agent

If conflicts arise the user should have the last word, but one should also allow the author to attach style hints.

– Håkon Lie

  1. ❗🖥 User Agent Important
  2. ❗👥 User Important
  3. ❗🎨 Author Important
  4. 🎨 Author Styles
  5. 👥 User Preferences
  6. 🖥 User Agent Defaults
  1. 🎠 Transitions
  2. ❗🖥 User Agent Important
  3. ❗👥 User Important
  4. ❗🎨 Author Important
  5. 🏇🏽 Animations
  6. 🎨 Author Styles
  7. 👥 User Preferences
  8. 🖥 User Agent Defaults
speech.*.weight = 35db
speech.em.weight = 40db
AGE > 3d 
  ? background.color = pale_yellow 
  : background.color = white

Relative Units

h1 { font-size: 1.5em; }

WWW parsers should ignore tags which they do not understand, and ignore attributes which they do not understand of tags which they do understand.

WWW Project

Ignored Selectors

:is(html) {
background: rebeccapurple;
}

Ignored Decalarations

body {
/* Browser default `display: block` */
display: flex;
display: grid;
}

You can use it and not use it at the same time, because it works and it doesn’t work at the same time. It’s Quantum CSS! It’s Magic!

– Jen Simmons, Intro to Resilient CSS

Font Stacks

font-family: Consolas, Menlo, 'Courier New', monospace;

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

Preference Queries

  • prefers-color-scheme
  • prefers-contrast
  • prefers-reduced-motion
  • prefers-reduced-transparency

Interface Queries

Like hover & pointer media

/* touch screens */
@media (hover: none) and (pointer: coarse) { }

/* stylus-based screens */
@media (hover: none) and (pointer: fine) { }

/* gesture-based screens (Wii controller, Kinect) */
@media (hover: hover) and (pointer: coarse) { }

/* mouse & touch pad */
@media (hover: hover) and (pointer: fine) { }

Graphic design of unknown content on an infinite and unknown canvas, across operating systems, interfaces, & languages

– Me, on twitter…

We can write A Script & Stage Directions

It takes craft to set up the circumstances that are simple and yet contain the ambiguities and the incongruity of human experience.

– Anne Bogart

CSS is unlike anything else… designed for the realities of a flexible, multilingual, multi-device web.

– Rachel Andrew

More Resources:

OddBird Consulting

Custom Apps, Design Systems, Training, & Refactors