Tag Archives: progressive enhancement

Using @supports to detect if a browser supports CSS Variables

As tweeted by Ire Aderinokun: @supports (color: var(–)) { /* has support */ } Not too surprising if you’ve used Feature Queries before, but what does surprise me is that you can make it work by only passing the prefix … Continue reading

Original Content , , 2 Comments

Network based image loading using the Network Information API in Service Worker

Clever use of a service worker in combination with navigator.connection.effetiveType by Michael Scharnagl. The SW watches all requests for image resources, and rewrites them to high resolution versions in case navigator.connection.effetiveType is fast enough. Network based image loading using the … Continue reading

Elsewhere , , , Leave a comment

SQIP – SVG-Based Image Placeholder

In an in-depth analysis on how Medium loads up their images, José M. Pérez explains how their “blur-up technique” works: Display a resized version of the original at the original size, with a blur filter on top to hide the … Continue reading

Elsewhere , , , , Leave a comment

Check if a browser supports ES6

Great snippet by Benjamin De Cock: var supportsES6 = function() { try { new Function(“(a = 0) => a”); return true; } catch (err) { return false; } }(); The critical test is the a = 0. All browsers supporting … Continue reading

Elsewhere , , , 2 Comments

Adding “feature X is unsupported” warnings in your CSS Demos with @supports

Great tip from tuts+: When your CodePen demos rely on cutting edge CSS it’s a good idea to warn people. Let’s provide a notification when browsers don’t support our demos, using the @supports rule to make a handy reusable CodePen … Continue reading

Elsewhere , , Leave a comment

Using Feature Queries in CSS

There’s a good introduction to @supports on Mozilla Hacks: With @supports, you can write a small test in your CSS to see whether or not a particular “feature” (CSS property or value) is supported, and apply a block of code … Continue reading

Elsewhere , , 3 Comments

Enhancing Optimistically

Here’s how Filament Group enhances (or: used to) their website for browsers that “Cut the Mustard”: if( "querySelector" in window.document && "addEventListener" in window ){ // This is a capable browser, let's improve the UI further! window.document.documentElement.className += " enhanced"; … Continue reading

Elsewhere , Leave a comment

Progressive enhancement with handlers and enhancers

var handlers = { 'overlay' : function(e) { // This function is executed on click of any element with // 'overlay' in its data-handler attribute. // The click event is in 'e', $(this).attr('data-foo') holds the // … Continue reading

Elsewhere , , , Leave a comment


Chosen is a library for making long, unwieldy select boxes more user friendly. Also supports changing a multiple select list into a tag-style list, and doesn’t break keyboard functionality. Chosen →

Elsewhere , , , , Leave a comment

Grade components, not browsers

At Filament Group these days, we try to build our sites out of modular, independent components, and we document them for our clients that way as well. In taking a component-driven approach to building websites, we’ve found that the browser … Continue reading

Elsewhere , , Leave a comment