# Find the vendor prefix of the current browser

DevFeed: [Find the vendor prefix of the current browser](<https://devfeed.tech/articles/find-the-vendor-prefix-of-the-current-browser-51936.md>)

Original publisher: [Read original article](<https://lea.verou.me/2009/02/find-the-vendor-prefix-of-the-current-browser/>)

Author: Lea Verou

Published: 2009-02-13T00:00:00Z

Content type: tutorial

Language: en

Sources: [Lea Verou's blog](<https://devfeed.tech/sources/lea-verou-s-blog.md>)

Topics: [browser](<https://devfeed.tech/topics/browser.md>), [CSS](<https://devfeed.tech/topics/css.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [WebKit](<https://devfeed.tech/topics/webkit.md>), [web-standards](<https://devfeed.tech/topics/web-standards.md>)

Tags: [blog](<https://devfeed.tech/tags/blog.md>), [browser](<https://devfeed.tech/tags/browser.md>), [bug](<https://devfeed.tech/tags/bug.md>), [css](<https://devfeed.tech/tags/css.md>), [css-properties](<https://devfeed.tech/tags/css-properties.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [js](<https://devfeed.tech/tags/js.md>), [original](<https://devfeed.tech/tags/original.md>), [vendor-prefixes](<https://devfeed.tech/tags/vendor-prefixes.md>), [webkit](<https://devfeed.tech/tags/webkit.md>), [webkit-bugs](<https://devfeed.tech/tags/webkit-bugs.md>)

## AI overview

A tutorial explains how to detect the current browser's vendor prefix in JavaScript by inspecting supported style properties. It covers CSS-to-JavaScript property-name conversion, a cached detection function, and a WebKit-specific enumeration issue.

## Source excerpt

As you probably know already, when browsers implement an experimental or proprietary CSS property, they prefix it with their "vendor prefix", so that 1) it doesn't collide with other properties and 2) you can choose whether to use it or not in that particular browser, since it's support might be wrong or incomplete. When writing CSS you probably just include all properties and rest in peace, since browsers ignore properties they don't know. However, when changing a style via javascript it's quite a waste to do that. Instead of iterating over all possible vendor prefixes every time to test if a prefixed version of a specific property is supported, we can create a function that returns the current browser's prefix and caches the result, so that no redundant iterations are performed afterwards. How can we create such a function though? Things to consider The way CSS properties are converted their JS counterparts: Every character after a dash is capitalized, and all others are lowercase. The only exception is the new -ms- prefixed properties: Microsoft did it again and made their JS counterparts start with a lowercase m! Vendor prefixes always start with a dash and end with a dash Normal CSS properties never start with a dash Algorithm Iterate over all supported properties and find one that starts with a known prefix. Return the prefix. If no property that starts with a known prefix was found, return the empty string. JavaScript code function getVendorPrefix() { var regex = /^(Moz|Webkit|Khtml|O|ms|Icab)(?=[A-Z])/; var someScript = document.getElementsByTagName('script')[0]; for(var prop in someScript.style) { if(regex.test(prop)) { // test is faster than match, so it's better to perform // that on the lot and match only when necessary return prop.match(regex)[0]; } } // Nothing found so far? return ''; } Caution: Don't try to use someScript.style.hasOwnProperty(prop). It's missing on purpose, since if these properties aren't set on the particular element, hasOwnPropert