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.

Free Resources