Baldur Bjarnason @[email protected]
“Adactio: Links—The beauty of progressive enhancement - Manuel Matuzović” adactio.com/links/16838
Progressive Enhancement allows us to use the latest and greatest features HTML, CSS and JavaScript offer us, by providing a basic, but robust foundation for all.
Some great practical examples of progressive enhancement on one website:
type="module"
to enhance a form with JavaScript,picture
element to provide webp
images in HTML.All of those enhancements work great in modern browsers, but the underlying functionality is still available to a browser like Opera Mini on a feature phone.
“Adactio: Links—The beauty of progressive enhancement - Manuel Matuzović” adactio.com/links/16838
This is a great history of the idea of progressive enhancement:
It is an idea that has been lasting and enduring for two decades, and will continue.
I’m very glad to see that work has moved away from a separate selectmenu
element to instead enhancing the existing select
element—I could never see an upgrade path for selectmenu
, but now there are plenty of opportunities for progressive enhancement.
We’re all tired of: write some code, come back to it in six months, try to make it do more, and find the whole project is broken until you upgrade everything.
Progressive enhancement allows you to do the opposite: write some code, come back to it in six months, and it’s doing more than the day you wrote it!
In the same vein as that last link, Chris says what we’re all thinking:
Most of what we build is links from one page to another, and
form
submissions that send data from the browser to the server.
I’d like to suggest that everybody in web dev point their dysfunctional novelty seeking (of which I suffer as well) in the direction of HTML and CSS. See how much can be done without JavaScript. It’s a lot! Then look at writing more lightweight JavaScript that’s layered on top of the HTML as enhancements. Because it’s an enhancement and not required for functionality, you can cut the line higher and use newer tech without worry.
See how refreshing that feels.
Here’s Clearleft’s approach to browser support. You can use it too (it’s CC-licensed).
Here’s how I interpret the top-level guidance in the Web Content Accessibility Guidelines.
If a browser feature can be used as a progressive enhancement, you don’t have to wait for all browsers to support it.
The `details` element is like the TL;DR of markup.
I never would’ve known about the `display-mode` media feature if I hadn’t been writing about it.