slides.oddbird.net/rad/design4drupal/

CSS is Rad

slides.oddbird.net/rad/design4drupal/

Miriam Suzanne @ Design 4 Drupal

1989 The WorldWideWeb Project

7 year old Miriam with her hands on her knees

1989 The Artist (it me)

Not interested in tech at all

Hand-made choose-your-own-adventure book called The Mystery of the Missing Art Box
Hand-made book called The Sward
A young man collapsed on the ground, clasping his sister's hand
Image search for Hello and Goodbye performance photos
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

2006 New World Arts website on the wayback machine

Eric Meyer’s CSS Edge Experiments

CSS Zen Garden

Performative Turn

Jane/Eyre Script
Two women in bed
row of urinals
upside-down urinal, signed R. Mutt

CSS is a Weird Art Project

Not just stylesheets… Browsers Perform the Web

The Web is a Weird Art Project

1989 The WorldWideWeb Project

The first world wide website & graphic browser

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

– WWW Project

Web for all. Web on everything.

– W3C Mission Statement

NeXT computer with a worn-out sticker
Old IBM desktop
The second browser, a text-only terminal

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

– WWW Project

A Radical Shift

Gutenberg Press
InDesign book-cover layout
Published book

Everything is Variable

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

Modern desktops
A zillion different devices of all sizes (original)
Lineup of smart watches
Google Home, Amazon Echo, and Apple HomePod
Braille keyboard and headphones

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

Only Browsers Have All The Context

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

Mosaic browser

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

– Håkon Lie

Style Proposals… w3.org/Style/History/

Stylesheet Language

Pei-Yuan Wei, Oct 1993

the viola browser 
(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>
Young Jonny, Carl, and Miriam playing Magic The Gathering

Cascading HTML style sheets

Håkon Lie, October 1994

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

Author and reader use same notation.

– Håkon Lie

An ordered list (cascade) of style sheets

– 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%

See the Pen NYT & Le Monde by @miriamsuzanne on CodePen.

           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

🎨 Author Styles

That’s us…

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

The Real Reason For ❗importance

  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

Media Queries 

speech.*.weight = 35db
speech.em.weight = 40db
AGE > 3d
  ? background.color = pale_yellow
  : background.color = white

RELEVANCE > 80
  ? h1.font.size *= 1.5

Relative Units

h1.font.size *= 1.5

Relative Units

h1 { font-size: 1.5em; }

Designed to Be Resilient

Designed to Fail Beautifully

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

Browser Support is Non-Binary

We Already Know How To Do This

2010… Responsive Web Design™️

Not Re-Writing For Every Viewport

A zillion different devices of all sizes (original)

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

Woman adjusting a car seat

Font Stacks

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

So how do we Code For Resilience?

  1. Trust The Flow

  2. Let it Fail
  3. Sorce-Order Fallback
  4. Support Queries
  5. The Other Media Queries

Define some constraints. Let the language work out the details.

– Keith J Grant

InDesign is [+]
  1. Trust The Flow

  2. Let it Fail

  3. Sorce-Order Fallback
  4. Support Queries
  5. The Other Media Queries
  1. Trust The Flow
  2. Let it Fail

  3. Sorce-Order Fallback

  4. Support Queries
  5. The Other Media Queries
  1. Trust The Flow
  2. Let it Fail
  3. Sorce-Order Fallback

  4. Support Queries

  5. The Other Media Queries

@supports ( … ) { … }

@Supports Selector( … )

  1. Trust The Flow
  2. Let it Fail
  3. Sorce-Order Fallback
  4. Support Queries

  5. The Other Media Queries

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) { }

We have The Tools

We have The Knowledge

To do The Impossible

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

– Me, on twitter…

Like Live Theater

We can write A Script & Stage Directions

Each performance Will Be Totally Unique

Hand-made choose-your-own-adventure book called The Mystery of the Missing Art Box

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

– Anne Bogart

Embrace Quantum Browser Support

Let the web Fail Beautifully

Care about People Over “Perfection”

Create Radical User-Centered Designs

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

– Rachel Andrew

More Resources:

Headshot of Jen Simmons

@jensimmons Jen Simmons

Resilient Videos