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 want to reference a word or phrase by suppressing some characters or syllables, and in that way provide very useful information to the viewers, the browsers, search engine indexers, spell checkers, etc..

The Solution

The usage of the tag abbr denotes the use of a shorted word or phrase, but the real importance is that it's the semantic way for marking up abbreviations.

You can also use the attribute title to specify the whole word or phrase that the abbreviation refers to. With this some browsers must show over the abbreviation the specified text and this will help you to increase your web page accessibility.

Examples.

Some external references

• HTML ABBR TAG (w3schools.com).
• Mastering Text.

What are we facing?

I liked the post about Rollover Image for links using pure CSS but I would like to have just one image, not two: one for the "regular state" and another for the "hover state". There could be a delay between loading the first image and the second image, causing flickering. Is it possible doing that with just pure CSS? Am I being too demanding?

The Solution

Fortunately, CSS provides the power to do that. It is called the Pixy-style rollover. Let's use the same example of the previous post.

Here is the same image but merged vertically:

Using the following link code:

<a href="http://www.aggiorno.com/try.aspx" id="pixy"><span>aggiorno</span></a>

And using the following CSS

  a#pixy {
       background:transparent url(“Aggiorno-sprite.jpg”) no-repeat scroll center top;
       display:block;
       height:110px !important; 
       width:110px;
  }
  a#pixy span { display:none; }
  a#pixy:hover { background-position:center bottom; }

You then will get the link showing the top part of the image when regular state. In hover state, the bottom part is displayed. Hover it and believe your eyes:

aggiorno

Some external references

• CSS Sprites: Image Slicing’s Kiss of Death

What are we facing?

I want to achieve a button like effect for some of my links. For instance, it's a matter of positiong the "Download" link more prominent and catchy. I want that link to behave like a button when I hover it. Another option is to have a clickable image with change a little bit when hovering. Of course, I want that effect made entirely in CSS. Is it possible?

The solution

Yes, there is a way, let's based the following example of rollover with images on the Stuart Robertson's post about it.

Choose a image for the regular state of the link (no hovering state):

Just for simplicity, do a silly change to that image to produce a rollover image

Build the link wiht a "span" element with a meaningful description inside. Never forget those image based browsers.

<a href="http://www.aggiorno.com/try.aspx" id="rollover"><span>aggiorno</span></a>

We are almost there. Now the following style for achieving the rollover effect:

  a#rollover { background-image:url("Aggiorno-regular.jpg"); 
               height: 110px; width:110px; display:block; }
  a#rollover span { display:none; }
  a#rollover:hover { background-image:url("Aggiorno-rollover.jpg"); }

This style set background image for the regular state of the link, hides the span content and shows the rollover image when hovering. Our baby now looks like (hover it):

aggiorno

Some external references

• CSS rollover buttons
• Roll Over, Rollovers -- CSS Style by Eric A. Meyer

What are we facing

I want to provide my links with tooltips, those little boxes that pop up when users hover the mouse over the links. How do I implement tooltips with pure CSS?

The Solution

The trick is made by inserting the text for the tooltip in a "span" element inside the "a" element. Then, use some CSS to hide it and to show it as a pop up when you hover. The good thing about this technique is that the tooltip text is inside the HTML markup, hence is visible to web crawlers. Let's see some examples.

A pretty good CSS code can be found in Pure CSS Tooltips, which gives the following style

a.info{
     position:relative; /*this is the key*/
     z-index:24; background-color:#ccc;
     color:#000;
     text-decoration:none} 
