Top 10 Practices For Cross-Browser Coding

Top 10 Practices For Cross-Browser Coding

Firefox, Chrome, Opera, Internet Explorer, Safari, Dolphin,…These are only a few of the browsers that desktop and mobile users can choose from. Web designers need to adapt to this wide range of choices by adopting cross-browser coding. Here are ten practices that will help you make your site look good with every browser.

Keep It Simple

Complex HTML or CSS code is more likely to cause problems. Structure your pages with a header, some columns and a footer. Avoid nested elements and sidebar boxes. Use the ul and li tags for your menus rather than p elements.

Always Validate Your Code

You can use tools like Html Validator or Firebug to validate your HTML, CSS or RSS code. These tools will help you find mistakes and will give you an idea of what your webpages will look like.

Avoid Quirk Mode

Browsers sometimes switch to quirk mode to show webpages without any issues. This means these pages are not shown in a standardized manner. Showing a page in quirk mode can cause some elements to look different. Always end your pages with a valid DOCTYPE and browsers won’t switch to quirk mode.

Start Your CSS File By Resetting Rules

Each browser has default values for the size of certain elements. You will have to rest these default values if you want a consistent web design across several browsers. Start your CSS file by resetting these rules.

Use Firefox

Firefox is the best browser to check your website because if a page looks good with Firefox, chances are that it will look good with other browsers as well. Besides, you can find many helpful Firefox add-ons for developers.

Test Your Pages

You need to thoroughly test your pages to find issues. Seeing each page with different browsers is time-consuming, but you can test your site by using an online testing service or by using tools like Quirksmode or IE Tester.

Add Conditional Comments

If a page is not properly displayed with IE, you can add some comments with IE-only markup. You can use this feature to add HTML or JavaScript code that will be displayed only by this browser.

Top 10 Practices For Cross-Browser Coding

Optimize Your PNG Images

Many web developers choose the PNG format for their images because there are over 250 degrees of transparency. The problem is that IE will not properly display these images. Use the IE PNG Fix tool to optimize your PNG images with IE6.


Add Some Fallbacks

Not all browsers support Flash and JavaScript. It is best to avoid using Flash for navigation elements. If you want to use Flash for videos or images, add tags to describe this content.

Take The Time To Hand Code

Automated coding tools help you save time but they are not flexible enough. Cross-browser coding requires you to make some tweaks. Use a text based page editor like CoffeeCup or Atom Sublime Text to make your job easier.

You can create clean code for every browser if you keep a few things in mind. Focus on creating simple pages, get rid of invalid code, test your pages and use the CSS box model. Keep track of which browsers your visitors tend to use the most and update your code when needed.

It's only fair to share...Share on Facebook
Share on Google+
Tweet about this on Twitter
Share on LinkedIn