Writing CSS in 100 Years
Ire Aderinokun @ dotCSS
Slide 1
Slide 2
So, how are we writing CSS in 100 years?
Slide 3
f a s e L e r u p x l o a B V n e & l w & s b o i r s e x i e t B e i l t n r F e r e r p e t o r D e l P k r o s e W i t n S r o S i e t C p a o a n r i m c i i n g lP S A J o L S s d S e i l r C b g n a i b o r u y a e S V B S t n S I e C P m A A n t t o u r S i o S v y n C a E a L m ) a ( s b s i e : i O t r e s I p e P i o t A r r P t o e t n p i s m o a u r o P C P l a d c i i r e l g G u o L d S o S * M C t s r u I e o f P y A e A a r s L p s e e x u l n o a B w V o e r l & B b i s n x e e i r e t l r r F e e D p o r t s P e e l i r t k r r e e o p S p o W S r n C P o i l n t i a a c i S m i g J n o L A s e l b d i S a r i S r g a C n b n V o u o y t S y e n S e B S m I C n P o r A i t v u n S o E S y C a a L s e m i ) t a ( r e b s e i p : O p o r o P s I e i P t m A r o t e t s p n i u o r a C P P l a c i d e i g l r o u o G L d L o S * S M d i s t r r u g e f o b e y u r a S p L S x n S o C w B o r e l B S n b i S e o x r y C r e l a a e F L m a ) ( b s i O t : e l k r s S o e i S t W C n er Lots of new features!
Slide 4
JS in CSS! *this is totally fake main { width: document.body.clientWidth > 800 ? “700px” : “100%”; }
Slide 5
But still, we don’t break the web
Slide 6
Use the cascade main { width: 100%; width: document.body.clientWidth > 800 ? “700px” : “100%”; }
Slide 7
Use the cascade main { width: 100%; width: document.body.clientWidth > 800 ? “700px” : “100%”; }
Slide 8
body { display: beyonce🔥; beyonce🔥-template-areas: “header header header” “navigation main ads” “footer footer footer”; beyonce🔥-template-columns: 150px 1fr 150px; beyonce🔥-template-rows: 100px 1fr 30px; }
Slide 9
Use feature queries body { /*” fallback rules here /$ } @supports (display: beyonce🔥) { body { /” awesome rules here */$ } }
Slide 10
Slide 11
Use positive feature queries @supports (display: beyonce🔥) { body { /*” awesome rules here */$ } }
Slide 12
Avoid negative feature queries @supports not (display: beyonce🔥) { body { /*” fallback rules here */$ } }
Slide 13
Everyone is online
Slide 14
In 2019, 54% of the web is English 54.4% English Russian 6.7% German 5.3% Spanish 4.9% French 3.7% Other 25%
Slide 15
In 2019, only 41% of the “developing world” is online Online Developing World Developed World 41.3% Offline 58.7% 81% 19%
Slide 16
In 100 years, 100% of humans are online
Slide 17
3 key considerations 🌍 Internationalisation ♿ Accessibility 🛠 Personalisation
Slide 18
🌍 We can’t assume LtR-TtB
Slide 19
Left usually doesn’t mean left p { margin-left: 10px; }
Slide 20
Left usually doesn’t mean left html[lang=“ar”] p { margin-right: 10px; }
Slide 21
Slide 22
Use logical properties p { margin-inline-start: 10px; }
Slide 23
This is a test of CSS logical properties CSS هذا اختبار للخصائص املنطقية لـ
Slide 24
♿ Don’t break the a11y of HTML
Slide 25
“HTML is by default accessible. As developers, it’s our job to not f🙈ck that up”
Slide 26
Don’t use CSS for content input[type=“password”]::&before { content: “Please enter your password”; } 😭
Slide 27
Don’t undo accessible styles *:focus { outline: none; } 😭
Slide 28
Style responsibly • Contrast • Colours • Text and element sizes
Slide 29
🛠 Adapt styling to user preferences
Slide 30
Adapt to animation preferences .element { animation: 3s infinite alternate slideIn; } @media (prefers-reduced-motion: reduce) { .element { } animation: none; }
Slide 31
Adapt to colour preferences body { background-color: white; color: black; } @media (prefers-color-scheme: dark) { body { } background-color: black; color: white; }
Slide 32
Adapt to data preferences .element { *not yet available background-image: url(“image-1800w.png”); } @media (prefers-reduced-data: reduce) { .element { } background-image: url(“image-600w.jpg”); }
Slide 33
Everyone is online, but not everyone is on the iPhone 100 ProMaxPlusXL
Slide 34
📈 Performant CSS matters
Slide 35
Be careful of expensive animations button { top: 0; transition: top 1s; 😭 } button:hover { top: 10px; }
Slide 36
Be careful of expensive animations button { transform: none; transition: transform 1s; } button:hover { transform: translateY(10px); }
Slide 37
CSS is still render-blocking
Slide 38
Slide 39
Inline critical CSS <head> <style id=“critical”> #hero { … } </style> <script> loadCSS(“full.css”); </script> </head>
Slide 40
Split stylesheets based on media type <link rel=“stylesheet” media=“(max-width: 600px)” src=“mobile.css”> <link rel=“stylesheet” media=“(min-width: 600px)” src=“desktop.css”>
Slide 41
Split stylesheets based on media type <link rel=“stylesheet” media=“(prefers-color-scheme: light)” src=“light.css”> <link rel=“stylesheet” media=“(prefers-color-scheme: dark)” src=“dark.css”>
Slide 42
Preload stylesheets <head> <link rel=“preload” as=“style” href=“main.css”> … <link rel=”stylesheet” href=“main.css”> </head>
Slide 43
HTTP/2 Push <FilesMatch “.html$”> Header set Link “</main.css>; rel=preload; as=style” <FilesMatch>
Slide 44
Writing CSS in 2119 2019
Slide 45
✅ Progressively enhance the experience with new features ✅ Use logical properties that are adaptable to different languages ✅ Don’t break the accessibility of HTML ✅ Adapt styling to user preferences ✅ Beware of expensive CSS animations ✅ Serve smaller, modular stylesheets wherever possible ✅ Pre-emptively load stylesheets
Slide 46
Thank you! 🌍 Where to find me 📚 Further reading & sources • ireaderinokun.com • CSS Logical Properties (Working Draft) • bitsofco.de • Proposal: prefers-reduced-data • @ireaderinokun • loadCSS() • Preload (Candidate Recommendation)
