Jonathan Weiß

Today's hidden gem is a little extraordinary: it is not about a browser technique and it is only available in Firefox with installed Firebug extension. But I expect my target audience having a Firefox as butter and bread tool (thanks for this phrase, Thomas ;-)) fully loaded with extensions and custom settings...

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"

The Internet Explorer has the nice ability to detect specially formatted HTML comments and recognize them as programmable conditions. While all other browsers are treating them as regularly HTML comments, they will ignore the conditions and its branches completely.
Thus we have a great possibility to address Internet Explorer browsers in a valid, standard-compliant way without using a client or server side scripting language.

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

I just started another series for my blog. :-)
Today's browsers are quite huge applications charged with so many features and potentials, that you can hardly know all of them. From time to time I will write about less known, but useful and valuably features: the hidden gems.

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.