html-fallback-content.md

HTML fallback content

Wouldn't it have been nice if HTML had fully embraced the approach it takes for iframe and object tags by having fallback content for other elements.

Images could have not only alt text, but also fallback images.

<img src="banana.png">
  A very tasty banana
</img>

<img src="banana.svg">
  <img src="banana.png">
    A very tasty banana
  </img>
</img>

Script tags could have fallback script which is executed when the specified source script fails to load, or as usual if there is no source specified.

<script src="doSomething.js">
  alert("A script failed to load, something really bad might happen, just sayin'");
</script>

And while we're at it, couldn't we have avoided using separate link and style elements for remote and local stylesheets. Put a src attribute on the style element and fallback to using its content.

<style src="pretty.css">
  body {
    display: none;
  }
  
  html:after {
    content: "oh man, I'm not gonna show you this page without the pretty styles."
  }
</style>

I'm confident these ideas are not at all original, but I thought I'd write them down anyway.

Related:

• I'd like to propose a new, optional HTML tag: IMG (Marc Anderssen)
• <noscript>
• Because Firebox does not support MP3 due to licensing issues:

<audio controls preload="auto" autobuffer> 
  <source src="elvis.mp3" />
  <source src="elvis.ogg" />
  <!-- now include flash fall back -->
</audio>

Even less related:

• rendering pages in <1 second on mobile (Chrome Developers)
• Economic feasibility, pressure from stakeholders, pareto principle and market breakdown - do we really want to provide fallbacks? (screw IE6 users, so obsolete, won't buy anyway)
• IE7 tax marketing stunt

Slightly more via HTML5 Boilerplate:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>