Browser Specific Design
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
or
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 - 2024 Web Page Mistakes. All rights reserved.
What's next?
Follow our new articles via RSS, follow us on Twitter and submit to your favourite social networking site:
April 20th, 2009 at 8:30 am
The one situation where browser specific design is generally OK though is on Intranets.
Most companies will use a standard browser and designing for a single browser is generally going to be less time consuming.
April 20th, 2009 at 11:37 pm
This is really important because most common problem internet users encounter regarding website design is that for example I open to FF browser and everything seems Ok..but when i will open in IE all page is messed up and not it alignment…
Thanks for bringing this up..it is a great help.
Cheers,
Jacob
May 10th, 2009 at 1:40 pm
I notice a lot of big companies do one or more of these things:
* Site only works on Microsoft Internet Explorer
* Site has browser-sniffing code and it won’t work if you spoof your useragent wrong
I hate sites doing that. They should use web standards and make it work for all browsers.
May 11th, 2009 at 2:14 pm
It is actually very interesting which browser will win the war: Firefox or IE? I guess, we will be able to see it pretty soon.
However, the best thing for now for web designers is to avoid including specific features available only with a specific browser. It will antagonize a huge part of visitors.
June 8th, 2009 at 2:08 am
I still remember the IE vs Netscape days. Now, Firefox seems to be putting up a good fight. Using browser-specific tags could be a mistake. The main purpose of creating a web page is so possible customers can gain knowledge about one’s company and access its products. If you use browser-specific tags, imagine how many potential customers you can lose just because the page doesn’t “look good” or clean for them.
Its interesting to see which one will win in the new battle of the browsers ^^
June 15th, 2009 at 7:05 pm
Re the browser specific CSS – you can comment out the IE6 specific css in your code so that only IE renders according to that CSS.
June 15th, 2009 at 7:15 pm
Yes, you can use conditional comments but that only clogs up your web page coding with coding that eventually will be antiquated.
What about those on Macs that are still using Internet Explorer?
June 18th, 2009 at 5:28 am
I am a designer but i have not heard about such things.This post has solved many of my problems and i am sure i will remove many of my weakness.
Thanks a lot.
June 22nd, 2009 at 7:00 pm
I have designed many website with cross browser functionality. But this is the first time I have got such a post where all the compatibility issues for browsers are discussed.
Thanks for sharing this information.
September 22nd, 2009 at 3:45 pm
Am new to these stuff but just started web designed and stuff and i think its really great information and when i read the other comments thought this is what i am looking for and how it would help me
thanks for the awesome information
October 1st, 2009 at 5:00 pm
HI. Very good information for the designers.the links are very helpful.My question is, could it possibly be a problem with some customers’ browsers or email programs? If so, please tell me specifically which browsers/programs/etc are troublesome that prevent select viewers from being able to use the site and specific solutions that can make the site user-friendly for everyone.
October 1st, 2009 at 7:26 pm
The problem stems from designers not making their designs cross-browser compatible not the end user’s browser or email program.
Preventing a visitor from viewing your site because they use a certain browser is not the solution. (Neither are those little nags that tell the visitor to change browsers or say best viewed with…)
The solution starts by using valid (X)HTML standards compliant coding and valid CSS coding then working from there to get the site to work in all browsers without hacks.
September 19th, 2010 at 9:23 pm
Very good information for the designers the links are very helpful. My question is, could it possibly be a problem with some customers’ browsers or email programs?
September 19th, 2010 at 11:39 pm
The customer should be able to use any browser they choose to.
May 5th, 2011 at 8:05 pm
It is true that Browser Specific Design can create problems when visitors don’t have the right browsers. That was cool stuff and very informative as well. Now I know how this can create problems and how to solve it. Thanks for this information.
May 12th, 2011 at 9:52 am
Browser specific scripts have the same problem as browser specific tags, they don’t work in the “other” browsers.
May 21st, 2011 at 11:29 pm
That’s true! If you are going to use a script on your website or blog you have to make sure it works in all browsers.
April 18th, 2012 at 1:33 am
Very true about compatibility with different web browsers. You’d be suprised at how many scripts work in IE but don’t work in Firefox.
May 2nd, 2012 at 11:21 pm
“Very true about compatibility with different web browsers. You’d be suprised at how many scripts work in IE but don’t work in Firefox.”
Thats why I would prefer my site to function well on FF than IE.
May 3rd, 2012 at 4:25 pm
What about the IE users? They don’t have money to spend?