Leave a comment

CSS3 in multiple browsers without prefixing


To support CSS3 in multiple browsers I need to prefix several properties with browser specific codes.

For example the transition property:

Browser        Prefix    Example
-------------------------------------------
Firefox        -moz-     -moz-transition
Safari/Chrome  -webkit-  -webkit-transition
Opera          -o-       -o-transition

This leads to duplicate properties and clutters the code which is unwanted.

.garage .drive-in-garage .tyre {
  -webkit-animation: rotate-tyre 0.2s steps(1) 7;
  -moz-animation: rotate-tyre 0.2s steps(1) 7;
  -o-animation: rotate-tyre 0.2s steps(1) 7;
  animation: rotate-tyre 0.2s steps(1) 7;
}

I want to use the default CSS3 property and not worry about browser specific prefixes.

.garage .drive-in-garage .tyre {
  animation: rotate-tyre 0.2s steps(1) 7;
}

I found the solution in -prefix-free, a small script which makes coding CSS3 without prefixes possible.

Load this script right after your CSS files and you’re good to go, prefix free.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: