Future-Proof CSS

A presentation at An Event Apart: Front-End Focus in August 2020 in by Ire Aderinokun

Slide 1

Slide 1

Future-Proof CSS Ire Aderinokun @ An Event Apart “Front-End Focus” 2020

Slide 2

Slide 2

http://info.cern.ch/hypertext/WWW/TheProject.html

Slide 3

Slide 3

http://info.cern.ch/hypertext/WWW/TheProject.html

Slide 4

Slide 4

<HTML> <HEAD></HEAD> <HEADER> <TITLE>The World Wide Web project</TITLE> <NEXTID N=”55”> </HEADER> <BODY> … </BODY> </HTML>

Slide 5

Slide 5

<HEADER> <TITLE>The World Wide Web project</TITLE> <NEXTID N=“55”> </HEADER> <BODY> … </BODY>

Slide 6

Slide 6

<HEADER> <TITLE>The World Wide Web project</TITLE> <NEXTID N=“55”> </HEADER> <BODY> … </BODY>

Slide 7

Slide 7

<nextid> is an obsolete HTML element that served to enable the NeXT web designing tool to generate automatic NAME labels for its anchors. It was generated by that web editing tool automatically and was not to be adjusted or entered by hand. It is also probably one of the least understood of all of the early HTML elements. — MDN Web Docs https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nextid

Slide 8

Slide 8

1991 1998 2020

Slide 9

Slide 9

Don’t break the web

Slide 10

Slide 10

Web technologies won’t change in a way that breaks previously compliant websites

Slide 11

Slide 11

Slide 12

Slide 12

Slide 13

Slide 13

Slide 14

Slide 14

https://developer.mozilla.org/en-US/docs/Web/HTML/Element

Slide 15

Slide 15

But websites still break 💔

Slide 16

Slide 16

Web technologies won’t change in a way that breaks previously compliant websites

Slide 17

Slide 17

Future-proof css !

Slide 18

Slide 18

What will CSS look like in the future ?

Slide 19

Slide 19

