Upgrade to Pro — share decks privately, control downloads, hide ads and more …

In And Out Of Style

Jeremy Keith
June 22, 2022
0
5

In And Out Of Style

A presentation from An Event Apart Spring Summit held online in April 2022 and the opening presentation at CSS Day held in Amsterdam in June 2022.

https://adactio.com/articles/19210

Jeremy Keith

June 22, 2022
Tweet

More Decks by Jeremy Keith

See All by Jeremy Keith
Of Time And The Web
adactio
0
30
“Web3” and “AI”
adactio
0
19
The State Of The Web
adactio
0
19
Sci-fi And Me
adactio
0
14
Design Principles For The Web
adactio
0
18
Building
adactio
0
13
The Layers Of The Web
adactio
0
240
Taking Back The Web
adactio
1
590
Evaluating Technology
adactio
4
170

Featured

See All Featured
Building a Scalable Design System with Sketch
lauravandoore
456
32k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
Building Applications with DynamoDB
mza
88
5.6k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Ruby is Unlike a Banana
tanoku
96
10k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Designing the Hi-DPI Web
ddemaree
276
33k
Clear Off the Table
cherdarchuk
84
310k
Facilitating Awesome Meetings
lara
42
5.6k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
Into the Great Unknown - MozCon
thekraken
10
1k
Become a Pro
speakerdeck
PRO
11
4.5k

Transcript

  1. In And Out Of Style

  2. None
  3. None

  4. Claude Shannon

  5. None

  6. information theory

  7. —1948 The Mathematical Theory of Communication

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

  9. entropy

  10. bit

  11. context

  12. None

  13. ?

  14. !

  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None

  22. inertia

  23. None

  24. Grace Hopper

  25. None

  26. path dependence

  27. None

  28. standards

  29. agreement standards

  30. World Wide Web agreement

  31. World Wide Web

  32. World Wide Web HTML URLs HTTP

  33. None

  34. Tim Berners-Lee

  35. worldwideweb30.com

  36. None
  37. None

  38. <body> <title> <p> <h1> <h2> <h3> <ol> <ul> <li> <dl>

    <dd> <dt>

  39. <body> <title> <p> <h1> <h2> <h3> <ol> <ul> <li> <dl>

    <dd> <dt> sgml

  40. sgml html

  41. gml

  42. g m l

  43. g m l oldfarb osher aurie

  44. html

  45. styling

  46. None

  47. 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 1 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 1 100 130 14 3 0 0 14 2 0 130 0 300 Glossary <DL> 0 Helvetica 12.0 1 20 200 14 3 0 0 14 3 0 200 0 300 0 400 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

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

    border

  49. separation of concerns

  50. proposals

  51. Rob Raisch

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

  53. Pei Wei

  54. (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) ) )

  55. Håkon Wium Lie

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

  57. influence

  58. read/write web

  59. user stylesheets

  60. @prefers-...

  61. font.size = 12pt h1.font.size = font.size * 3 h2.font.size =

    font.size * 2.5 h3.font.size = font.size * 2

  62. Bert Bos

  63. *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

  64. design principles

  65. principles.adactio.com design principles

  66. Maintainability Modularity Minimum redundancy Accessibility Device-independency Internationality Extensibility Learnability Readability

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

  67. Maintainability Modularity Minimum redundancy Accessibility Device-independency Internationality Extensibility Learnability Readability

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

  68. Håkon Wium Lie Bert Bos

  69. Bert Bos CSS

  70. selector { property: value; }

  71. hacks

  72. layout

  73. flexbox grid

  74. typography

  75. None

  76. @font-face

  77. graphic design

  78. None

  79. border-radius linear-gradient

  80. None
  81. None

  82. clip-path linear-gradient ::after

  83. None
  84. None

  85. material honesty

  86. None

  87. accent-color

  88. tools

  89. sass

  90. .sgm .htm

  91. .scss .css

  92. .scss .sass

  93. .scss .sass

  94. .scss .sass button color: red &:hover color: blue button {

    color: red; &:hover { color: blue; } }

  95. custom properties calc() nesting

  96. jQuery

  97. jQuery DOM

  98. jQuery DOM document. getElementsByTagName('p') document. getElementById('foo') $('p') $('#foo')

  99. jQuery DOM document. querySelectorAll('p') document. querySelector('#foo') $('p') $('#foo')

  100. sass jQuery Flash

  101. OOCSS BEM SMACSS

  102. OOCSS BEM SMACSS methodologies

  103. OOCSS BEM SMACSS agreements

  104. None

  105. @layer @scope

  106. what’s still missing?

  107. button

  108. <button> + CSS ! <div> + CSS + JavaScript +

    ARIA button

  109. dropdown

  110. <select> + CSS " dropdown <div> + CSS + JavaScript

    + ARIA

  111. date picker

  112. <input type="date"> + CSS # date picker <div> + CSS

    + JavaScript + ARIA

  113. <input type="date"> <select> <button> <div> + CSS + JavaScript +

    ARIA

  114. open-ui.org

  115. web browsers

  116. frameworks

  117. the future

  118. thank you