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


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:

  1. It just might not work in the other browsers
  2. You stand the chance of annoying potential customers if they can not use your website.
  3. 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.

What's next?

Follow our new articles via RSS, follow us on Twitter and submit to your favourite social networking site:

21 Responses to Browser Specific Design

  1. corporate team building activity Says:

    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.

  2. Web Development Company Says:

    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 is a great help.


  3. Richard Mongler Says:

    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.

  4. Holiday Homes Says:

    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.

  5. Hire a Geek Says:

    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 ^^

  6. Drapery Toronto Says:

    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.

  7. Web Page Mistakes Says:

    Yes, you can use conditional comments but that only clogs up your web page coding with coding that eventually will be antiquated.

    “Conditional comments only work in Explorer on Windows…”
    Source: CSS – Conditional Comments

    What about those on Macs that are still using Internet Explorer?

  8. Luxury Linens Says:

    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.

  9. Tai Slim Says:

    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.

  10. urlsbag Says:

    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

  11. Alien talk Says:

    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.

  12. Web Page Mistakes Says:

    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.

  13. Printing Says:

    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?

  14. Web Page Mistakes Says:

    The customer should be able to use any browser they choose to.

  15. Dianne Cris Becker Says:

    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.

  16. living green Says:

    Browser specific scripts have the same problem as browser specific tags, they don’t work in the “other” browsers.

  17. Web Page Mistakes Says:

    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.

  18. Ian Says:

    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.

  19. Carmen Bennett Says:

    “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.

  20. Web Page Mistakes Says:

    What about the IE users? They don’t have money to spend?

Browser Specific Design Was Mentioned Here:

  1. Favorite CSS Tips & Tricks

Join the Conversation by Leaving a Reply

You can use these XHTML tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> within your comment.

By leaving a comment, you acknowledge that you have read our terms of use.