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

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

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>

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

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

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

<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

Preloading CSS 1. Preload Link 2. HTTP/2 Push

<link rel=“preload” as “style” href=“stylesheet.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