Creating a browser specific design which uses browser specific tags, scripts and stylesheet selectors will create problems for your visitors who are not using the “right” browser.
Today we have Internet Explorer, Firefox, Safari and the new kid on the block, Google Chrome all fighting to be the most popular browser used by Internet users. This “Browser War” is similar to the early years of the Internet when Internet Explorer and Netscape were battling to do the same thing. The current battle of the browsers requires understanding how each browser interprets the HTML elements of a web page. In the past, it was a battle over using browser specific tags (elements) to create a more exciting browser.
These browser specific design techniques still are present on the Net. Whether it is a web page that uses browser specific tags, scripts or stylesheets or the web designer favours one browser over the other.
Where Did Browser Specific Tags Come From?
In the early days of the Internet there were two main browsers battling it out, Internet Explorer and Netscape. You may still see on older sites images saying:
Best viewed with Internet Explorer
Best viewed with Netscape
During this particular “Battle of the Browsers” each browser decided to create HTML tags (elements) that only work in their browser. This was an attempt to sway browser users over to their browser because of the special features it had. At that particular time, web designers either used a browser specific design or they had to do everything twice (Internet Explorer version and Netscape version) and use a script to determine which browser the visitor was using.
Even today you can find HTML tutorials, HTML editors and online HTML editors that still use these browser specific design techniques.
Today you can still find “Best Viewed With …” notes on web pages but now it is Firefox verses Internet Explorer.
What are Browser Specific Tags?
Browser specific tags (elements) are HTML elements that only work in a specific browser. For example, the marque set of HTML tags is specific to Internet Explorer. If a web page uses this set of tags, the marque text will not show when the visitor is using Netscape, Firefox or any other browser other than Internet Explorer.
Likewise, the Netscape blink set of tags only work in Netscape.
Netscape is gone now so if your web page design uses Netscape specific tags, those elements won’t work.
Here’s some lists of browser specific design elements:
An even better way to determine if the HTML elements you are using are cross-browser compatible is to check the list of HTML elements in the HTML specification. Note: If you are coding for XHTML you can still use these references as HTML 4.01 forms part of the XHTML specification.
Browser Specific Scripts
Browser specific scripts have the same problem as browser specific tags, they don’t work in the “other” browsers.
You can tell if the script you selected to use is browser specific by testing the web page in different browsers. If it does not work in all browsers, then it was written for a specific browser.
There is something called the Document Object Model (DOM) in play here. It’s a complicated subject to cover in this article but surfice it to say, Internet Explorer has it’s own DOM that the other browsers do not understand. If the script you choose uses the objects not listed in the Document Object Model (DOM) Specifications then it’s probably written using Internet Explorer specific DOM.
Browser Specific CSS (Cascading Stylesheet)
Just like browser specific tags and scripts, using browser specific CSS will cause problems in other browsers.
Over the years, there have been various Internet Explorer CSS workarounds (a.k.a. IE hacks) used.
These workarounds came about because Internet Explorer hasn’t always followed the W3C specifications. Now, Internet Explorer is coming closer to following these specifications so over time, these workaround hopefully won’t be required.
You do need to be careful when using these workarounds. As Internet Explorer works closer to being standards compliant, those workarounds you are using just might not work in the future. Example: There were a lot of workarounds used while IE6 was around. When IE 7 came out, there were a lot of web pages broken because of the hacks included to manipulate IE6.
Browser Specific Design Problems
If the web designer chooses to use a browser specific design:
- It just might not work in the other browsers
- You stand the chance of annoying potential customers if they can not use your website.
- There is a higher maintenance cost involved as the browsers change.
To combat browser specific design problems, test your website in a many browsers as possible, old and new. Running each web page through the W3C’s HTML validator and CSS validator will help find browser specific elements and CSS techniques. While you are testing the web pages, and if they have scripts on them, you can also test for scripting errors.
Copyright © 2005 - 2017 Web Page Mistakes. All rights reserved.