Which Browsers Should You Use for HTML5 and CSS3 Programming?

By Andy Harris

The browser is the primary tool of the web. So for HTML5 and CSS3 programming, you should have a working knowledge because all your users view your page with one browser or another.

Microsoft Internet Explorer 10

Microsoft Internet Explorer (IE) remains a dominant player on the Internet. Explorer is still extremely prevalent because it comes installed with Microsoft Windows. Of course, it also works exclusively with Microsoft Windows. Mac and Linux aren’t supported.

Version 10 of IE finally has respectable for the major parts of the HTML5 standard. If you write pages according to the version of HTML5, you can expect your page to work well in IE10. Most features will also work in IE9, but not all.

Older versions of Internet Explorer

The earlier versions of IE are still extremely important because so many computers out there don’t have 10 installed yet. Version 6 was the dominant player in the Internet for some time, and it refuses to die. However, it will not play well with modern standards, so it’s considered obsolete by most developers.

Mozilla Firefox

Firefox is a major improvement on IE from a programmer’s point of view, for the following reasons:

  • Better code view: If you view the HTML code of a page, you see the code in a special window. The code has syntax coloring, which makes it easy to read. Some versions of IE display code in Notepad, which is confusing because you think you can edit the code, but you’re simply editing a copy.

  • Better error-handling: You’ll make mistakes. Generally, Firefox does a better job of pointing out errors than IE, especially when you begin using JavaScript and other advanced technologies.

  • Great extensions: Firefox has some wonderful extensions that make web development a lot easier. These extensions allow you to modify your code on the fly, automatically validate your code, and explore the structure of your page dynamically.

  • Multi-platform support: IE works only on the Windows operating system, so it isn’t available to Mac or Linux users. Even if you’re a Windows-only developer, your users may use something else, so you need to know how the other browsers see things.

WebKit/Safari

The default browser for Mac and the iPhone/iPad Operating System (iOS) is called Safari. It’s a powerful browser built on the WebKit rendering engine. Safari was designed with standards-compliance and speed in mind. Your Mac and iOS users will almost certainly be using Safari, so you should know something about it. Chrome uses WebKit as well, so if things look good on Chrome, you’re likely fine with your Apple users.

Google Chrome

Google sees the future of computing in browser-based applications using AJAX technologies. The Chrome browser is extremely fast, especially in the JavaScript technology that serves as the foundation to this strategy. In addition, Chrome has a number of developer toolkits that makes it the hands-down favorite browser for many web developers. Here are the highlights:

  • Real-time page editing: You can go to any web page, right click ‘inspect this element’ and modify the text of that element in real time. You can then see what the element looks like with new content. You can select a part of the page to see which page corresponds to the code, and you can select the code and see which part of the page that code represents.

    image0.jpg

  • Page Outline: A well-designed web page is created in outline form, with various elements nested inside each other. The elements view allows you to see the web page in this format, with the ability to collapse and expand elements to see your page’s structure clearly.

  • Realtime CSS Edit: As you discover how to apply CSS styles, you’ll want to be able to see how various CSS rules change your page. In the Inspect Element view, you can highlight a part of your page and change the CSS while seeing how the change affects your page in real time.

  • Network Tab: This feature allows you to examine how long each piece of your page takes to load. It can be helpful for troubleshooting a slow-loading page.

  • Sources View: This allows you to see the complete code of your page. It’s especially useful when you get to JavaScript programming because it includes a powerful debugging suite.

  • Console: The console view is a little command-line tool integrated directly into your browser. This can be very helpful because it often shows errors that are otherwise hidden from view. The console is most useful when using JavaScript.

Other notable browsers

Firefox and IE are the big players in the browser world, but they certainly aren’t the only browsers you will encounter.

Opera

The Opera web browser, one of the earliest standards-compliant browsers, is a technically solid browser that has never been widely used. If you design your pages with strict compliance in mind, users with Opera have no problems accessing them. Opera has very good HTML5 compliance. Many gaming consoles and mobile devices have browsers based on Opera, so it’s worth looking into.

WebKit/Safari

Apple includes a web browser in all recent versions of Mac OS. The current incarnation — Safari — is an excellent standards-compliant browser. Safari was originally designed only for the Mac, but a Windows version is also available. The WebKit framework, the foundation for Safari, is used in a number of other online applications, mainly on the Mac. A modified version of Safari is the foundation of the browsers on iOS.

Text-only browsers

Some browsers that don’t display any graphics at all (such as Lynx) are intended for the old command-line interfaces. While seemingly irrelevant, these browsers are incredibly fast because they don’t display graphics. Auditory browsers read the contents of web pages. They were originally intended for people with visual disabilities, but people without any disabilities often use them also. Fire Vox is a variant of Firefox that reads web pages aloud.