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!

Website Background Shifted to Left on Iphone5 / 4S (FIX)

Recently while developing a website for a local restaurant, I began testing on my Iphone 5 and found that although the content of the website was aligned center in the Safari browser viewport, the background seemed to be shifted over to the left, leaving a white block all the way down the right hand size of the website. After searching for a fix to this issue for a few hours I stumbled across an easy solution to the problem.

The Iphone 5 and, Iphone 4S both render a 1250px wide viewport. We must set this in our CSS using a @media query. We call our @media query at the end of our CSS page below our styles for desktop browsers. Anything that we put in the media query, depending on the size of media we specify, the @media query CSS will replace the original CSS. Thyis isĀ  the basic framework for responsive development.

The Iphone 5 / 4S @media query to fix your background and center it in your mobile browser looks like this:

@media only screen and (max-device-width: 480px) {
        body{width:1280px;}
    }

This will center your background in your Iphone browser viewport and make your website look good, even on the go!