Cross browser compatibility (FireFox, Internet Explorer, Opera, Safari)

Tools for managing inconsistencies in your theme

  1. We recommend you start with a standards compliant browser for your themes such as Firefox. Firefox allows you to highlight portions of your web page and right click view selected source to understand what your themes CSS classes are. Understanding how CSS classes for you theme are applied to the underlying xhtml is the key to understanding your theme.
  2. Use standard CSS naming conventions. We recommend adopting these naming conventions for you CSS classes.
  3. Select a valid DOCTYPE type for your theme and include a DocType Declaration(DTD).
  4. To help in analyzing your HTML and CSS we recommend you install the Firebug plugin for Firefox. It is an invaluable tool that allows you to look at your css and html and change it in real time to evaluate the effects of your changes. Another very useful Firefox plugin is the Web Developer toolbar. This has tons of handy utilities.
  5. The view formatted source extension for FireFox displays formatted and color-coded source and optional CSS information for each element.
  6. Before you start modifying your CSS to fix your bugs it is important to ensure you are styling valid HTML or xHTML. There is a web validator built into the Firefox Web Developer toolbar. Opera has built in validation, just press Ctrl+Alt+V.
  7. A more advanced tool for analyzing HTML pages for looking over code, spotting errors is the Watchfire WebXACT tool.
  8. If you find a problem with invalid XHTML in a module file an issue and include screenshots showing how this causes problems in the theme.
  9. To see how your site will look to search engines you can use Lynx viewer.
  10. Positioning problems in your site with Internet Explorer can be resolved using these references: Position Everything Internet Explorer Primer
  11. A library of examples of problems can be found at Quirks mode.

It's hard to check your theme in all browsers. There are a number of tools which are available to help look at your theme in multiple browsers.

  1. Browser Shots is freely available but can take a while to get your screenshots.
  2. BrowserCam is paid service with a 24 hour trial.

On Windows you can use Internet Explorer and download Firefox or Opera. On Linux you can use Konqueror, a KHTML based browser, which Safari uses on MacOS, Opera, Firefox for Linux, and Internet Explorer can be run under WINE. On Mac OSX you can use Safari and download Firefox or Opera.

cool news Trik-Tips Blog