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.
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
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
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.