The short answer is ALWAYS!  But let’s rewind a bit and provide some context.

You probably know by now that IE8 renders pages in standard mode by default.  The IE8 team made this decision to ensure the best experience for their users moving forward.  At the same time, the team has been very concerned about all the “hacks” that people had to go through to render pages using older versions of IE.  This is why Microsoft decided to provide a compatibility mode in IE8 to help during the transition and provide the best possible experience to users of non standard web sites.

A very complete summary on the IE8 team blog about compatibility can be found following this link. 

Here is an excerpt from the above post that really answers the question: “to tag or not to tag?”

“Site owners are *always* in control of their content. By default, Internet Explorer uses DOCTYPE switching to determine Quirks v. Standards mode (again, Standards mode maps to IE8 Standards by default). Site owners can choose to use the X-UA-Compatible tag to be absolutely declarative about how they’d like their site to display and to map Standards mode pages to IE7 Standards. Use of the X-UA-Compatible tag overrides Compatibility View on the client.” 

Compatibility mode can be triggered programmatically and I believe this is what every developer should do.  The reason is simple, you want to give your customer the best possible experience on your site.  You don't need to give your customer unnecessary choices.

There are several scenarios:

- If you have already tested your web site in IE7 and you are not yet prepared to make the transition you can just add the compatibility meta tag to all  your pages and they will automatically render in IE7 mode.

- If you are gradually transitioning to more standard code, you can selectively add the compatibility meta tag to the pages that you have not fixed and maybe never will (outdated content, support pages, etc...).

- If your code works well with IE8 then you should add the IE8 met tag!  This will ensure that your code will continue to render correctly even after the next browser transition.

In summary, the compatibility UA-X meta tag is the perfect way to ensure that your customers will enjoy your pages the way they were intended.

At ArtinSoft we have created the IE8 Compatibility Wizard that allows you to automate the meta tagging process.  You can check it out at: http://www.aggiorno.com/aggiornoexpress.aspx

Go ahead and TAG all your pages!

What are we facing?

I am working with a web page that has a Web slice defined with the normal syntax.  I want to change the Web slice in order to show interactive web content.

The Solution

Web slices are a new useful feature shipped with IE8.  They allow users to subscribe to content directly within a web page.  Users can review content changes directly from the IE8 Favorites bar.

Web slices are defined with simple, semantic HTML code that indicates a web page fragment which a client browser can be subscribed to.  The following fragment specifies a basic Web slice:

<div class="hslice" id="offer">  
        <h2 class="entry-title">Moon Airlines</h2>  
        <p onmouseover="animateMe(this);">Today’s offer      
            <span class="entry-title"><%=TodaysOfferPrice()%></span>.
        </p>
</div>

When IE8 is subscribed to this web slice you will see its title in the Favorites bar and in the preview window you will see the cached offer information, from which the active content such as script or ActiveX controls is removed.  In this case, the animation produced by the animateMe() function won’t show up in the preview window.

In order to make this animation work the previous code needs to be changed to:

<div class="hslice" id="offer">   
   <h2 class="entry-title">Moon Airlines</h2>   
      <a rel="entry-content
         href="myWebslicePreviewPage.aspx" style="display:none;">
      </a>      
      <p onmouseover="animateMe(this);">Today’s offer        
                                 <span class="entry-title"><%=TodaysOfferPrice()%></span>.
      </p>
</div>

It will also be necessary to extract a copy of the p block and place it in a new web page, which in this case is called myWebslicePreviewPage.aspx.   Also the animateMe() and TodaysOfferPrice() functions and all its dependencies must be available in the new page.

Some external references

Subscribing to Content with Web Slices

What are we facing?

There are not a universal implementation of all CSS selectors across all browsers. This page from Centricle shows a neat matrix of OS/browsers against supported selectors. Particularly, I would like to treat the differences between Internet Explorer browsers. Is there a way to deal the style of my site in different ways across different versions of IE?

The Solution

There at least two solutions, but take them cautiously.

First solution: browser detection via JavaScript by querying three properties of the “BrowserDetect” object. You can detect which browser is visiting your page, not just between versions of IE. This solution is highly controversial as you can’t entirely trust the “BrowserDetect” object and may be not implemented at all.

Second solution: the Internet Explorer conditional comments are a way to deal with it. It is specific for IE browsers. The good thing is that it doesn’t break the rendering of other browsers as they are just comments.

So for example:

  <!-- [if gte IE 6]
  <style type="text/css">
       @import ("ie6up.css");
  </style>
  -->

It will load the file “ie6up.css” if the IE browser is version is 6 or greater. Any other browser will ignore it as a comment. The caveat is that such style manipulation should be at CSS file level, not in the HTML file. That puts a maintainability cost on it. Again, take it cautiously.

Some external references

• Detecting Internet Explorer More Effectively
• IE8's "User-Agent String and Version Vector"
• A third solution by Tantek Çelik: IE Band Pass filter