Posts Tagged ‘css’

An approach to cross browser compatibility

Post by: John - 14.10.2008 - Posted in Browser Stuff, HTML

Some browsers make our lives a misery with their varying standards, different box models and lack of support for the shiny new tools we keep being offered. This is not a guide or tutorial but an insight into some of the problems you may face with cross browser compatibility and how to approach them.

It’s sad to say that around 20% of the users on the internet are still sitting at home or work with Internet Explorer 6. I pick on this browser because is it the bane of my life with my experiences today being on exception. I spent over half the day trying to get a complex drop shadow design using PNG’s to work.

I am ashamed to admit it beat me and I resolved the problem by creating an Internet Explorer 6 style sheet using jpegs for the background images. This also required to solve the problem with the box model Internet Explorer 6 implements.

It isn’t just Internet Explorer that causes problems when creating a new website all browsers have their own little quirks and ways of doing things. Another factor to consider is the operating system the user is working on Windows always seems to render fonts slightly bigger than Mac etc…

When you need cross browser compatibility you need it within the foundations of your site. It is not cost or time effective to try to make your site compatible after you have put all the hard work in making it look perfect in your browser of choice.

Start with markup:

Content if the foundation of your site despite some of you designers out there wanting your beautiful design to be the feature of the site. It is not what the user keeps coming back for. HTML (Hypertext Markup Language) is exactly what it states in its name MARKUP.

This is where I rant about semantics and how important they are. HTML has a fairly strict syntax of tags to mark up the content of our websites. H1-H6 provide us with a layered approach to headings allowing us to specify a hierarchy of content within our site. P provides us with the ability to specify paragraphs rather than having a mountain of <br/> tags giving little structure to any content. The list goes on and this is how you should structure your content before you even think about how your design is going to work into the markup.

So to recap over my waffling: Write your markup around your content (or test content) before you even think about CSS or design. Also use xHTML strict. Transitional is a cop-out!

Most importantly use a doctype

Prepare with CSS:

A CSS layout doesn’t mean loads of DIV tags to put your content into your design. CSS is about separating content, design and functionality. Separating these provides a layered approach for any user allowing their setup to give them as much or little functionality as they want without impacting on the value of the content.

Every style sheet I write starts with

*{
border:0;
margin:0;
padding:0;
}

This clears all the horrible, varying default margins, padding and borders added by each browser. By doing this you decrease the chance of areas of your site being about by the default values that each browser implements.

Where possible when naming your styles use names based on its content over its location on the page this allows future flexibility with minimal work especially if you wanted to move a section of content from one column to another. This isn’t a cross browser tip but is comes in handy later down the line.

Understand your browsers and accommodating to their differences:

So you have your semantic xHTML and have styled up your content with your CSS but things just don’t seem to be displaying right when you jump from browser to browser. This is pretty much inevitable when building a new site and you have to start using different techniques to get some of the browsers to display your content is a format which is both visually appealing and usable.

The most common method is by using hacks. We all hate using them and it makes us feel dirty but over the years I have come to accept that I have to use them to accommodate for as many users as possible. My preferred method is to use a conditional comment and separate style sheet to adjust my current styles.

<!--[if IE 6]>
<link rel='stylesheet' href='/styles/mysite-ie6.css' type='text/css' media='all' />
<![endif]-->

This provides a clean and effective way of working with Internet Explorer 6 without having to use unconventional methods that could interfere with future browser releases. The same methodology can be applied to other browsers as well but the need for them is generally lower than Internet Explorer 6. Most current up to date browsers work on the same basic principals and box models with slight variations and adjustments to your CSS can get a consistent layout/design across different browsers and platforms.

Conclusion:

Rather than ramble on any more I have decided to put together a list of simple points to remember:

Design and Style around your content not the other way around
ALWAYS use a doctype otherwise browsers will be thrown into quirks mode
Semantically markup your content first. Don’t even think about design/styling.
Apply your styles to your content adding any extra markup such as div containers if required.
Use a standard browser such as Firefox and download the developer toolbar + firebug
I shouldn’t have to say this but: NEVER USE TABLES FOR LAYOUT
Always design/develop for the user not for yourself
Everyone has a different setup. More people than you realise are still on 1024×768 resolution and Internet Explorer 6.

Resources and useful links: