The gem is a search able list which contains all JavaScript files used in the current document. This is perfect if you need to set or modify breakpoints or just want to get a quick overview about the used scripts in the page. If you are dealing with a large amount of JavaScript files, this list is absolutely useless and it gets worse if you are dealing with long paths. And here comes the search able feature in the play: just start typing in the open list and only matching file names are shown.

JavaScript files names containing "queue"

Generally conditions start with [if] and end with [endif]:

<!--[if exp]>
 HTML block <![endif]-->

The typically use of this technique to figure out which version of Internet Explorer the client is using. An expression can contain the string IE, the version number, comparison operators (lt, lte, gt, gte), boolean operators (&, |, !) and parentheses ((, )).
With this constituents it is possible to construct flexible version number detections.

<!--[if IE]>

<link rel="stylesheet" href="styles_ie.css" type="text/css">
<[endif]-->

It is even possible to nest comments.

<!--[if IE]>

  <![if gte IE 5]>
<link rel="stylesheet" href="styles_ie5.css" type="text/css">
  <![endif]>
 
  <![if (gt IE 5)&(lt IE 7) ]>
<link rel="stylesheet" href="styles_ie55_and6.css" type="text/css">
  <![endif]>
 
  <![if IE 7]>
<link rel="stylesheet" href="styles_ie7_hacks.css" type="text/css">
  <![endif]>
<![endif]-->

While playing with the soft hyphen feature of the latest version of Firefox I remembered that I had seen a nice way to cut off text if it is too long for its containing element. A few years ago I accidentally found an entry in a wiki about a special CSS property which can be used to improve the look of texts inside an element with an overflow:hidden style property.

An example of text-overflow

In Internet Explorer 6.0 (and above) and in Safari 1.3 (and above) you can use text-overflow:ellipsis together with overflow:hidden to get this three dots if text is to long.

Be careful with overflow:auto! It seems a bit buggy in Safari, while it works nearly perfect in Internet Explorer.

Update:
The Opera browser (since version 9.0) supports this property, too. You have to use the proprietary attribute -o-text-overflow and your text will be displayed the same way as in Safari.
I guess once CSS3 goes final, all vendors will use the W3C standard property.