Detekce předpony dodavatele pomocí JavaScriptu

Bez ohledu na náš postoj k předponám dodavatelů s nimi musíme žít a občas je používat, aby věci fungovaly. Tyto předpony lze použít ve dvou formátech: formát CSS (-moz- , jako v -moz-element ) a formát JS (navigator.mozApps ). Úžasný projekt X-Tag má chytré kouzlo JavaScriptu, který detekuje tyto předpony v prostředí prohlížeče – dovolte mi, abych vám ukázal, jak to funguje!

Zobrazit ukázku

JavaScript

Prvním krokem je načtení CSSStyleDeclaration prvku HTML :

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

Dalším krokem je převod na Array objekt a hledání známého typu prefixu, pokud není nalezen žádný, usadí se v Opeře:

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

S nalezenou předponou CSS je získání předpony ve formátu JS jednoduché:

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

Vrácený objekt poskytuje objekt, který vypadá asi takto:

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

Kompletní znázornění předpony dodavatele pro hostitelský prohlížeč. Zde je úplný úryvek:

var prefix = (function () {
  var styles = window.getComputedStyle(document.documentElement, ''),
    pre = (Array.prototype.slice
      .call(styles)
      .join('') 
      .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
    )[1],
    dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1];
  return {
    dom: dom,
    lowercase: pre,
    css: '-' + pre + '-',
    js: pre[0].toUpperCase() + pre.substr(1)
  };
})();
Zobrazit ukázku

Chytání CSSStyleDeclaration z elementu HTML je chytrý tah. Tato metoda vychází ze skutečnosti, že v deklaraci stylu bude vždy existovat vlastnost s předponou dodavatele, která se některým nemusí líbit, ale bude účinná ještě dlouhou dobu. Co si myslíte o této metodě detekce prefixu dodavatele? Podělte se o své myšlenky!