What about CSS?
Ire Aderinokun | Voxxed Days Zurich 2017
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
No content
Slide 7
Slide 7 text
User Interface Designer
&
Frontend Developer
Slide 8
Slide 8 text
Writer, bitsofco.de
Slide 9
Slide 9 text
Google Expert,
Web Technologies
Slide 10
Slide 10 text
Progressive Enhancement
&
CSS
Slide 11
Slide 11 text
What is Progressive
Enhancement?
Slide 12
Slide 12 text
Let’s go back to 2003
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
The Sound of the Internet
Slide 15
Slide 15 text
The State of the Web
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
Graceful Degradation
Slide 18
Slide 18 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 19
Slide 19 text
HTML
Your browser sucks so this feature won’t work
for you. Go download Chrome.
Slide 20
Slide 20 text
March 11 2003
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
Stephen
Champeon
Progressive
Enhancement
Slide 23
Slide 23 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 24
Slide 24 text
Enter “ Progressive Enhancement ”
Slide 25
Slide 25 text
“ Web design must mature and accept the
developments of the past several years ”
— Stephen Champeon
Slide 26
Slide 26 text
“ The goal of Web design is not merely
to dazzle, but to deliver information
to the widest audience ”
— Stephen Champeon
Slide 27
Slide 27 text
Okay, but what does this
actually mean in practice?
Slide 28
Slide 28 text
5 “Guidelines” for
Progressive Enhancement
Slide 29
Slide 29 text
Basic content and functionality should
be accessible to all web browsers
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 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 95
Slide 95 text
Use Flexbox
Slide 96
Slide 96 text
Flexbox is Designed to be a
Progressive Enhancement
Slide 97
Slide 97 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 103
Slide 103 text
The Future of Progressive
Enhancement & CSS
Slide 104
Slide 104 text
What about Feature Queries?
Slide 105
Slide 105 text
CSS Feature Queries allow authors to
condition rules based on whether
particular property declarations are
supported by the current browser
Slide 106
Slide 106 text
CSS
@supports ( /* condition */ ) {
/* rules */
}
Slide 107
Slide 107 text
CSS
@supports ( display: flex ) {
.foo { display: flex; }
}
Detect if a feature is supported
Slide 108
Slide 108 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 109
Slide 109 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 110
Slide 110 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 117
Slide 117 text
Supports Feature Queries &
Supports CSS Feature
Supports
Feature Queries
Does Not Support
Feature Queries
Supports
CSS Feature
Does Not Support
CSS Feature
Slide 118
Slide 118 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 119
Slide 119 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 120
Slide 120 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 121
Slide 121 text
What’s the Solution?
Slide 122
Slide 122 text
Progressive Enhancement!
Slide 123
Slide 123 text
Use Feature Queries as a
Progressive Enhancement,
rather than a Requirement