A presentation at CSS Day in in Amsterdam, Netherlands by Jeremy Keith
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
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
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 + ARIAdropdown
dropdown <select> + CSS “
<div> + CSS + JavaScript + ARIAdate 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
It’s an exciting time for CSS! It feels like new features are being added every day. And yet, through it all, CSS has managed to remain an accessible language for anyone making websites. Is this an inevitable part of the design of CSS? Or has CSS been formed by chance? Let’s take a look at the history—and some alternative histories—of the World Wide Web to better understand where we are today. And then, let’s cast our gaze to the future!
The following resources were mentioned during the presentation or are useful additional information.
Links to resources mentioned in the talk.
for free. You
can too.