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!
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!