Many of the support queries we receive relates to how can you ensure that your web page design is cross browser compatible. In other words instead of going through the entire development process, then testing my design in different browsers, what standard practices should I follow to ensure web site will render correctly once it is completed.
Well, unfortunately there is no foo proof method off course, but here are a few helpful tips/best practices that should get you pretty close at least.
First off - What is a web browser??
Simple question I know, but many people still get confused to exactly what a browser is and how it functions. An Internet browser (IE, Firefox, Safari, Opera and Google Chrome for example) is nothing more than a software application, similar to a text editor, anti-virus software or a computer game. Some of the confusion comes in because IE is embedded or very much part of the Microsoft Operating system(although Microsoft is starting to clearly separate the browser from the OS). A browser is NOT a search engine and it is NOT a website. A web browser renders/displays web pages that you visit/browse. Web browsers use different rendering engines, which means HTML, CSS and other code gets interpreted and thus differently by different web browsers. And that of course where the problem lies for website owners and web designers....Sure there are supposed standards like the W3C and such, which are supposedly followed by everyone, but for various reasons, which fall outside the scope of this article, the problem remains.
Cross-Browser Compatibility Best Practices
1. Know you web user - The first thing you need to do is understand who your customers and/or web browsers will be. In other words if you are developing for a closed environment like an intranet, then maybe 90% of your users will be Internet Explorer based or if it a design firm that only uses Apple Mac machines then maybe all the traffic is exclusively Safari. Bottom line is make sure you know what the most important browser demographic is for your web application. If you have no idea, industry browser usage statistics are available in the blog post here. I would recommend however that you use a tool like Google analytics to determine the usage statistics for your own site, as the numbers can vary substantially from target market to target market.
Why is it important to know what web browsers are most important for you? Well, it helps you ensure that you optimize your design and/or development for that particular browser and if you do have a cross-browser compatibility issue, you'll know exactly how many users are affected by it.
2. Doctype and standards compliance HTML/CSS - The structure of a web page is defined by markup language standards (HTML, XML and XHTML). The DOCTYPE descriptor tells the browser what document type definition to use in validating the structure and how strict to apply validation rules. The doctype tag is the first tag at the top of a HTML page. To ensure your page is cross-browser compatible it recommended to ALWAYS USE STRICT DOCTYPE and code your web page accordingly. This is fairly easy with new pages, but could be a nightmare for pages that have been developed over a long time, which might need to be re-coded or migrated. For more information about doctype's visit w3schools.
3. Avoid resizing images using CSS or HTML Code - we've all done it. An image doesn't fit the way it should, and instead of resizing the image in an image editor, we use the quick and dirty method, setting the width and height in code. Avoid doing so, IE is especially bad at resizing images in code, usually making the image look jagged edged or squashed. If you have to resize using code for whatever reason, try using the -ms-interpolation-mode: bicubic; CSS switch. It supposedly reduces the jaggedness.
4. Use a CSS reset at the start of your CSS - If you site relies heavily on CSS then it is highly recommended to reset/zero value your CSS. Yahoo developer tools have a helpful CSS reset file that you can use as well as some other helpful information. basically the reset file doesn't necessarily ensure browser compatibility, as much as it it ensures that your code renders the way it's supposed to, removing that extra line break or padding that you know you didn't include, but yet is displayed on your page.
5. Resize text as percentage - Size all your document text as a % within the body, and as em’s throughout the HTML page. This also is also good for accessibility as much as for browser cross compatibility. A good article on text sizing is available here.
6. Font rendering - Use -moz-opacity:0.99 on text elements to clean up rendering in Firefox, and text-shadow: #000 0 0 0 in Safari - Safari 3+ has an issue with the way it renders light type on a dark background. Some would argue whether this is good or bad, but there’s a way to make it appear lighter.
Easy fix.
You need to add this to your code.
p {text-shadow: #000 0 0 0;}
Where #000 is your background color. You will probably have to be more specific with the elements you select.
It is not recommended to use this fix on the body tag.
Other elements you might need to fix are the li, dt, dd, blockquote etc. Use this on any text element you want to appear ‘thinner’
To make this fix in Firefox, you use the opacity fix:
You need to be careful with this fix, as it will break any Flash element that it touches in Firefox. There appears to be no workaround for it.
7. Font Selection - Try use common fonts that you know are available in most opiating systems - For example Lucida have been known to render pretty badly in Internet Explorer, while rendering pretty well in Safari. Rather just avoid it and stick to fonts that are common to all operating systems.
8. Avoid using transparent PNG images - Internet explorer 6 does not support alpha transparency in PNG images. There are a few work arounds, which you can simply Google, most of them have a few side affects. One that I have used before is Twinhelix.
9. All layout divs that are floated should include display:inline and overflow:hidden - When you have a standard layout, with floats sitting next to each other, with set widths, but an image or long string of text is longer than this width, the layout could break in Internet Explorer 6. If you place overflow:hidden; into the layout divs, the layout shouldn't break.
10. Containers or container div's should have overflow:auto or overflow:hidden and trigger hasLayout via a width or height - This is to avoid circumstances where a div container does not wrap around all the containing div's like its supposed to. You can always test it by using a background image on the container. You’ll also need to make sure hasLayout is triggered in Internet Explorer 6. You can do this by specifying a width or height. If you don’t have a width in your div container, you can use height:1% to trigger it, or zoom:1; if you can’t afford to give it a height.
11. Avoid using the brand new CSS 3 selectors - many of the new CSS 3 selectors aren't supported by Internet Explorer 6. For a full list of supported selectors, check out evotech.net’s post on browser css selector support.
12. Test, Test and Test - test your site for cross-browser compatibility using the actual browsers and virtual machines or by using software such Multi-Browser Viewer. I would always recommend you test in the actual browsers like Internet explorer, Google Chrome, Firefox and opera when you first launch your site and use a service like Multi-browser Viewer to continually test your site over time for any major problems.
I would like to thanks ADM blog and webappers, which I also used for reference for this blog entry.
Location: PostList
