In And Out Of Style

Claude Shannon

information theory

The Mathematical Theory of Communication —1948

n Σ H(X)= i=1 P(x i )logP(x i)

entropy

bit

context

?

!

inertia

Grace Hopper

path dependence

standards

standards agreement

World Wide agreement Web

World Wide Web

World Wide Web HTML URLs HTTP

Tim Berners-Lee

worldwideweb30.com

<ol> <p> <dt> <h3> <body> <h1> <dl> <li> <title> <dd> <h2> <ul>

<ol> <body> <h1> <dl> <p> <dt> sgml <dd> <li> <h3> <title> <h2> <ul>

sgml html

gml

g m l

goldfarb m osher laurie

html

styling

12 Normal <P> 0 Helvetica 12.0 1 90 90 14.0 3.0 0 0 14 0 Address <P> 0 Helvetica-Oblique 12.0 1 90 90 14.0 3.0 1 0 14 0 Heading1 <H1> 0 Helvetica-Bold 18.0 1 0 0 18.0 3.0 2 0 36 0 Heading2 <H2> 0 Helvetica-Bold 14.0 1 0 0 14.0 3.0 0 14 14 0 Heading3 <H3> 0 Helvetica-Oblique 14.0 1 10 10 14.0 3.0 0 14 14 0 Heading4 <H4> 0 Helvetica-Bold 12.0 1 20 20 14.0 3.0 0 14 14 0 Heading5 <H5> 0 Helvetica-Bold-Oblique 12.0 30 30 14.0 3.0 0 14 14 0 Heading6 <H6> 0 Helvetica-Bold 12.0 1 40 40 14.0 3.0 0 14 14 0 List <LI> 0 Helvetica 12.0 100 130 14 3 0 0 130 0 300 0 14 Glossary <DL> 0 Helvetica 12.0 20 200 14 3 0 0 14 0 200 0 300 0 400 1 1 2 1 3 Example <XMP> 0 Ohlfs 10.0 1 0 0 14 3 0 0 0 9 0 48 0 96 0 144 0 192 0 240 0 288 0 336 0 384 0 432 Listing <LISTING> 0 Ohlfs 9.0 1 0 0 14 3 0 0 0 11 0 43.2 0 86.4 0 129.6 0 172.8 0 216 0 259.2 0 302.4 0 345.6 0 388.8 0 432 0 475.2

<multicol> <b> <i> <small> <big> <font> border bgcolor size color <center>

separation of concerns

proposals

Rob Raisch

@BODY fo(fa=he,si=18) @P br(lo=af,ob=it) ve(af=1) @B fo(we=bo) @I fo(sl=it)

Pei Wei

(HEAD,BODY fontSize=normal BGColor=white FGColor=black (H1 fontSize=largest BGColor=red FGColor=white) (H2 fontSize=large) (P) (A FGColor=red) (CMD,KBD,SCREEN,LISTING,EXAMPLE fontFamily=fixed) (BOLD,EMPH,STRONG fontWeight=bold) (I fontSlant=italic) (ADDRESS (P fontSlant=italic)) (OL (LI numStyle=roman (LI numStyle=number (LI numStyle=alpha) ) ) ) (FOOTNOTE fontSize=small (P) ) )

Håkon Wium Lie

h1.font.size = 24pt 100% h2.font.size = 20pt 40%

influence

read/write web

user stylesheets

@prefers-…

font.size = 12pt h1.font.size = font.size * 3 h2.font.size = font.size * 2.5 h3.font.size = font.size * 2

Bert Bos

*H1.size: 2 *H1.bold: true *H1.justify: center *H1.rulebefore: 1.0 *H1.ruleafter: 1.0 *H1.prebreak: 2.0 *H1.postbreak: 1.0 *H1.noindent: true

design principles

principles.adactio.com design principles

Maintainability Modularity Minimum redundancy Accessibility Device-independency Internationality Extensibility Learnability Readability Efficiency Binary or text format Implementability Simplicity Longevity Backwards compatibility Interoperability Repurposing of content Timeliness Use what is there Design by committee Expertise Brevity Stability Robustness design principles

Maintainability Modularity Minimum redundancy Accessibility Device-independency Internationality Extensibility Learnability Readability Efficiency Binary or text format Implementability Simplicity Longevity Backwards compatibility Interoperability Repurposing of content Timeliness Use what is there Design by committee Expertise Brevity Stability Robustness priorities

Bert Bos Håkon Wium Lie

Bert Bos CSS

selector { property: value; }

hacks

layout

flexbox grid

typography

@font-face

graphic design

border-radius linear-gradient

clip-path linear-gradient ::after

material honesty

accent-color

tools

sass

.sgm .htm

.css .scss

.sass .scss

.sass .scss

.sass button color: red &:hover color: blue .scss button { color: red; &:hover { color: blue; } }

custom properties calc() nesting

jQuery

DOM jQuery

DOM document. getElementsByTagName(‘p’) document. getElementById(‘foo’) jQuery $(‘p’) $(‘#foo’)

DOM jQuery document. querySelectorAll(‘p’) $(‘p’) document. querySelector(‘#foo’) $(‘#foo’)

sass jQuery Flash

OOCSS BEM SMACSS

OOCSS methodologies BEM SMACSS

OOCSS agreements BEM SMACSS

@layer @scope

what’s still missing?

button

button <button> + CSS !

<div> + CSS + JavaScript + ARIA

dropdown

dropdown <select> + CSS “

<div> + CSS + JavaScript + ARIA

date picker

date picker <input type=”date”> <div> + CSS + CSS # + JavaScript + ARIA

<input type=”date”> <div> + CSS <select> + JavaScript <button> + ARIA

open-ui.org

web browsers

frameworks

the future

thank you