1. Firefox 3
2. IE 7
3. IE 6
4. Safari
5. Chrome
6. Opera

Now that IE 8 has been released, it will have to be added to the list as well. According to this blog, conditional browser statements and style-sheets can be used to set web pages to display as IE 7 pages within IE 8:

http://blogs.msdn.com/ie/archive/2008/03/09/using-the-emulate-ie7-button.aspx

http://blogs.msdn.com/ie/archive/2008/03/07/improved-productivity-through-internet-explorer-8-developer-tools.aspx

I find conditional style sheets the most effective way to manage cross browser issues, and generally create one style-sheet for both IE 6 and IE 7 to address the particular nature of those browsers.

For more information on Conditional Statements for IE Browsers, see:

http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx

For some time, I have actually been considering that it may be better to have a conditional style-sheet for every browser. I have been putting off implementing browser specific CSS code such as Mozilla extensions:

https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions

essentially because of principle. Imagine you purchased a calculator. On one calculator, 2 + 2 = 4, on another it is 4.1, on another 3.9, etc. Someone says, well you should run a slightly different set of values on this calculator, and a different set on this one, and you’ll end up with the correct value. That is the same as conditional style-sheets – they shouldn’t be necessary, because this is what the CSS is for – we made an exception for IE because the browsers had so many problems, but the movement should be in the other direction. Either way, I can see little way around them, but I still haven’t found a way to target Opera/Safari exclusively through this method either.

When it comes to cross-browser analysis and testing, I find these tools to be essential:

Firefox Browser:

1. Firebug
2. Web Developer
3. CSS Viewer
4. CSS Validator / W3C CSS Validator
5. HTML Validator

Internet Explorer Browsers:

1. Multiple IEs
2. IE Developer’s Toolbar

Safari:

1. Safari / Web Kit – Web Inspector

Chrome Browser:

1. Chrome / Web Kit – Web Inspector

Opera Browser:

1. Opera Dragonfly

I don’t know any web developer currently that is not using Firebug to inspect the CSS of div elements in a page and making CSS adjustments, it is really indispensable. The ‘Web Developer’ add-on has some powerful tools as well for inspection, div element outlining, CSS and HTML validation. Multiple IEs is great because it allows you to overcome the Windows restriction of only having one Microsoft browser version installed at one time – it even allows you to test as far back as IE 3.0. IE Developer’s Toolbar is not as good as Firebug, or even the Chrome debugging tool which is itself excellent. In fact, the Chrome debugging tool + JavaScript console is a worthy equivalent to Firebug in most areas, once you become accustomed to it. The Safari Toolbar seems basically identical to the Chrome kit. By the time it finally comes to testing in Opera, the Opera web development tools seem promising, but I rarely have the interest in getting involved too much on this platform.

With these tools – conditional style-sheets and browser-specific developer toolbars, you should be able to pull apart your CSS code enough to figure out where and why the small glitches are appearing in the display of web pages in the different browsers. While I would love to be able to write conditional style-sheets for every browser, to ensure pixel-perfect specific margins and details, I will continue to hope for more improvements like we have seen with FF3, IE8, Safari, & Chrome coming closer to a universal rendering of CSS values. Until then, these tools will remain for working out the small bugs and issues with cross browser display.

This is a post from Web Dev News, a site brought to you by Xavisys Web Development.

Conditional Statements, Cross-Browser Analysis, & Tools Bars for Web Developers

All of the html, css, php, javascript, or other files for a site would be listed in browser in a file management hierarchy familiar to anyone who has used a FTP program or CPanel. Clicking on the file would load it directly into the browser where it could be edited and then saved back to the disk, or in this instance the remote server. The “cloud” aspect is related to using the browser for this work, rather than a typical desktop application. As someone coding html files for over 13 years, this routine of working through multiple programs during the web publishing process could be transformed.

Bespin also enables collaborative authoring, editing, and file management for web development through a shared browser interface. The simplicity of the program leads to its expansion – if it can replace the desktop editor on your computer, then why not have everyone on the team use it and manage the publication of core site code files in the same manner… through Bespin? According to the developers, they are looking to improve upon Vi, Emacs, Textmate and IntelliJ IDEA.

“Accessible from anywhere – any device, any location
Simple to use like Textmate, an editor not an IDE
Wicked Fast – performance, performance, performance
Rock-solid real-time collaboration, like SubEthaEdit – it just works
Integrated command-line, like vi, fun like Quicksilver, social like Ubiquity
Self-hosted environment, like Emacs, for extreme extensibility, but with JavaScript”

The page referenced above, from Ajaxian, the development group behind Bespin, includes some great resources on the project and video of how to put it into use. I used a desktop FTP program for many years before switching to FireFTP, and have never been happier with a FTP program, so I can see how integrating browser based document editing for html, php, javascript, and css files could be excellent, especially if they can be drawn directly from the remote server into the browser, edited, and saved again without the need of FTP. This is the advantage of Bespin’s open source code – you can install and host it on your own servers, and modify it to meet your development needs.

It is in the latter, the open architecture leading to extensibility and new features from third party developers, where Bespin shows the most promise – this is the initial release of the program. For example, Bespin in it’s current form does not include WYSIWYG authoring of html documents like Dreamweaver or similar products, nor does it allow for in-browser preview of the page design. It is a code editor and file manager fusion that also includes a command line interface. From a developer’s perspective, if you add it to something like Basecamp’s features for communication and project management, Bespin could be a really powerful tool in a mash-up. If it becomes a modular platform that people actively develop for, and acquires “extensibility,” Bespin could be one of the first cloud apps to really change things.

Anyone who has been doing web design and web development professionally has probably become more or less ingrained in the way they do code editing, and the programs themselves become the basic canvas for daily work, like Photoshop & Illustrator for graphic design. I made the change from a desktop based FTP program to one running in FireFox as a plug-in based on reliability and functionality – FireFTP is rock solid. Would I likewise switch over from the combination of 4 different programs I use now for editing web files to using Bespin, another browser based application?

To be honest, a few of the content management systems I have used have an option to bring the CMS files themselves (css, php, index, etc) directly into the browser for editing, and this is handy. Bespin seems to be an extension of that trend, but I am probably too engrained with the patterns of my current work process and lacking the free time to put into installing and testing the application as my daily code editor for project work. If it easily installed, eliminated FTP layer, and had WYSIWYG html editing functions along with the ability to edit the code of web files directly from the server in the browser, with one click publishing of revisions, I would seriously consider using Bespin.

To find out more about the Bespin project at Mozilla Labs, visit:
https://bespin.mozilla.com/index.html

More on HTML 5 & Canvas:
https://developer.mozilla.org/en/Canvas_tutorial
http://en.wikipedia.org/wiki/Canvas_tag

This is a post from Web Dev News, a site brought to you by Xavisys Web Development.

Mozilla Labs Releases Bespin Beta: In-Browser Collaborative Code Editing