What about CSS?
Ire Aderinokun | Fronteers Conference 2016
Progressive Enhancement & CSS
Slide 2
Slide 2 text
Ireoluwa Akanke Elizabeth
Oluwasore Aderinokun
Slide 3
Slide 3 text
Ire
Slide 4
Slide 4 text
Rey
Slide 5
Slide 5 text
Lagos, Nigeria
Slide 6
Slide 6 text
User Interface Designer
&
Front-End Developer
Slide 7
Slide 7 text
Writer, bitsofco.de
Slide 8
Slide 8 text
Google Developer Expert,
Web Technologies
Slide 9
Slide 9 text
Progressive Enhancement
&
CSS
Slide 10
Slide 10 text
What is Progressive
Enhancement?
Slide 11
Slide 11 text
Let’s go back to 2003
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
The Sound of the Internet
Slide 14
Slide 14 text
The State of the Web
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
Graceful Degradation
Slide 17
Slide 17 text
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 18
Slide 18 text
HTML
Your browser sucks so this feature won’t work
for you. Go download Chrome.
Slide 19
Slide 19 text
March 11 2003
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
Stephen Champeon
“Inclusive Web Design for the Future”
at SXSW
Slide 22
Slide 22 text
The Problems with
Graceful Degradation
• “Doesn’t straddle technology inflection points well”
• “Many designers don’t test anything but one version back”
• “Does not address different needs of different audiences”
• “It’s expensive to retrofit to new alternate devices”
• “Whatever is ‘good enough’ usually rules”
http://hesketh.com/publications/inclusive_web_design_for_the_future/
Slide 23
Slide 23 text
Enter “ Progressive Enhancement ”
Slide 24
Slide 24 text
“ Web design must mature and accept the
developments of the past several years ”
— Stephen Champeon
Slide 25
Slide 25 text
“ The goal of Web design is not merely
to dazzle, but to deliver information
to the widest audience ”
— Stephen Champeon
Slide 26
Slide 26 text
Okay, but what does this
actually mean in practice?
Slide 27
Slide 27 text
5 “Guidelines” for
Progressive Enhancement
Slide 28
Slide 28 text
Basic content and functionality should
be accessible to all web browsers
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
Sparse, semantic markup should
contain all content
CSS
/* Will work on any screen size */
.foo { width: 100%; }
@media (min-width: 960px) {
/* Will only work on larger screen sizes */
.foo { width: 600px; }
}
Slide 91
Slide 91 text
Use Flexbox
Slide 92
Slide 92 text
Flexbox is Designed to be a
Progressive Enhancement
Slide 93
Slide 93 text
CSS
.center-children {
text-align: center;
/* Will be overridden if Flexbox is supported */
display: table-cell;
vertical-align: middle;
/* Flex Styles */
display: flex;
justify-content: center;
align-items: center;
}
JS
if ('querySelector' in document
&& 'localStorage' in window
&& 'addEventListener' in window) {
// Bootstrap with latest features
}
Slide 99
Slide 99 text
The Future of Progressive
Enhancement & CSS
Slide 100
Slide 100 text
What about Feature Queries?
Slide 101
Slide 101 text
CSS Feature Queries allow authors to
condition rules based on whether
particular property declarations are
supported by the current browser
Slide 102
Slide 102 text
CSS
@supports ( /* condition */ ) {
/* rules */
}
Slide 103
Slide 103 text
CSS
@supports ( display: flex ) {
.foo { display: flex; }
}
Detect if a feature is supported
Slide 104
Slide 104 text
CSS
@supports ( (font-kerning: normal) and
(font-feature-settings: "kern" 1) ) {
.foo {
font-kerning: normal;
font-feature-settings: "kern" 1;
}
}
Detect if all of several features
are supported
Slide 105
Slide 105 text
CSS
@supports ( (tranform: translate(-50%, -50%)) or
(-webkit-tranform: translate(-50%, -50%)) ) {
.foo {
-webkit-tranform: translate(-50%, -50%);
tranform: translate(-50%, -50%);
}
}
Detect if either of several
features are supported
Slide 106
Slide 106 text
CSS
@supports not ( display: flex ) {
.foo { display: table; }
}
Detect if a feature is not
supported
4 Scenarios
Supports
Feature Queries
Does Not Support
Feature Queries
Supports
CSS Feature
Does Not Support
CSS Feature
Slide 113
Slide 113 text
Supports Feature Queries &
Supports CSS Feature
Supports
Feature Queries
Does Not Support
Feature Queries
Supports
CSS Feature
Does Not Support
CSS Feature
Slide 114
Slide 114 text
Supports Feature Queries &
Does Not Support CSS Feature
Supports
Feature Queries
Does Not Support
Feature Queries
Supports
CSS Feature
Does Not Support
CSS Feature
Slide 115
Slide 115 text
Does Not Support Feature Queries &
Does Not Support CSS Feature
Supports
Feature Queries
Does Not Support
Feature Queries
Supports
CSS Feature
Does Not Support
CSS Feature
Slide 116
Slide 116 text
Does Not Support Feature Queries &
Supports CSS Feature
Supports
Feature Queries
Does Not Support
Feature Queries
Supports
CSS Feature
Does Not Support
CSS Feature
Slide 117
Slide 117 text
What’s the Solution?
Slide 118
Slide 118 text
Progressive Enhancement!
Slide 119
Slide 119 text
Use Feature Queries as a
Progressive Enhancement,
rather than a Requirement