Morton 21 de marzo de 2013 a las 10.08
   Imprimir artículo
elWebmaster.com

C贸mo detectar prefijos propietarios con JavaScript


javascriptwide2M谩s all谩 de la opini贸n que tengamos de los prefijos propietarios, tenemos que vivir con ellos y ocasionalmente usarlo para que las cosas funcionen. Estos prefijos pueden ser usados de dos maneras: el formato CSS (por ejemplo “-moz-“, como en -moz-element) y el formato JS (“navigator.mozApps”). Pero aqu铆 te mostraremos una manera inteligente de detectar esos prefijos a traves de JavaScript.

Ver demostraci贸n >>

El primer paso es obtener el elemento HTML CSSStyleDeclaration:

  1. var styles = window.getComputedStyle(document.documentElement, ''),

El siguiente paso es convertirlo en un objeto array y buscar por un tipo de prefijo que sepamos:

  1. pre = (Array.prototype.slice
  2.       .call(styles)
  3.       .join('')
  4.       .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
  5.     )[1]

Con el prefijo CSS encontrado, tomar el prefijo con el formato JS es simple:

  1. return {
  2.     dom: dom,
  3.     lowercase: pre,
  4.     css: '-' + pre + '-',
  5.     js: pre[0].toUpperCase() + pre.substr(1)
  6.   }

El objeto devuelto nos provee de un objeto que se ve de la siguiente manera:

  1. Object {dom: "WebKit", lowercase: "webkit", css: "-webkit-", js: "Webkit"}

Una completa representaci贸n del prefijado propietario para el navegador anfitri贸n. Aqu铆 est谩 el c贸digo restante:

  1. var prefix = (function () {
  2.   var styles = window.getComputedStyle(document.documentElement, ''),
  3.     pre = (Array.prototype.slice
  4.       .call(styles)
  5.       .join('')
  6.       .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
  7.     )[1],
  8.     dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1];
  9.   return {
  10.     dom: dom,
  11.     lowercase: pre,
  12.     css: '-' + pre + '-',
  13.     js: pre[0].toUpperCase() + pre.substr(1)
  14.   };
  15. })();

Y eso es todo 隆Hasta la pr贸xima!

Ver demostraci贸n >>

Fuente original del art铆culo: David Walsh Blog
Traducci贸n realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (1)

  1. Luis dice:

    Serio que no entendi nada :/
    me falta aprender mucho de javascript u.u

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder