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

Change Opacity of Background Only

With the emergence of CSS3, many developers have stumbled across the CSS style for changing the opacity:

.lowOpacityDiv {
    opacity: .5;
}

It is very easy to institute as it accepts any number between .1 and 1 from lowest opacity to highest opacity. The unfortunate flaw of this method however, is that any content inside your <div> with the class of lowOpacityDiv will also be a lower opacity.

In many cases this is a problem because we may want the have a semi-transparent background on our <div>, but still want the content to be legible and have a 100% opacity.

The old fix for this was to upload a small .png file that had the desired opacity and set it as the background for the selected <div>. But there are a couple ways to use CSS3 to achieve this without using any image files. The first syntax uses RGBA (Red, Green, Blue, Alpha). The mark-up is simple and straight forward:

.lowOpacityDiv {
    background-color: RGBA(12, 13, 134, .5)
}

The above will output the RGB color code that you selected, with an opacity, or alpha channel, of 50%. There are many ways to find RGB color codes using hosted color pickers on various websites. Some easy to use color pickers for RGB syntax are:

http://www.colorpicker.com/

http://www.rapidtables.com/web/color/RGB_Color.htm

The second way to create a low opacity background in a <div> while keeping your content at a higher opacity is to use the HSLA method (Hue, Saturation, Light, Alpha). This syntax is put in the CSS just like the RGBA syntax:

.lowOpacityDiv {
    background-color: HSLA(126, 13%, 24%, .5)
}

The above will output the HSL color code that you selected, with an opacity, or alpha channel, of 50%. There are many ways to find HSL color codes using hosted color pickers on various websites. Some easy to use color pickers for HSL colors are:

http://www.hslpicker.com/

http://www.workwithcolor.com/hsl-color-picker-01.htm

Benefit

Using the methods mentioned above as opposed to using an image to achieve the same effect will help to decrease the load time of your page and in turn, having more people stay on your website. The longer the load time, the larger change you have of driving traffic away so this is definitely a great method to adopt for rendering lowered opacity backgrounds.

Browser Compatibility

The browser support for using this syntax on your projects is relatively high with FireFox, Opera, Safari, Chrome and IE 9 and above supporting it.

Thank you for stopping by!