How to implement browser prefixes using CSS

Overview

As a developer, it is beneficial to understand browser prefixes. New properties don’t work when used in the development, and this could cause a hinderance when writing codes. Browser prefixes were introduced to make non-standard CSSCascade Style Scaling properties and JavaScript APIsApplication Programming Interface work.

Prefixes

We have four major prefixes in development:

Prefixes	Browser compatibility
-webkit-	Chrome, Safari, newer versions of Opera, almost all iOS browsers including Firefox for iOS; any WebKit based browser
-moz-	Firefox
-O-	Old pre-WebKit versions of Opera
-ms-	Internet Explorer and Microsoft Edge

Usage

Browser prefixes are used to make non-standard properties work. Below is a sample usage to make the CSS transform property work on all browsers.

Syntax

The prefixes are used in this syntax:

---

-prefixe-property: value;

---

Code

Let’s look at the code below:

Explanation

Take a look at the CSS section:

• Line 11: We give mydiv the transform property with the browser prefix -webkit- which makes the property work on Chrome and other browsers that the -webkit- prefix is used for.

• Line 12: We give mydiv the transform property with the browser prefix -moz- which makes the property work on Firefox.

• Line 13: We give mydiv the transform property with the browser prefix -ms- which makes the property work on Internet Explorer and Microsoft Edge.

• Line 14: We give mydiv the transform property with the browser prefix -o- which makes the property work on Opera.