JavaScript vendor prefixes

Written byPhuoc Nguyen

Created

07 Sep, 2022

With the same reason of prefixing CSS properties, the browsers also prefix JavaScript APIs in the experimental phase. The following table lists out prefixes of most popular browsers:

Prefix	Browser(s)
`moz`	Firefox
`ms`	Internet Explorer and Microsoft Edge before it uses the Chromium engine
`o`	The old versions of Opera before it uses the WebKit engine
`webkit`	Google Chrome, Safari, newer versions of Opera and Edge and almost iOS browsers

For example, we often used this code to determine if the `requestAnimationFrame` function exists historically:

window.requestAnimationFrame =
    window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame;

If you want to see a more complex scenario, then the full screen APIs might be a perfect example. Supporting full screen mode must cover the following functionalities:

Standard API	Description
`fullscreenEnabled`	Check if the full screen mode is enabled
`requestFullscreen`	Request browsers to enter the full screen mode
`fullscreenElement`	Return the full screen element
`fullscreenchange`	The event triggers when the full screen mode happens
`exitFullscreen`	Exit the full screen mode

We would like to have a wrapper supporting that interface:

enum Api {
    ExitFullScreen,
    FullScreenChange,
    FullScreenElement,
    FullScreenEnabled,
    RequestFullScreen,
}

type ApiMap = {
    [key in keyof typeof Api]: string;
};

Each browser provides a prefixed versions for each API:

const defaultVendor: ApiMap = {
    ExitFullScreen: 'exitFullscreen',
    FullScreenChange: 'fullscreenchange',
    FullScreenElement: 'fullscreenElement',
    FullScreenEnabled: 'fullscreenEnabled',
    RequestFullScreen: 'requestFullscreen',
};

const webkitVendor: ApiMap = {
    ExitFullScreen: 'webkitExitFullscreen',
    FullScreenChange: 'webkitfullscreenchange',
    FullScreenElement: 'webkitFullscreenElement',
    FullScreenEnabled: 'webkitFullscreenEnabled',
    RequestFullScreen: 'webkitRequestFullscreen',
};

const mozVendor: ApiMap = {
    ExitFullScreen: 'mozCancelFullScreen',
    FullScreenChange: 'mozfullscreenchange',
    FullScreenElement: 'mozFullScreenElement',
    FullScreenEnabled: 'mozFullScreenEnabled',
    RequestFullScreen: 'mozRequestFullScreen',
};

const msVendor: ApiMap = {
    ExitFullScreen: 'msExitFullscreen',
    FullScreenChange: 'msFullscreenChange',
    FullScreenElement: 'msFullscreenElement',
    FullScreenEnabled: 'msFullscreenEnabled',
    RequestFullScreen: 'msRequestFullscreen',
};

Finally, we can get the APIs set supported by the current browser:

const vendor: ApiMap =
    (Api.FullScreenEnabled in document && defaultVendor) ||
    (webkitVendor.FullScreenEnabled in document && webkitVendor) ||
    (msVendor.FullScreenEnabled in document && msVendor) ||
    defaultVendor;

Requesting the full screen mode for a given element can be invoked simply:

element[vendor.RequestFullScreen]();

#See also

CSS vendor prefixes

Create a JavaScript polyfill←

Questions? 🙋

Do you have any questions? Not just about this specific post, but about any topic in front-end development that you'd like to learn more about? If so, feel free to send me a message on Twitter or send me an email. You can find them at the bottom of this page.

I have a long list of upcoming posts, but your questions or ideas for the next one will be my top priority. Let's learn together! Sharing knowledge is the best way to grow 🥷.

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn

JavaScript vendor prefixes

#See also

Questions? 🙋

Recent posts ⚡

Newsletter 🔔