slides.oddbird.net/rad/shopify/

CSS is Rad

@ Shopify UX Summer Series

1989… The WorldWideWeb Project

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

A Radical Shift in Power

From authors to users

Gutenberg Press

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

– John Allsopp, 2000

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

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

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

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

<CENTER>This text is centered</CENTER>

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

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

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%
           User            Author
Font   o-----x--------------o 64%
Color  o-x------------------o 90%
Margin o-------------x------o 37%
Volume o---------x----------o 50%

Relative Units

h1 { font-size: 1.5em; }

Always Show Your Work

– Math Teachers & CSS

Selector Specificity

font.family = times
h1.font.family = helvetica
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

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/

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

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

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

This Site

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

This Site

  • Responsive Font Sizes
  • Grid Layout
  • Custom Properties

This Site

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

Nova Website

  • Wide-Gamut Colors
  • Skew & Reverse-Skew (no fallback)
/* 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