CSS for the Next Billion Users
A presentation at CSS Day + UX Special in in Amsterdam, Netherlands by Ire Aderinokun
CSS for the “Next Billion Users”
CSSDay.NL 2018
Ire Aderinokun
E + Rey
!
Who are the
“Next Billion Users” ?
Until now, developing for the web = developing for users like you
Until now, developing for the web = developing for users like you
"
In 1995,
The average cost of computers
was
~
USD 10,000
In 1995, Only 0. 4% of the global population had access to the internet
$
In 1995, Access to assistive technologies was essentially non-existent
Techno W1 Android 7.0 Nougat NGN 16,000 ~ USD 45 Lenovo Ideapad Windows 10 NGN 90,000 ~ USD 250
% of Global Population with
Access to Internet
0%
15%
30%
45%
60%
1995
2017
51.7%0.4%
Assistive Technologies
Next Billion Users
Building for the NBU Accessibility Internationalisation Performance … … … …
Performance
–
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
”
Internationalisation
Accessibility
CSS for the Next Billion Users
4 things • Is CSS the right tool? • Selecting HTML • CSS Declarations • CSS Delivery
1
Is CSS the right tool?
– A Wise Carpenter “If you only have a hammer, you tend to see every problem as a nail”
“CSS-Only” Functionality
Use the Right Tool Content Presentation Functionality
When to use HTML input[type=“password”] !" after { content: “Enter your password” }
When to use HTML < label for=“password”>Enter your password</ label> <input type=“password” id=“password”>
When to use JavaScript
When to use JavaScript
2
Selecting HTML
. element { color: #bae; }
Use globally-aware
naming conventions
Naming Conventions .text- left { text-align: left; }
Naming Conventions [dir=“ltr”] .text- start { text-align: left; } [dir=“rtl”] .text- start { text-align: right; }
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 ;
Beware of
expensive
selectors
a[href=“https://bitsofco.de”] a:not[href*=“cssday.nl”] ul li:nth-child(3) a ul li:last-child a #boc
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
#boc ul li:nth-child(3) a ul li:last-child a a[href=“https://bitsofco.de”] a:not[href*=“cssday.nl”] Fastest Slowest
Use Performant Naming Conventions
<div class=“button icon primary”> <div class=“button primary”> button:not(.icon).primary { … }
Use Performant Naming Conventions
<div class=“button button--icon button--primary”> <div class=“button button--primary”> .button { … } .button--primary { … }
3 CSS Declarations
.element {
color: #bae;
}
Can I Use
[insert-awesome-thing] ?
Do I need to
use
[insert-awesome-thing] ?
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;
}
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
™
Do I need to use
[insert-awesome-thing] ?
Actually, yes.
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)); } }
Use feature queries! %
.group.cards {
!" Fallback styles here #$
} @supports (display: grid) { .group.cards {
!" grid-based layout #$
} }
Choosing performant
CSS properties
The “Cr ! cal Rendering Path”
Changes to CSS can
re-
trigger
stages of the
cr
!
cal rendering path
Animating the “top” property
Animating the “transform” property
Respect end-user preferences
Reduced-motion .animated { animation-name :
3 s infinite alternate slideIn ;
} @media ( prefers-reduced-motion: reduce ) { .animated { animation: none; } }
!important
body {
font-size: 8px
!important
;
}
Our !important declarations will override everything except user- defined !important declarations
Progressive Enhancement div { background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.5); }
4 CSS Delivery
CSS is a
render-blocking
resource
Solu tions Modularising CSS Preloading CSS
Modularising CSS 1. Loading CSS based on media types 2. Inlining Cr ! cal CSS 3. Styles in the <body>
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>
loadCSS(“full.css”);
</script> </head> 1. Loading CSS based on media types 2. Inlining Cr ! cal CSS 3. Styles in the <body>
Preloading CSS 1. Preload Link 2. HTTP/2 Push
<FilesMatch ".html$"> Header set Link “</css/styles.css>; rel=preload; as=style" <FilesMatch> 1. Preload Link 2. HTTP/2 Push
Let’s Review ✅ Is CSS the right tool? ✅ Selecting HTML ✅ CSS Declarations ✅ CSS Delivery
Next Billion Users
Your Billion Users
Thank you! ireaderinokun.com
bitsofco.de
@IreAderinokun
There’s been a lot of talk lately about developing for the “next billion users”, which essentially means targeting users who are coming online for the first time in developing countries. This talk will be about different ways we can write CSS for the “next billion users”. I will talk about my experience developing websites for users in Nigeria and cover areas such as performance, accessibility, and progressive enhancement.
for free. You
can too.
Buzz and feedback
Here’s what was said about this presentation on social media.
