The Cross Browser CSS Styling Tips You Need to Know


By
CSS

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.

Related Topics


Top
This page may contain affiliate links. At no extra cost to you, we may earn a commission from any purchase via the links on our site. You can read our Disclosure Policy at any time.