slides.oddbird.net/rad/shopify/

CSS is Rad

@ Shopify UX Summer Series

1989… The WorldWideWeb Project

The first world wide website & graphic browser
NeXT computer with a worn-out sticker

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

Old IBM desktop
The second browser, a text-only terminal

Web for all. Web on everything.

W3C Mission Statement

A Radical Shift in Power

From authors to users

Gutenberg Press
InDesign book-cover layout
Published book

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

– John Allsopp, 2000

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

Browser differences Are a Feature, Not a Bug

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

Like theater Every Hamlet Is Different

We Write A Script & Stage Directions

Every Performance is Unique

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

– Anne Bogart

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

– Anne Bogart

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/

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

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

Styles are suggestions or hints about behavior, not rules…

– Robert Raisch, 1993

Font Size = 14

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

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>

Cascading HTML style sheets

Håkon Lie, October 1994

Young Jonny, Carl, and Miriam playing Magic The Gathering

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

Cascade Origins

a balance of power between stakeholders

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 @mirisuzanne on CodePen.

           User            Author
Font   o-----x--------------o 64%
Color  o-x------------------o 90%
Margin o-------------x------o 37%
Volume o---------x----------o 50%

Cascading Colors

(oddbird.net)

Relative Units

h1.font.size *= 1.5

Relative Units

h1 { font-size: 1.5em; }

16px != 1em

Different intent!

Always Show Your Work

– Math Teachers & CSS

Selector Specificity

font.family = times
h1.font.family = helvetica
InDesign heading pattern, one selected heading has a different font

Media Queries

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

Presentation decisions based on the user’s environment; e.g. the size of the screen or the current date.

– Håkon Lie

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

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

– Håkon Lie

🖥 User Agent Styles
aka Browser Defaults

resource://gre-resources/

view
» page styles
» no style

all: revert

see also * { all: initial !important; }

👥 User Styles
aka Preferences

usually not CSS, but treated the same

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 Forimportance

  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

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;
}

Font Stacks

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

Variable Stacks

var(--one, var(--two, var(--three, fallback)))

Browser Support is Non-Binary

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

CanIUse? More like MayIUse

We Already Know How To Do This

RWD™️2010

Not Re-Writing For Every Viewport

Responsive ➡ Resilient

Not The Same For Every Browser

When necessary Make Minor Adjustments

This Site

  • List Markers
  • Text Decoration
  • Scroll Snap
  • Clip Path

This Site

  • Responsive Font Sizes
  • Grid Layout
  • Custom Properties

@supports ( … ) { … }

This Site

  • Background-Clip Text
  • Variable Fonts
  • Object Fit (for flexing images)

Nova Website

  • Wide-Gamut Colors
  • Skew & Reverse-Skew (no fallback)

Selector Queries

Preference Queries

prefers-color-scheme

prefers-contrast

prefers-reduced-motion

prefers-reduced-transparency

Media Features

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

Support More Browsers With Lower Standards

Care More By Caring Less

Headshot of Jen Simmons

@jensimmons Jen Simmons

More Resources: