CSS Browser Compatibility: What You Should Avoid

Whether you are a beginner or pro at CSS, you should always keep in mind a number of important things that needs to be paid attention when using CSS in your website, for compatibility concerns.

Below, I will list a number of points to keep in mind while styling your website with CSS. I will explain which browsers support or not each point. Note that as the browser versions change, the validity of the following points might change as well.

Don't Start ID or Class Names with a Number or Underscore

Starting an ID (#) or Class (.) name with a number or underscore ( _ ) is not supported by all browsers, therefore you should always start with a letter. Do not use the following:

#1section {
background: green;
}
.2part {
font-weight: bold;
}

/* or */

#_section {
background: green;
}
._part {
font-weight: bold;
}

Use the following:

#section1 {
background: green;
}
.part2 {
font-weight: bold;
}

/* or */

#section {
background: green;
}
.part {
font-weight: bold;
}

Starting with a number is supported in Internet Explorer but not in Chrome, Firefox and Safari. Starting with an underscore is supported in Chrome, Firefox and Safari but not in Internet Explorer.

Avoid Leaving Spaces Between Property Value and Unit

Actually, this works differently for various properties such as width and border but for the sake of being on the safe side, you should be careful about spaces between the property and the unit.

/* do not use */

#header {
width: 800 px;
}

/* use */

#header {
width: 800px;
}

Leaving spaces works in Chrome, Internet Explorer and Safari but not in Firefox. I should mention that it didn't work in Internet Explorer when I left space while using the border property.

Beware the Cascading Order of the Style Sheets

CSS styles cascade in the following order:

1. External Style Sheet
2. Internal Style Sheet
3. Inline Style

This means, the inline style will override other styles. And the internal style sheet will override the external style sheet. Note that if the external style sheet is referenced after the internal style sheet in the head section, it will have priority over the internal style sheet.

Color and Background Color

It is recommended that you should use the background-color property whenever you use the color property to comply with W3C. Although I don't use color and background-color together every time, you should note that compliance with the web standards as much as possible ensures the highest browser compatibility.

h1 {
color: black;
background-color: white;
}

Do Not Underline Text That is Not a Link

Underlined text in the online world is associated with links in general, that's why underlining text that is not a link is not recommended as it might cause confusion. If you really have to underline some text, make sure it is not with the same color of links.

Prefer Fonts from the Sans-Serif Family

Although serif fonts are better to read on printed paper in general, sans-serif fonts are better read on printed screen. Arial, Tahoma and Verdana are the mostly used sans-serif fonts on the web. This is not a rule but it wouldn't hurt to follow recommendations.

Use em Instead of pixels for Sizing

W3C recommends the use of em as a size unit instead of px, since there are some compatibility issues in older versions of Internet Explorer with px.

h1 {
font-size: 1.5em;
}

Know that the default text size in browsers is 16px which is equal to 1em. In that sense, 1.5em will be equal to 24px.

The above points are mostly recommended practices, you do not have to follow them. But if you want your web designs to be better compatible with multiple browsers, it's better to pay attention to them.

f t g+ in