a.info:hover{z-index:25; background-color:#ff0} 
a.info span{display: none} 
a.info:hover span{ /*the span will display just on :hover state*/
     display:block;
     position:absolute;
     top:2em; left:2em; width:15em;
     border:1px solid #0cf;
     background-color:#cff; color:#000;
     text-align: center}

Let's see how it looks (hover the mouse over the links):

• homeIn this page you will have to understand and get in love with aggiorno in just five seconds
• productsTake a look at the Aggiorno software, the web productivity you always wanted
• downloadGet a fully featured demo version for 30 days!
• buyYou know you need Aggiorno, save all that maintenance time
• aggiorningsWhat Aggiorno can do for you?
• blogAll that valuable content for you!
• contactWe are listening, please talk to us

---

If you want a simpler way to do it, Kollermedia.at provides a shorter code

a.info2 span
  {
      display: none;
      padding: 2px 3px;
      margin-left: 8px;
      width: 130px;
  }
  a.info2:hover span
  {
      display: inline;
      position: absolute;
      background: #ffffff;
      border: 1px solid #cccccc;
      color: #6c6c6c;
  }

Let's see how it looks (again, hover the mouse over the links):

• homeIn this page you will have to understand and get in love with aggiorno in just five seconds
• productsTake a look at the Aggiorno software, the web productivity you always wanted
• downloadGet a fully featured demo version for 30 days!
• buyYou know you need Aggiorno, save all that maintenance time
• aggiorningsWhat Aggiorno can do for you?
• blogAll that valuable content for you!
• contactWe are listening, please talk to us

Some external references

• Pure CSS Popups by Eric Meyer

What are we facing?

I want to devote a section of my page to quotations from external sources, and I want to do it the right way, both visually and semantically.

The Solution

You should use the <blockquote> tag because it’s meant to designate quoted text, generally long quotations. An use of <blockquote> is exemplified below

<blockquote><span>
The &lt;blockquote&gt; tag is supposed to contain only block-level elements within it,
and not just plain text. To validate the page as strict XHTML,
you must add a block-level element around the text within the &lt;blockquote&gt; tag
</span></blockquote>
	    

If you use <blockquote> as shown above, you’ll notice that the only thing that happens when you apply it is that your paragraph gets indented as you can see below

By the way, you should not use <blockquote> for indentation purposes.

Now you need your quotation to look nice. In order to change the rendering of you quotation we are going to apply some CSS magic to the <blockquote> tag

             blockquote
            {
                padding: 5px;
                font-style: italic;
                background-color:Silver
            }

And this is how the quote looks like when the style is applied

Now you have semantically correct quotations rendered nicely.

Some external references

• Blockquote: Then and Now

What are we facing?

The war of browsers is a never ending story. With Chrome as a new player in the browsing scene, how do you get sure your website is consistently rendered across multiple browsers? How do I get there?

The Solution

This topic is hot and the cornerstone of having a site accessible. The Central Office of Information of UK will tell you that “conforming to web standards such as XHTML and CSS are more likely to work well across a wide range of browsers”. So obviously, moving your site to web standards will take you on the right path. However, as Rick Strahl states: “even with XHTML there are still major differences between different browsers and how they set their default settings for various CSS tags.”

Oops, and now? Given such lack of communication/definition of standards between browsers in that level, a nifty workaround exists: Browser reset. As Rick Strahl again clearly explains, “A browser reset is meant to reset the browser’s CSS setting to a common default value set. Basically each browser has slightly different base settings mostly for margins, padding, borders etc. as well as many other settings that can affect browser rendering slightly and often results in the little inconsistencies […]. The reset effectively is used to reset the browser to a common baseline, upon which any further CSS settings are based.” 

Brilliant!

Just adding this line (assuming you already have the reset.css file):

<link rel="stylesheet" type="text/css" href="reset.css" />

And now you are able built style upon that resetting, and voila! it will rendered consistently on all browsers.

Where do I find a reset file? You will find some interesting options:

• Yahoo CSS Reset
• Eric Meyer’s Browser Rest
• Siolon’s Global Reset

Some external references

• A Killer Collection of Global CSS Reset Styles
• BluePrint CSS Framework

What are we facing?

Anyone working in large web projects in collaboration with many people at the same time will see the consecuences of many hands on style files. May selectors and classes come and go while developing and testing. After a while, you will easily see style files that become untouchable: you don't know which classes or selectors are being used or not. The same uncertainty creeps in when you maintain someone else's site.

The Solution

There are several solutions out there about detecting unused classes and selectors, I will list the most popular:

• Dust-Me Selectors: "Dust-Me Selectors is a Firefox extension (for v1.5 or later) that finds unused CSS selectors. It extracts all the selectors from all the stylesheets on the page you're viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they're encountered"
• TopStyle 3.5 for Windows: It has a "orphan classes report".
• CSS Redundancy Checker: It's a free online service. "Use this tool to find CSS selectors that aren't used by any of your HTML files and may be redundant".
• Unused CSS Cleaner: "This tool helps you find orphaned CSS styles (Classes, IDs) that are present in the stylesheets but not used in the web pages".
• IntelliJ IDEA - HTML/XHTML/CSS Editor: "CSS on-the-fly validation: Unused CSS class definitions".
• Style Studio CSS Editor: It has a "Selector Report that detect Unused CSS CLASSes/IDs".
• Expression Web's CSS Reports: The CSS reporting feature is a way to examine unused CSS styles that need to be cleaned up".

Some external references

• Identify unused CSS: Small PHP script that uses several regular expressions to check the styles of a page.
• Playing with CSS selectors: PHP-based interactive document where one can play with css selectors.

What are we facing?

Youtube provides a code for embedding any video in my page, however the such a code is not XHTML 1.0 compliant. What is the generic way of making any Youtube video XHTML 1.0 compliant?

The Solution

The code given by Youtube for any video to be embedded in your page has the following format:

<object width="A" height="B">
   <param name="movie" value="C"></param>
   <embed src="C" type="application/x-shockwave-flash" width="A" height="B"></embed>
</object> 

Where A is the width, B is the height and C is the url's video source.

The XHTML 1.0 friendly version of that is in the following format:

<object type="application/x-shockwave-flash" style="width: Apx; height: Bpx;" data="C"> 
   <param name="movie" value="C" />
</object>

Is the display the same? Take a look (you can also see the source code in your browser)

Displaying with Youtube video code

Displaying with XHTML 1.0 compliant code

Don't you agree that a automated tool to do this would be a great idea? There are many scenarios when this is a "nice to have"

Some external references

Embedding YouTube Videos as Valid XHTML 1.0 of Bernie Zimmermann

YOUTUBE XHTML EMBED of Paimonia