The Cross Browser CSS Styling Tips You Need to Know

The web could exist without the use of CSS, but it would never be as accessible or look as great without. As web designers, the main goal is to provide an innovative design that looks great in every web browser.

Because of the fact that there are still people that use older browsers such as IE7, using CSS to work across different browsers is still a tricky job – regardless where your site is hosted.

While a consistent appearance on every web browser is the key in providing a better user experience, it should be done carefully to avoid any cross-browser issues.

In this article you will learn about some of the important things you need to consider as a CSS beginner when building sites that work properly and look good in all browsers.

Use a CSS Reset

Web browsers behave differently – especially when it comes to reading basic HTML elements. Including a CSS reset in your style sheet will eliminate lots of potential cross-browser styling issues when viewed on different browsers. You can either create your own reset CSS, use the popular reset.css or normalize.css, which are available online. This is what the Meyer Resest looks like:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

Use Vendor Prefixes and Fallbacks

If you consider using CSS3 features such as gradients or border radius, it is important that you enable your styles to handle fallbacks – especially when a browser doesn’t support a CSS property.

Using vendor prefixes will let older browsers understand the fallbacks and skip the code that it can’t use. Otherwise, the new browsers will implement it on its platform.

The following is a list of vendor prefixes for each of the popular browsers.

  • -webkit- (Chrome, Safari, newer versions of Opera)
  • -moz- (Firefox)
  • -o- (Old versions of Opera)
  • -ms- (Internet Explorer)

Target IE Browsers Specifically

As we all know, Internet Explorer has caused many issues in the past. If you are having issues with IE8 or below, you might consider using IE conditional comments. They provide a mechanism that targets specific versions or IE as a group.

IE conditional comments are made up of HTML markup wrapped in a conditional statement. If the statement returns true, the enclosed HTML is shown within the HTML file.

Here’s a basic form of an IE conditional comment:

<!--[if IE ]>
<link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->

Here’s a conditional comment if you want to target all IE browsers except IE7 and above:

<!--[if lt IE 7 ]>
<p>Only less than IE 7 will see this</p>
<![endif]-->

Target IE versions greater than 6 or above:

<!--[if gte IE 6 ]>
<p>Only IE 6 and greater will see this</p>
<![endif]-->

You can also exclude one of the IE browser versions by using the (!) exclamation sign just before the IE version. See the code below:

<!--[if !IE 6]>
<p>IE7 or IE5 only</p>
<![endif]-->

If you want to learn more about this, I would recommend reading Sitepoint’s tutorial here.

Always Clear Floats

Clearing floats has been a widely used protocol in web development for several years. Using “clearfix methods” will let you fix the float issues on any web browser. There are two suggested methods you can use:

1. Using the clear property:

One of the most common ways to clear floats is by using the clear: both property and value which mimic the use of tables for layout. This usually goes with a defined class named clear. Check out the CSS example below:

.clear {
clear: both;
}

2. Using the overflow property:

Another great method to clear a float is to use the CSS property and value overflow: hidden to force the container of the elements to extend to the height of the elements that are floated. Consider this CSS:

.container {
overflow: hidden; 
}

Always Check CSS Display Types

CSS uses a display type for each element such as inline, block, inline-block, table, and many more. When you build within the W3C standards, mixing display types is common, but something to check on during the debugging process.

You can visit the MDN docs display page for a full list of the CSS display types.

Validate Your CSS

After setting up your CSS you can then validate your code via CSS Validation Service. This will help you debug some issues within your style sheet that can also prevent things from breaking on different browsers.

Use Cross-Browser Plugins

Apart from implementing some tricks to make sure that you will have the same page layout across multiple browsers, you can also use some good plugins to help browsers detect HTML5 and CSS3 features.

Some of them are on the list below:

  • Modernizr – a feature detection JavaScript library that lets the browser detect which HTML5 and CSS3 features your user’s browser supports. It enables developers to test for features supported and then provide fallbacks for browsers that do not support them.
  • CSS3Pie – enables a few features that are missing in IE such as CSS rounded corners and allows for the use of standard CSS code for these features in all browsers (including IE).
  • CSS Browser Selector – a very light JavaScript library that gives you the ability to write specific CSS code across different browsers.

Testing Tools

CSS tricks are nothing if you can’t test them on different browsers to make sure they work. Below are some useful cross-browser tools that are freely available over the Internet.

  • Quirksmode – a good place for hunting down cross-browser issues. It uses strict mode to interpret your CSS and gives an overview report of the possible issues.
  • Browsershots – helps show how your page will be displayed across multiple browsers and operating systems by taking screenshots of your web pages rendered on real browsers.
  • IE Tester – a free web app that enables you to see the look of your web pages within Internet Explorer 5.5, 6, 7, 8 and 9 in a MS Word-like interface.
  • Sauce Labs – a cross-browser testing tool for testing your site across different versions of browsers and operating systems. (Recommended by Adobe Systems).

Wrapping Up

There is so much more to discuss on the topic of cross-browser CSS. More than tricks and tools, you also need to consider knowing the foundations of CSS.

Cross-browser has been a big topic within the web development community from the very beginning as technology always improves and, almost every year, there are new browser versions coming out.

I hope that the tricks and tips in this article are helpful to your cross-browser journey.

Comments

  • Mignonne Maxwell

    Please don’t recommend using vendor prefixes — especially without spelling out the controversy and pitfalls surrounding their use. As web developers/designers it is our responsibility to move away from them or at minimum use them with extreme care and the intention to weed them out as soon as possible. Here’s a good article clarifying the issues: https://www.sitepoint.com/its-time-to-rethink-vendor-prefixes-in-css/

  • Kimberly Wright

    Thanks for these great tips, I’ll have to save these somewhere for future reference. Each browser is different and can have multiple solutions depending on the problems addressed. There’s no one solid answer. I knew about “Use Vendor Prefixes and Fallbacks” will help depending on the issue. There are a few basics you can learn that will help you with IE, but I’d never start with IE when it comes to coding. You can always go back in and tweak the code for IE anyway. I appreciate so much! Thanks!

  • dimko_desu

    1. Use normalize.css, not reset.css
    2. Use `autoprefixer` tool for vendor prefixes: https://www.npmjs.com/package/autoprefixer
    3. Use `micro clearfix` for clear floats: http://nicolasgallagher.com/micro-clearfix-hack/
    4. Validate your CSS with `stylelint`: http://stylelint.io/
    5. Use VirtualBox for testing under IE.
    6. ?????
    7. PROFIT

  • everdimension

    What’s this, an article from 2006? Who uses IE7? Yea, it’s still used in some corporate sector caves, but noone develops a new website with support for ie7. Likely not even ie8. Likely not even ie9! Supporting those browsers is almost considered a bad practice nowadays. And those who for some reasons still really need to support them don’t need introductory CSS articles like this one.

    CSS Reset? Why? There are specific usecases for it, but more than likely all you need is normalize.css. Otherwise you should explain the differences.

    Vendor prefixes? If you’re not using autoprefixer and are inserting vendor prefixes manually, you’re doing it wrong. The code you write will be unpleasant for everyone.

    Always clear floats? Why? Clear them when you need that.

    Validate your css“…. manually?! Who the hell does that? Your code should be automatically run through a project build/bundle tool which minifies it and of course validates it on the go and also warns you about bad styles/practices.