Important Browser Specific CSS Properties You Should Be Aware Of

There are many different browsers being used this day in age. For the most part, browsers render CSS the same but there are a few instances where certain browsers just do not recognize some properties. This is where Cross-Browser Compatibility testing comes into play.

Sometimes, there is an easy fix to make the styles on a website to look the same across browsers. Today, the most common browser according to W3Schools, the browsers used most often currently are listed in the chart below:

browserstats

For now, I will ignore Internet Explorer as I will talk about how to use special instances for IE in a separate post.

Firefox has a special property prefix in some instances, this prefix is: -moz-

Similar to Firefox, Safari and Google Chrome are similar as in they both use webkit. The prefix for webkit properties is: -webkit-

Opera has a special property prefix in some instances, this prefix is: -o-

Below are important CSS/CSS3 properties to keep in mind while doing cross browser compatibility. These are the most common properties that can be easily rendered across browsers using these prefixes:

Border Radius (CSS3)

.RoundedCorners{

border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;

}

Border Radius can take one input for the radius measurement, or four inputs:

.RoundedCorners{

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

}

 

Box Shadow (CSS3)

.DivWithShadow{

box-shadow: 5px 5px 5px #333333;
-moz-box-shadow: 5px 5px 5px #333333;
-webkit-box-shadow: 5px 5px 5px #333333;
-o-box-shadow: 5px 5px 5px #333333;

}

Gradient (CSS3)

Below is a linear gradient from the top to the bottom:

.GradientDiv{

background: linear-gradient(red, blue);
background: -webkit-linear-gradient(red, blue);
background: -o-linear-gradient(red, blue);
background: -moz-linear-gradient(red, blue);

}

Below is a linear gradient from left to right:

.GradientDiv{

background: linear-gradient(left, red , blue); 
background: -o-linear-gradient(right, red, blue);
background: -moz-linear-gradient(right, red, blue);
background: -webkit-linear-gradient(to right, red , blue);

}

Below is a linear gradient that goes diagonally:

.GradientDiv{

background: linear-gradient(left top, red , blue);
background: -o-linear-gradient(bottom right, red, blue);
background: -moz-linear-gradient(bottom right, red, blue);
background: -webkit-linear-gradient(to bottom right, red , blue);

}

 

Animation (CSS3)

For this example we will do a simple CSS3 transition that changes the color of a link gradually from one color to another.

First we set the color of the link:

a:link{

color: #333333;

}

Then we set the hover with the transitions, time transitions should take place, and cross-browser properties:

a:hover {

 color: #FF0;
 transition: color 0.5s;
 -moz-transition-property: color;
 -webkit-transition-property: color;
 -o-transition-property: color;
 -moz-transition-duration: 0.5s;
 -webkit-transition-duration: 0.5s;
 -o-transition-duration: 0.5s;

}

 

Transform (CSS3)

For this example, we will use the transform property of rotate:

.TiltedDiv {

 transform: rotate(2deg);
 -moz-transform: rotate(2deg);
 -webkit-transform: rotate(2deg);

}

In the next post, I will explain how to detect, add custom CSS, or remove certain properties in Internet Explorer. Keep Coding!

Advertisements

3 Comments

  1. Pingback: Target IE Specificly in HTML/CSS Using Conditional Comments | Jordan Hauge on Design

  2. Pingback: Quick-fire CSS Solutions | SoshiTech

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