CSS Cross-Browser Compatibility Tip

Browser Screenshot Online Tool to verify CSSDecember 13th, 2007

« Prevent WP-Cache from Caching indexWordPress What Is This Plugin »

I’ve been trying to master CSS for a number of years, and rely on it heavily for every web design project I am involved in. An issue that was more important in the past but still huge today is the difference between how the various browser rendering engines and DOM engines process CSS. Basically, an WHTML Strict (the only way I code) web page can look dramatically different depending on which browser is viewing it.

Just last week I finished up an online Webinar Registration form for one of regular clients, and proceeded to send an invitation to register out to hundreds of qualified leads. I received feedback from a couple of the leads using the registration form that they were having problems seeing the submission button/image to complete the registration. I instantly realized that the problem could only be occuring because of CSS issues. These particular leads were using old versions of Apples’ Safari web browser and even a version of Internet Explorer dating from the stone-age. The problem was how floated elements, cleared elements, and block level vs. inline elements are displayed in those browsers. The fix was very simple and only took me a minute or 2, but it highlighted that I have become a little to confident in my CSS cross-browser-compatibility skills.

What I used to do when I was still learning CSS was to check the web page in each of the various problematic browsers to make sure the display stayed the same. I have several actual machines and several vmware virtual machines running various browers but I decided to skip all that extra time and effort and just use an online tool to do it for me. The tool views my page in all the various browsers and generates a screenshot image from each browser so that I can see if there are issues with my CSS.

Browsershots

Browsershots makes screenshots of your web design in different browsers. It is a free open-source online service created by Johann C. Rocholl. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the central server here.

Below are the actual screenshots generated from Browsershots, and so this tool is incredibly helpful in verifying my sites as cross-browser compatible.

« Prevent WP-Cache from Caching indexWordPress What Is This Plugin »