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

First, Do No Harm

@ Smashing Online

Tell Me About You

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

Let’s Talk About… Cascading Style Sheets

1989–1990 The WorldWideWeb

Web for all. Web on everything.

– World Wide Web Consortium, 1994

Gutenberg Press

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

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

[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>
OddBird logo imposed over three children playing Magic The Gathering

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

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%

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

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

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”

Gutenberg Press

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

– John Allsopp, 2000

We Write The Script & Stage Directions

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

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

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

CSS is Contextual Adapting to change

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

CSS Saved The Web

from becoming inaccessible & platform-specific

The Difficult Bits Come From That Difficult Problem

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

WWW Project

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

– Rachel Andrew, 2018

A Design Tool For Unknown Content
On An Unknown Canvas