l i t a o r r V e B t p & n e l s o e s r k r e i r r P t ie o e r e D W S p n o S o r i C s t P e a l n i i t a m r i c S i e n J g p A o o S s r L S e l C lP S b d n S a i i o r r C y g a n e b V o B u y t S e n I B e S P S m A n C I t o P e u r i i A t o v r y S n e a S E p L C o r a s ) P ( e m i s i t a : r m b e o O t p s s o r u e I i P r t C P r G A e m t p S n o S i r a e C P l P l u a d I c o i d P i g r M A o G t L s u e S w o u * o l y r a CS a s B r V L n e f e & x r e r o r s e B p e i D t r e l n e b s i p w x e o o i r e r t l r P C F e n p enB o o y r e S P t B S l e l C a k c r i n i o g I o S W P L J n A o t i r t t d e s a i u r e p l o m g o y b r b a a P i u L r S a m V S o t S t s n ) C ( More features ! u e s i C : m n g S o S ro L C e a l u d m i s d r a e i o g b t r b M O e u t p S u I o r S o P t P y S A a u C l t L o a n y c x a i o L g S B o S L ) C ( e l s a i b : i m x a e * l b s F s s O e r i u t e r f C e S p t o S e l r e C k P l r l u n o i a d c W o i S n J g M o o i t t L o s a u e o l M * im y b t a s a u i r L r o e f a y x e a V o r L B t p n x e e o l B n b m i w x n e l e o o l b r r i i F B S x n e S nv l e C F r r t a e e l m S D k a r S b o C s O W e n i i n t r o S i S e J t L S p a o C s r m e n l i ni b A * S a J i s r r a e s f V S e e t l S r n b p C e a n i r o m b i a n x V ey o e t l n ir

Slide 20

Slide 20

JS in CSS? 🤡 main { display: ’serviceWorker’ in navigator ? “…” : “…”; }

Slide 21

Slide 21

Houdini textarea { background-image: paint(checkerboard); } https://googlechromelabs.github.io/houdini-samples

Slide 22

Slide 22

Houdini class CheckerboardPainter { paint(ctx, geom, properties) { /*” implement checkerboard */$ } } registerPaint(‘checkerboard’, CheckerboardPainter); https://googlechromelabs.github.io/houdini-samples

Slide 23

Slide 23

🤡

Slide 24

Slide 24

Progressive enhancement

Slide 25

Slide 25

Progressive enhancement builds documents for the least capable or differently capable devices first, then moves on to enhance those documents with separate logic for presentation, in ways that don’t place an undue burden on baseline devices but which allow a richer experience for those users with modern graphical browser software — Stephen Champeon (2003) http://hesketh.com/publications/inclusive_web_design_for_the_future/

Slide 26

Slide 26

Graceful degradation is the practice of building your web functionality so that it provides a certain level of user experience in more modern browsers, but it will also degrade gracefully to a lower level of user experience in older browsers.

Slide 27

Slide 27

Full experience https://www.google.com

Slide 28

Slide 28

Experience with Javascript disabled https://www.google.com

Slide 29

Slide 29

Experience with both Javascript and Stylesheets disabled https://www.google.com

Slide 30

Slide 30

Example of a graceful degradation approach

Slide 31

Slide 31

The problems are different, but the solution is the same http://hesketh.com/publications/inclusive_web_design_for_the_future

Slide 32

Slide 32

  1. Start by providing a core experience to all browsers 2. Add styling and functionality to enhance the experience for more capable browsers

Slide 33

Slide 33

But, progressive enhancement with CSS is kinda hard

Slide 34

Slide 34

JS already has the right tools ✅ Feature detection ✅ Error handling

Slide 35

Slide 35

if (‘serviceWorker’ in navigator) { navigator.serviceWorker.register() .then(() =>& { … }) .catch(() =>& { … }) } else { // do something else }

Slide 36

Slide 36

if (‘serviceWorker’ in navigator) { navigator.serviceWorker.register() .then(() =>& { … }) .catch(() =>& { … }) } else { // do something else }

Slide 37

Slide 37

CSS is lacking the right tools ❌ Feature detection (sort of) ❌ Error handling

Slide 38

Slide 38

Slide 39

Slide 39

Faulty selector ☹ image { transform: rotate(180deg); }

Slide 40

Slide 40

Faulty property ☹ img { transformer: rotate(180deg); }

Slide 41

Slide 41

Faulty value ☹ img { transform: flip(180deg); }

Slide 42

Slide 42

Unsupported browser ☹ img { transform: rotate(180deg); }

Slide 43

Slide 43

Slide 44

Slide 44

Progressive enhancement with CSS is kinda hard, but still doable

Slide 45

Slide 45

Don’t use CSS (if you don’t have to)

Slide 46

Slide 46

Start with sensible HTML

Slide 47

Slide 47

Image from https://www.shopify.com/partners/blog/what-is-progressive-enhancement-and-why-should-you-care

Slide 48

Slide 48

Image from https://www.shopify.com/partners/blog/what-is-progressive-enhancement-and-why-should-you-care

Slide 49

Slide 49

Make sure the document works without CSS in the first place

Slide 50

Slide 50

bitsofco.de

Slide 51

Slide 51

❌ <body> body { display: flex } <footer>…</footer> header { order: 1 } <nav>…</nav> nav { order: 2 } <header>…</header> main { order: 3 } <main>…</main> footer { order: 4 } </body>

Slide 52

Slide 52

✅ <body> <header>…</header> <nav>…</nav> body { display: flex } <main>…</main> <footer>…</footer> </body>

Slide 53

Slide 53

Use the cascade

Slide 54

Slide 54

Slide 55

Slide 55

The cascade is built-in progressive enhancement

Slide 56

Slide 56

.element { -webkit-transition: all 4s ease; -moz-transition: all 4s ease; -ms-transition: all 4s ease; -o-transition: all 4s ease; transition: all 4s ease; }

Slide 57

Slide 57

body { background: url(fallback.png); background-image: url(awesome.svg), none; }

Slide 58

Slide 58

Write mobile-first CSS

Slide 59

Slide 59

min-width > max-width

Slide 60

Slide 60

On a mobile device 📱 main { width: 800px } main { width: 100% } @media (max-width: 900px) { @media (min-width: 900px) { main { width: 100% } } main { width: 800px } }

Slide 61

Slide 61

On average, mobile devices are slower and less capable than desktop devices

Slide 62

Slide 62

Mobile styles are more adaptable

Slide 63

Slide 63

Image from https://bradfrost.com/blog/post/mobile-first-responsive-web-design

Slide 64

Slide 64

Will only work on larger screen sizes Will work on any device and screen size main { main { width: 800px; } width: 100%; }

Slide 65

Slide 65

Don’t be afraid to use the “old thing”

Slide 66

Slide 66

doineedtouse > caniuse

Slide 67

Slide 67

Slide 68

Slide 68

Float-based layout 😮 s k r o .column { w t s u j It position: relative; .column, width: 100%; [dir=”rtl”] .reverse .column { min-height: 1px; padding: 0px $small-space; } float: left; }

Slide 69

Slide 69

The goal of web design is not merely to dazzle, but to deliver information to the widest audience — Stephen Champeon http://hesketh.com/publications/inclusive_web_design_for_the_future/

Slide 70

Slide 70

Ok, but what if I do need to use the “new thing”? 🥺

Slide 71

Slide 71

Use feature queries!

Slide 72

Slide 72

CSS is lacking the right tools ✅ Feature detection (sort of) ❌ Error handling

Slide 73

Slide 73

Feature queries allow us to condition rules based on whether particular CSS declarations are supported by the current browser

Slide 74

Slide 74

@supports ( declaration ) { /*” … */$ }

Slide 75

Slide 75

Detect if a feature is supported @supports (display: grid) { main { display: grid; } }

Slide 76

Slide 76

Detect if all in a group of features are supported @supports ( (font-kerning: normal) and (font-feature-settings: “kern” 1) ) { p { font-kerning: normal; font-feature-settings: “kern” 1; } }

Slide 77

Slide 77

Detect if any within a group of features are supported @supports ( (transform: translate(-50%, -50%)) or (-webkit-transform: translate(-50%, -50%)) ) { div { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } }

Slide 78

Slide 78

Detect if a feature is not supported @supports not (display: grid) { main { display: table; } }

Slide 79

Slide 79

Slide 80

Slide 80

Use feature queries as an enhancement

Slide 81

Slide 81

✅ ❌ @supports (display: grid) { @supports not (display: grid) { main { main { display: grid; display: table; } } } }

Slide 82

Slide 82

Supports Feature Queries ✅ Supports CSS Feature ✅ 😊 Does Not Support CSS Feature ❌ 😊 Does Not Support Feature Queries ❌

Slide 83

Slide 83

Supports Feature Queries ✅ Supports CSS Feature ✅ 😊 Does Not Support CSS Feature ❌ 😊 Does Not Support Feature Queries ❌ 😊

Slide 84

Slide 84

Browser doesn’t support FQs and does not support CSS grid ✅ @supports (display: grid) { main { display: grid; } }

Slide 85

Slide 85

Supports Feature Queries ✅ Does Not Support Feature Queries ❌ Supports CSS Feature ✅ 😊 😩 Does Not Support CSS Feature ❌ 😊 😊

Slide 86

Slide 86

Browser doesn’t support FQs but does support CSS grid ❌ @supports (display: grid) { main { display: grid; } }

Slide 87

Slide 87

What will users look like in the future ?

Slide 88

Slide 88

MORE PEOPLE

Slide 89

Slide 89

In 1999, just 4% of the global population were online http://www.itu.int/ITU-D/ict/statistics/ict

Slide 90

Slide 90

In 1999, >96% of internet users were from the English-speaking world http://www.itu.int/ITU-D/ict/statistics/ict

Slide 91

Slide 91

In 2019, over 53% of the global population are online https://www.statista.com/statistics/273018/number-of-internet-users-worldwide

Slide 92

Slide 92

26% English 19% Chinese 8% Spanish Arabic Portuguese Indonesian French Japanese Russian German 5% 4% 4% 3% 3% 3% 2% 23% All Other 0.00 0.08 https://www.internetworldstats.com/stats7.htm 0.15 0.23 0.30

Slide 93

Slide 93

26% English 19% Chinese 8% Spanish Arabic Portuguese Indonesian French Japanese Russian German 5% 4% 4% 3% 3% 3% 2% 23% All Other 0.00 0.08 https://www.internetworldstats.com/stats7.htm 0.15 0.23 0.30

Slide 94

Slide 94

Русский использует совершенно другой алфавит

Slide 95

Slide 95

‫تتم قراءة اللغة العربية من اليمني إلى اليسار‬

Slide 96

Slide 96

和 从 上 到 下 阅 读 中 ⽂ 可 以 从 右 到 左

Slide 97

Slide 97

internationalisation

Slide 98

Slide 98

direction & writing-mode & text-orientation & unicode-bidi

Slide 99

Slide 99

<div>Hello AEA!</div>

Slide 100

Slide 100

Set direction and alignment div { direction: rtl; }

Slide 101

Slide 101

Set flow div { writing-mode: vertical-lr; }

Slide 102

Slide 102

div { direction: rtl; writing-mode: vertical-lr; }

Slide 103

Slide 103

Set orientation div { direction: rtl; writing-mode: vertical-lr; text-orientation: sideways; }

Slide 104

Slide 104

Handle multiple languages and directions div { direction: rtl; }

Slide 105

Slide 105

Handle multiple languages and directions div { direction: rtl; unicode-bidi: bidi-override; }

Slide 106

Slide 106

Use logical CSS properties

Slide 107

Slide 107

CSS has, so far, largely been written for English alone ☹

Slide 108

Slide 108

Left usually doesn’t mean left p { margin-left: 10px; }

Slide 109

Slide 109

Left usually doesn’t mean left [lang=“ar”] { direction: rtl; } [lang=“ar”] p { margin-right: 10px; }

Slide 110

Slide 110

Slide 111

Slide 111

Slide 112

Slide 112

left inline-start p { margin-inline-start: 10px; }

Slide 113

Slide 113

This is a test of CSS logical properties CSS ‫هذا اختبار للخصائص املنطقية لـ‬

Slide 114

Slide 114

Use left when you actually mean left

Slide 115

Slide 115

Use logical naming conventions

Slide 116

Slide 116

❌ ✅ .nav-aside { … } .nav-right { … } .nav-start { … } .nav-end { … }

Slide 117

Slide 117

More users = more variation in users

Slide 118

Slide 118

We can’t assume one type of user 👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻

Slide 119

Slide 119

Slide 120

Slide 120

Image from https://www.maltron.com/store/p25/Maltron_Expanded_Keyboard_-_US_English.html

Slide 121

Slide 121

Image from https://theweco.com/motor-skill-related-disabilities-navigating-and-designing-websites

Slide 122

Slide 122

Image from https://axesslab.com/switches

Slide 123

Slide 123

Slide 124

Slide 124

Today, 15% of the global population need to use an assistive product https://www.who.int/news-room/fact-sheets/detail/assistive-technology

Slide 125

Slide 125

Accessibility Image from https://design.google/library/designers-guide-accessibility-research

Slide 126

Slide 126

HTML is by default accessible. It’s our jobs, as developers, to not f😮ck that up. — @estellevw

Slide 127

Slide 127

Only use CSS for styling

Slide 128

Slide 128

Image from https://www.shopify.com/partners/blog/what-is-progressive-enhancement-and-why-should-you-care

Slide 129

Slide 129

Image from https://www.dr4ward.com/dr4ward/2015/09/what-is-solutionaversion-and-the-law-of-the-hammer-how-does-it-impact-change-comic-.html

Slide 130

Slide 130

Don’t use CSS for content

Slide 131

Slide 131

<div> div::(before { <input type=“password”> </div> content: “Password: ”; }

Slide 132

Slide 132

Slide 133

Slide 133

CSS is not part of the accessibility tree 🌳

Slide 134

Slide 134

Slide 135

Slide 135

Slide 136

Slide 136

<div> <label for=“pw”>Password</label> <input id=“pw” type=“password”> </div>

Slide 137

Slide 137

Slide 138

Slide 138

Don’t use CSS for functionality

Slide 139

Slide 139

Trying to make the <abbr> element accessible with only CSS https://bitsofco.de/making-abbr-work-for-touchscreen-keyboard-mouse

Slide 140

Slide 140

Issues S J h t i w d e v l o S ❌ Used tabindex attribute on a non-interactive element ❌ Couldn’t dismiss the tooltip on mobile devices ❌ Duplication of content for screenreaders

Slide 141

Slide 141

Slide 142

Slide 142

Change, don’t undo, the default accessible styles

Slide 143

Slide 143

✅ Accessible to various input devices ✅ Hover, focus, and active states ✅ Semantically meaningful

Slide 144

Slide 144

✅ Using assistive technology, interactive elements can be easily navigated to

Slide 145

Slide 145

We can still change the default styles

Slide 146

Slide 146

❌ ✅ :focus { :focus { outline: none; outline: none; background-color: darksalmon; } }

Slide 147

Slide 147

The :focus-visible pseudo-class applies focus styles only in cases where the browser determines focus needs to be visible

Slide 148

Slide 148

button:focus:not(:focus-visible) { outline: none; } button:focus-visible { background-color: darksalmon; }

Slide 149

Slide 149

button:focus:not(:focus-visible) { outline: none; } button:focus-visible { background-color: darksalmon; }

Slide 150

Slide 150

Follow styling conventions

Slide 151

Slide 151

Slide 152

Slide 152

One material should not be used as a substitute for another, otherwise the end result is deceptive — Jeremy Keith https://resilientwebdesign.com

Slide 153

Slide 153

Slide 154

Slide 154

Image from https://medium.com/simple-human/but-sometimes-links-look-like-buttons-andbuttons-look-like-links-9b371c57b3d2

Slide 155

Slide 155

Be proactive about compliance

Slide 156

Slide 156

Slide 157

Slide 157

https://www.w3.org/TR/WCAG20-TECHS/css

Slide 158

Slide 158

Firefox accessibility inspector

Slide 159

Slide 159

Lighthouse accessibility report

Slide 160

Slide 160

CSS is subjective, so tools can only tell you so much

Slide 161

Slide 161

Image from https://www.citmagazine.com/article/1526238/why-personalisation-key-measuring-events-success personalisation

Slide 162

Slide 162

Write adaptive CSS

Slide 163

Slide 163

Adapt to colour preferences body { background-color: white; color: black; } @media (prefers-color-scheme: dark) { body { background-color: black; color: white; } }

Slide 164

Slide 164

Adapt to animation preferences element { animation: 3s infinite alternate slideIn; } @media (prefers-reduced-motion: reduce) { .element { animation: none; } }

Slide 165

Slide 165

Adapt to data preferences .element { background-image: url(“image-1800w.png”); } @media (prefers-reduced-data: reduce) { .element { background-image: url(“image-600w.jpg”); } }

Slide 166

Slide 166

e v i s s e r g o t r n P e m e c n a h n e

Slide 167

Slide 167

Use rems over pixels for sizes

Slide 168

Slide 168

REM represents the font-size of the root element (typically <html>). When used on the font-size on this root element, it represents its initial value. — MDN Web Docs https://developer.mozilla.org/en-US/docs/Web/CSS/length#rem

Slide 169

Slide 169

Using rems allows a website to automatically adapt to user preferences

Slide 170

Slide 170

Slide 171

Slide 171

Future-proof css 🚀

Slide 172

Slide 172

Future-proofing == past-proofing

Slide 173

Slide 173

Progressive enhancement ✅ Start with sensible HTML ✅ Use the cascade ✅ Write mobile-first CSS ✅ Don’t be afraid to use the “old thing” ✅ Use feature queries (as an enhancement)

Slide 174

Slide 174

Internationalisation ✅ Use direction, writing-mode, text-orientation, & unicode-bidi ✅ Use logical CSS properties ✅ Use logical naming conventions

Slide 175

Slide 175

Accessibility ✅ Only use CSS for styling ✅ Change, don’t undo, the default accessible styles ✅ Follow styling conventions ✅ Be proactive about compliance

Slide 176

Slide 176

Personalisation ✅ Write adaptive CSS ✅ Use rems over pixels for sizes

Slide 177

Slide 177

Thank you! Ire Aderinokun 🇳🇬 COO & VP Engineering of BuyCoins Google Web Expert & Cloudinary Media Expert ireaderinokun.com bitsofco.de @ireaderinokun