CSS for the “Next Billion Users”
CSSDay.NL 2018
Slide 1
Slide 2
Ire Aderinokun
Slide 3
E + Rey
Slide 4
!
Slide 5
Who are the
“Next Billion Users” ?
Slide 6
Slide 7
Slide 8
Until now, developing for the web = developing for users like you
Slide 9
Until now, developing for the web = developing for users like you
Slide 10
Slide 11
"
In 1995,
The average cost of computers
was
~
USD 10,000
Slide 12
In 1995, Only 0. 4% of the global population had access to the internet
Slide 13
$
In 1995, Access to assistive technologies was essentially non-existent
Slide 14
Slide 15
Techno W1 Android 7.0 Nougat NGN 16,000 ~ USD 45 Lenovo Ideapad Windows 10 NGN 90,000 ~ USD 250
Slide 16
% of Global Population with
Access to Internet
0%
15%
30%
45%
60%
1995
2017
51.7%0.4%
Slide 17
Assistive Technologies
Slide 18
Next Billion Users
Slide 19
Building for the NBU Accessibility Internationalisation Performance … … … …
Slide 20
Performance
Slide 21
–
2014 report by McKinsey & Company
“In Nigeria, the average person has to
work
28 hours
to earn enough to use
500 MB of data.
In Germany, it’s only
1 hour
”
Slide 22
Internationalisation
Slide 23
Accessibility
Slide 24
CSS for the Next Billion Users
Slide 25
4 things • Is CSS the right tool? • Selecting HTML • CSS Declarations • CSS Delivery
Slide 26
1
Is CSS the right tool?
Slide 27
– A Wise Carpenter “If you only have a hammer, you tend to see every problem as a nail”
Slide 28
“CSS-Only” Functionality
Slide 29
Use the Right Tool Content Presentation Functionality
Slide 30
When to use HTML input[type=“password”] !" after { content: “Enter your password” }
Slide 31
When to use HTML < label for=“password”>Enter your password</ label> <input type=“password” id=“password”>
Slide 32
When to use JavaScript
Slide 33
When to use JavaScript
Slide 34
2
Selecting HTML
Slide 35
. element { color: #bae; }
Slide 36
Use globally-aware
naming conventions
Slide 37
Slide 38
Slide 39
Naming Conventions .text- left { text-align: left; }
Slide 40
Naming Conventions [dir=“ltr”] .text- start { text-align: left; } [dir=“rtl”] .text- start { text-align: right; }
Slide 41
margin-block-start : 10px ; flex-direction: row | row- reverse | column | column-reverse ; flex-wrap: nowrap | wrap | wrap-reverse ; justify-content: flex-start | flex-end | center | space-between | space-around |space- evenly ; align-items: flex-start | flex-end | center | baseline | stretch; align-content: flex-start | flex- end | center | space-between | space-around | stretch ; display: grid | inline-grid ; text-align: start ; align- content: center | start | end | space-between | space- around | space-evenly ; justify-items: center | start | end | stretch ; align-items: center | start | end | stretch ; justify-self: center | start | end | stretch ; align-self: center | start | end | stretch ;
Slide 42
Beware of
expensive
selectors
Slide 43
<ul>
<li><a href=“https://cssday.nl”>One</a></li>
<li><a href=“https://cssday.nl/2018”>Two</a></li>
<li>
<a id=“boc” href=“https://bitsofco.de”>Three</a>
</li>
</ul>
Slide 44
a[href=“https://bitsofco.de”] a:not[href*=“cssday.nl”] ul li:nth-child(3) a ul li:last-child a #boc
Slide 45
Selector Efficiency 1. ID, e.g. #foo
Class, e.g. .foo 3. Tag, e.g. div
Adjacent Sibling, e.g. header + main 5. Child Combinator, e.g. ul > li 6. Descendant, e.g ul li 7. Universal, e.g. *
Attribute, e.g. a[href=“https://bitsofco.de”] 9. Pseudo-classes & pseudo-elements, e.g. a:visited Fastest Slowest
Slide 46
#boc ul li:nth-child(3) a ul li:last-child a a[href=“https://bitsofco.de”] a:not[href*=“cssday.nl”] Fastest Slowest
Slide 47
Use Performant Naming Conventions
<div class=“button icon primary”> <div class=“button primary”> button:not(.icon).primary { … }Slide 48
Use Performant Naming Conventions
<div class=“button button--icon button--primary”> <div class=“button button--primary”> .button { … } .button--primary { … }Slide 49
3 CSS Declarations
Slide 50
.element {
color: #bae;
}
Slide 51
Can I Use
[insert-awesome-thing] ?
Slide 52
Do I need to
use
[insert-awesome-thing] ?
Slide 53
Slide 54
Float-Based Layout
.row {
margin: 0px (-$small-space);
}
.row:after {
display: block;
clear: both;
content: "";
}
.column {
position: relative;
width: 100%;
min-height: 1px;
padding: 0px $small-space;
}
.column,
[dir="rtl"] .reverse .column {
float: left;
}
Slide 55
Float-Based Layout
.row {
margin: 0px (-$small-space);
}
.row:after {
display: block;
clear: both;
content: "";
}
.column {
position: relative;
width: 100%;
min-height: 1px;
padding: 0px $small-space;
}
.column,
[dir="rtl"] .reverse .column {
float: left;
}
It just works
™
Slide 56
Do I need to use
[insert-awesome-thing] ?
Actually, yes.
Slide 57
Slide 58
Grid-Based Layout .group.cards { display: grid; grid-template-columns: repeat(1, 1fr); @media (min-width: $card-min-width) { grid-template-columns: repeat(auto-fit, minmax($card-min-width, 1fr)); } }
Slide 59
Slide 60
Use feature queries! %
Slide 61
.group.cards {
!" Fallback styles here #$
} @supports (display: grid) { .group.cards {
!" grid-based layout #$
} }
Slide 62
Choosing performant
CSS properties
Slide 63
The “Cr ! cal Rendering Path”
Slide 64
Changes to CSS can
re-
trigger
stages of the
cr
!
cal rendering path
Slide 65
Animating the “top” property
Slide 66
Animating the “transform” property
Slide 67
Slide 68
Respect end-user preferences
Slide 69
Reduced-motion .animated { animation-name :
3 s infinite alternate slideIn ;
} @media ( prefers-reduced-motion: reduce ) { .animated { animation: none; } }
Slide 70
!important
body {
font-size: 8px
!important
;
}
Slide 71
Our !important declarations will override everything except user- defined !important declarations
Slide 72
Progressive Enhancement div { background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.5); }
Slide 73
4 CSS Delivery
Slide 74
Slide 75
CSS is a
render-blocking
resource
Slide 76
Solu tions Modularising CSS Preloading CSS
Slide 77
Modularising CSS 1. Loading CSS based on media types 2. Inlining Cr ! cal CSS 3. Styles in the <body>
Slide 78
<link
rel=“stylesheet”
media=“(max-width: 600px)”
src=“mobile.css”>
<link rel=“stylesheet” media=“(min-width: 600px)” src=“desktop.css”> 1. Loading CSS based on media types 2. Inlining Cr ! cal CSS 3. Styles in the <body>Slide 79
<head>
<style id=“critical”>
#hero { }
</style>
<script>
loadCSS(“full.css”);
</script> </head> 1. Loading CSS based on media types 2. Inlining Cr ! cal CSS 3. Styles in the <body>Slide 80
<body>
<style>header {
!"
#$
}</style>
<header>…</header>
<style>main {
!"
#$
}</style>
<main>…</main>
<style>footer {
!"
#$
}</style>
<footer>…</footer>
</body>
1.
Loading CSS based on
media types
2.
Inlining Cr
!
cal CSS
3.
Styles in the <body>
Slide 81
<body>
<style>header {
!"
#$
}</style>
<header>…</header>
<style>main {
!"
#$
}</style>
<main>…</main>
<style>footer {
!"
#$
}</style>
<footer>…</footer>
</body>
1.
Loading CSS based on
media types
2.
Inlining Cr
!
cal CSS
3.
Styles in the <body>
The use of
<style>
in the
<body>
of the document may cause restyling,
trigger layout and/or cause repainting, and hence, should be used with
care.” — HTML Speci
f
ication
Slide 82
Preloading CSS 1. Preload Link 2. HTTP/2 Push
Slide 83
<link
rel=“preload”
as “style”
href=“stylesheet.css”>
1.
Preload Link
2.
HTTP/2 Push
Slide 84
<FilesMatch ".html$"> Header set Link “</css/styles.css>; rel=preload; as=style" <FilesMatch> 1. Preload Link 2. HTTP/2 Push
Slide 85
Let’s Review ✅ Is CSS the right tool? ✅ Selecting HTML ✅ CSS Declarations ✅ CSS Delivery
Slide 86
Next Billion Users
Slide 87
Your Billion Users
Slide 88
Thank you! ireaderinokun.com
bitsofco.de
@IreAderinokun
