@alterebro

The Flux Capacitor js es un inspector de las capacidades del navegador por medio de la detección de objetos.
La idea de su funcionamiento esta basado en la mejora progresiva, teniendo un documento con una hoja de estilos básica la cual serviria para los navegadores limitados, al hacer el checkeo de las capacidades del navegador con javascript se pueden cargar hojas de estilo con CSS más avanzado y/o scripts externos para mejorar el comportamiento de la página en función del soporte que muestra el browser.
De este modo, siempre tendremos nuestra página básica operativa, y en caso que el navegador tenga capacidad de scripting más avanzados como canvas, XHR/AJAX y compatible con el W3 DOM poder cargar y añadirle hojas de estilo y scripts externos gradualmente.

var check = {
 object : function(obj) {
  try {
   obj = eval(obj);
   return !!obj;
  } catch (e) { return false; }
  return false;
 },
 xmlhttp : function() {
  return this.object("window.XMLHttpRequest");
 },
 canvas : function() {
  return (
   this.object("document.createElement('canvas').getContext('2d')") &&
   this.object("document.createElement('canvas').getContext")
  );
 },
 xhr : function() {
  var xhr = false;
   try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); }
   catch (e) { try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); }
   catch (e) { try { xhr = new XMLHttpRequest(); }
   catch (e) { xhr = false; }}}
  if (!xhr) { return false; } else { return true; }
 },
 dom : function() {
  return (
   this.object("document.getElementById") &&
   this.object("document.getElementsByTagName") &&
   this.object("document.createElement") &&
   this.object("document.createTextNode") &&
   this.object("document.createAttribute")
  );
 }
} 

var attach = {
 css : function(path, media) {
  var css = document.createElement('link');
  css.setAttribute('rel', 'stylesheet');
  css.setAttribute('type', 'text/css');
  css.setAttribute('href', path);

  var css_media = (arguments.length == 2) ? media : 'all';
  css.setAttribute('media', css_media); 

  document.getElementsByTagName('head')[0].appendChild(css);
 },
 js : function(path) {
  var js = document.createElement('script');
  js.setAttribute('type', 'text/javascript');
  js.setAttribute('src', path);

  document.getElementsByTagName('head')[0].appendChild(js);
 },
 unattach : function(id) {
  document.getElementsByTagName('head')[0].removeChild(document.getElementById(id));
 }
}

if (check.dom()) {
 // full css loading
 attach.unattach('basic-css');
 attach.css('css/advanced-common.css','screen');
 attach.css('css/advanced-iphone.css','only screen and (max-device-width: 480px)');

 // powerful javascript ajax based here!
 if (check.xmlhttp() && check.xhr()) {
  attach.js('js/script.js');
 }
}

Etiquetas: javascript, mejora progresiva