CSS3 properties that no longer need browser -prefixes-

CSS uses so-called ‘vendor’ prefixes, which are browser-specific prefixes. They were introduced to support new CSS features before they became CSS3 standard.

If you check your existing projects’ CSS files you’ll most likely find something like:

-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-webkit-transform: translateY(-15px);
transform: translateY(-15px);

-moz-transform, -ms-transform, -webkit-transform and so on – are all vendor prefixes or CSS browser prefixes.

It’s okay if you still have those prefixes in your CSS styles. I still do, but I’m going to research and share what CSS attributes can be used as unprefixed.

Do we need CSS prefixes?

Yes but not all of them. Most of the up-to-date browsers support unprefixed CSS attributes. Here’s a list of CSS properties that DON’T need prefixes.

1. CSS3 Border-radius

CSS3 Border-radius (rounded corners) doesn’t need any prefixes! Yes, instead of writing:

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

You can just write:

border-radius: 10px;

Unprefixed border-radius is now supported by over 97% of all browsers (Opera mini doesn’t support this property yet but its global market share is 1.42%).

2. CSS3 Gradients

Gradients (linear-gradient and repeating-linear-gradient) are images that fade from one colour to another. They can be used unprefixed as the global browser support exceeds 96%.

background-image: linear-gradient(red, white);

3. CSS3 Opacity

CSS3 Opacity is a method of changing the transparency of an object. It can be used without prefixes as it’s supported by over 99% of the browsers (mobile and desktop).

opacity: 0.7;

4. CSS3 Box-shadow

CSS3 Box-shadow is a method of displaying an inner or outer shadow effect to elements. It can be used without CSS vendor prefixes.

box-shadow: 2px 4px #333;

5. CSS3 Animation

CSS3 Animation is a method of animating element properties. It can be unprefixed.

div {
  width: 200px;
  height: 200px;
  background-color: red;
  animation-name: example;
  animation-duration: 3s;
}

@keyframes example {
  from {background-color: red;}
  to {background-color: white;}
}

6. CSS3 Transition

CSS3 Transition method allows changing element property smoothly over a given period of time. Unprefixed property is supported by over 97% of all browsers.

transition: width 2s;

7. CSS3 Transform

CSS3 2D and 3D Transform methods can be unprefixed as they are supported by over 95% of all browsers.

transform: rotate(45deg);

Bonus

CSS3 hue, saturation and alpha lightness() and rgba() methods are supported by over 98% of all browsers. Therefore, you no longer need to worry that users won’t see alpha transparency.

If you find this post useful, please let me know in the comments below. 
Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/css-prefixes

PS: Make sure you check other CSS tutorials, e.g. Top 5 CSS frameworks for your Vue.js project (2019) and Sass (SCSS) mixins that I use with Vue.js & WordPress.

Incoming search terms: