Schalk Venter PRO
🔧 Front-end Development / 🎨 UI Design / 🌍 Social Good / ❤️ Destigmatising mental illness
CSS Feature Detection
CSS Feature What?
Recent Events in CSS
- Feature Query Manager in Chrome and Firefox
-
Atomic CSS approach, widely hated at first, gains traction via Tailwind, and influences Bootstrap 4.
-
CSS in JS explodes in popularity, with Styled Components at the forefront of the movement.
- CSS Grid Layout adopted by browsers with surprising speed, and almost immediately production ready.
CSS Fault Tolerance
-
Inconsistent CSS support among browsers.
- Unknown rules are ignored.
- Dealing with this trivial due to fault tolerance.
background-color: blue;
background-color: aqy8godf857wqe6igrf7i6dsgkv;
background-color: green;Progressive Enhancement
-
Emphasizes core experience
-
Progressively adds additional layers of presentation
- https://caniuse.com/
User Agent Detection
- JavaScript property called navigator.
-
IE Conditional Comments
Cross Browser Testing
-
CrossBrowserTesting (free for Codepen pens)
-
BrowserStack (free for open source projects)
- Other services (Browserling, SauceLabs, etc.)
- Internet Explorer 11 Emulation (Windows only)
- Free Internet Explorer 8 to Edge Virtual Images
Problems with UAD
"It's worth re-iterating: it's very rarely a good idea to use user agent sniffing. You can almost always find a better, more broadly compatible way to solve your problem!"
- Developers add UAD to their projects.
- Browsers implements new features.
- UADs not updated, and browsers spoof agent string.
CSS Feature Detection
"Feature detection (also feature testing) is a technique used in web development for handling differences between runtime environments (typically web browsers or user agents), by programmatically testing for clues that the environment may or may not offer certain functionality. This information is then used to make the application adapt in some way to suit the environment: to make use of certain APIs, or tailor for
@supports
-
Modern browsers have CSS conditional rules.
-
Allow us to test for conditions in our CSS.
- Latest iteration, module level 3, implemented by the Cascading Style Sheets Working Group adds native CSS Feature Queries.
- Similar to @import, @document or @media.
-
if / and / or / not
Limits of @supports
-
Is itself a CSS feature
- Only supports CSS properties
Modernizr
-
Open-source JavaScript polyfill, named Modernizr
-
Paul Irish from Google and Alex Sexton from Stripe.
-
Name is super confusing.
<html class="js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">Modernizr 3.0
-
No longer able to download a base modernizr.js file.
-
Have to use their wizard to generate custom file.
-
In response to increasing focus on performance.
Emulate @supports logic
/* default */
.generatedcontent input { }
/* 'or' operator */
.csstransforms3d strong, .generatedcontent input { }
/* 'and' operator */
.csstransforms3d.generatedcontent input { }
/* 'not' operator */
.no-generatedcontent input { }Why use @supports at all?
-
"meant from day one to eventually become unnecessary".
-
Render blocking, massive impact on page load time
-
150+ test, but does not cover every property.
return !!(document.createElement('canvas').getContext && document.createElement('canvas').getContext('2d'));Hybrid Approach
-
93.42% global coverage and 87.52% SA users
- Determined by core experience and users.
@supports in 2021?
CSS in JS
-
CSS in JS is very contentious.
-
Careful to not make claim on the validity of CSS in JS.
-
Regardless interesting to explore how CSS Feature detection might look in a world eaten by JavaScript, or even post-JavaScript world.
-
Showcases feature detection as a technique, as opposed to a tech specific tool.
Further Reading
Codebridge Shoutout
Suggestions?
- Chat with me at @schalkventer on ZA Tech.
- Do a pull request to this talk on Github at:
https://github.com/schalkventer/workshops-and-presentations/tree/master/css-feature-detection.
- More material at:
https://github.com/schalkventer/workshops-and-presentations.
- Please star on Github if found of value.
CSS feature detection
By Schalk Venter
CSS feature detection
How to use feature detection to ensure that styling from the frontiers of front-end development do not break older browsers.
