First, Do No Harm

slides.oddbird.net/rws/smashing/no-harm/

Miriam Suzanne @ Smashing Online

May 7, 2020

sass
w3c

Tell Me About You

What’s your role, & how long have you been writing CSS?

Let’s Talk About… Cascading Style Sheets

Understand the (wierd) Mental Model

1989–1990 The WorldWideWeb

Tim in front of a computer with the first web browser

The first world wide website & graphic browser

Web for all. Web on everything.

– World Wide Web Consortium, 1994

A zillion different devices of all sizes (original)

Google Home, Amazon Echo, and Apple HomePod

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

😬

The second browser, a text-only terminal

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

– Roy Smith, 1993

Style Proposals… w3.org/Style/History/

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

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

– Robert Raisch, 1993

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

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

<outspec>
  <docdesc><charlist>
    <font size="12pt" bckcol="white" fontcol="black">
  </charlist></docdesc>

  <e-i-c gi="h1">
    <font size="24pt" bckcol="red", fontcol="white"></e-i-c>
  <e-i-c gi="bold emph strong”>
    <font weight="bold"></e-i-c>
</outspec>

<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

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

The Cascade

An ordered list (cascade) of style sheets … can be referenced from the same document … and merged as they are encountered.

– 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

Provide hints that the browser may or may not use.

– Håkon Lie

Weighted Influence

h1.font.size = 16pt 60%
h1.font.size = 24pt 100%

h1.font.size      = 16pt    60%
h1.font.size      = 24pt    40% (100%)
(16*60+24*40)/100 = 19.2pt

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

Cascading Colors

(see the footer)

Weighted Style Sheets

http://NYT.com/style 30%
http://LeMonde.com/style 70%

Selector Specificity

(*.)font.family = times
h1.font.family = helvetica

The order of the two is irrelevant – the more specific statements will override the more general ones.

– Håkon Lie

Media Queries Selectors

speech.*.weight = 35db
speech.em.weight = 40db

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

– Håkon Lie

AGE > 3d
  ? background.color = pale_yellow
  : background.color = white

HTML documents should also be influenced by the relevance of each document for each individual user.

– Håkon Lie

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

Relative Units

/* h1.font.size *= 1.5 */
h1 { font-size: 1.5em; }

Presented @ WWW Conference 1995

by Håkon Lie & Bert Bos

Ended up in political discussions about the author-reader balance.

– Bert Bos

fast-forward 25 years… The Modern Web

Applications More Powerful & Complex

Web for all. Web on everything.

– World Wide Web Consortium, 1989

It’s True… “CSS is for documents”

“CSS The Entire Web
is for documents”

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

– John Allsopp, 2000

The Web is User-Centered

The Web is User-Controlled

We Write The Script & Stage Directions

But Every Performance is Unique

Do I want to create work in which everyone feels the same, or everyone feels differently? …Something in which there is room for the audience to move around, imagine, and make associations.

– Anne Bogart

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 for HINTS & SUGGESTIONS

Design for The Unknown

Sizes, Interfaces, Preferences, Content, &c…

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. Define some constraints. Let the language work out the details.

– Keith J Grant

CSS is Resilient… A Progressive Enhancement

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 Declarations

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

Browser Support is Not A Binary

CanIUse? More like MayIUse

amIright?

Font Stacks

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

Variable Stacks

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

`@Supports` `{ … }`

CSS is Declarative… Relying on Meaning & Intent

`<h1>``Main header``</h1>` \

<p>a paragraph</p> \

`16px` `!=` `1em`

Convey Different Intent

CSS is Contextual… Adapting to change

CSS is for… Design Systems

  <P><FONT SIZE="16" COLOR="RED">…</FONT></P>
  <P><FONT SIZE="16" COLOR="RED">…</FONT></P>
  <P><FONT SIZE="16" COLOR="RED">…</FONT></P>
  <P><FONT SIZE="16" COLOR="RED">…</FONT></P>

.warn {
  font-size: 16px;
  color: red;
}

CSS Saved The Web

from becoming inaccessible & platform-specific

The Difficult Bits Come From That Difficult Problem