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 asset. New to Feature Queries (e.g. @supports)? Using Feature Queries in CSS will get you […]

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"; // load the enhanced scripting loadJS( "/path/to/enhancements.js" ); } But what if a browser is […]

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 // value of data-foo of the element the user clicked on }, 'another-function-name' : function(e) {} […]

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 features required to offer an A-Grade experience of a particular component become much easier to […]