Tags: fallback

12

sparkline

I Used The Web For A Day With JavaScript Turned Off — Smashing Magazine

Following on from Charlie’s experiment last year, Chris Ashton has been assessing which sites rely on JavaScript, and which sites use it in a more defensive, resilient way. Some interesting results in here.

A good core experience is indicative of a well-structured web page, which, in turn, is usually a good sign for SEO and for accessibility. It’s usually a well designed web page, as the designer and developer have spent time and effort thinking about what’s truly core to the experience. Progressive enhancement means more robust experiences, with fewer bugs in production and fewer individual browser quirks, because we’re letting the platform do the job rather than trying to write it all from scratch.

Grid to Flex

Una has put together this handy one-pager of flexbox fallbacks for some common grid layouts.

How to use variable fonts in the real world | Clagnut

The gorgeous website for this year’s Ampersand conference might well be one of the first commercial uses of variable fonts in the wild. Here, Richard documents all the clever things Mark did to ensure good fallbacks for browsers that don’t yet support variable fonts.

Deploying ES2015+ Code in Production Today — Philip Walton

The reality is transpiling and including polyfills is quickly becoming the new norm. What’s unfortunate is this means billions of users are getting trillions of bytes sent over the wire unnecessarily to browsers that would have been perfectly capable of running the untranspiled code natively.

Phil has a solution: serve up your modern JavaScript using script type="module" and put your transpiled fallback in script nomodule.

Most developers think of <script type="module"> as way to load ES modules (and of course this is true), but <script type="module"> also has a more immediate and practical use-case—loading regular JavaScript files with ES2015+ features and knowing the browser can handle it!

If you really dislike FOUT, `font-display: optional` might be your jam | CSS-Tricks

Everyone’s been talking about font-display: swap as a way of taking the pain out of loading web fonts, but here Chris looks at font-display: optional and font-display: fallback as well.

CSS and progressive enhancement | justmarkup

A nice look at the fallbacks that are built into CSS.

» Service Workers at Scale, Part II: Handling Fallback Resources Cloud Four Blog

This ongoing series about the nuts’n’bolts of implementing Service Workers is really good. This one is great for getting to grips with the cache API.

A Complete Guide to SVG Fallbacks | CSS-Tricks

An up-to-date round-up of the various techniques available when you want to provide a fallback for SVG.

Better SVG Fallback and Art Direction With The <picture> Element

Smart thinking from Sara on providing a PNG fallback to browsers that don’t support SVG. Although, actually what I like about this solution is that it’s less about providing PNG as a fallback, and more about treating PNG as the baseline and SVG as the enhancement (an approach that the picture element is perfect for).

SVG Fallbacks | CSS-Tricks

Alas, that clever SVG fallback trick I linked to a couple of days ago has some unexpected performance side-effects.

SVG and image tag tricks

A very, very clever hack to provide fallback images to browsers that don’t support SVG. Smart.

FFFFALLBACK - A simple tool for bulletproof web typography.

A useful bookmarklet that suggests font stacks to match up with the web fonts on whatever page you happen to be viewing.