Jonathan Weiß

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.

Even if there is still much time until the next major version of the Firefox browser will be released, I want to take a quick look at some of the new features, which have its seeds in the Gecko 1.9 engine.

1. <element>.clientLeft() and <element>.clientTop() properties
   These properties conatin each HTML elements absolute position on the browser screen. Instead of calculating this values by using <element>.offsetLeft() or <element>.offsetTop() on the element itself and all parent elements recursively, you can now use this browser calculated values — which is a huge performance enhancement.
   I took a small benchmark with a function containing a large amount of different operations (among many calls of offsetTop() and offsetLeft()) and the new properties increased the execution time by 1,57 to 1,83.
2. Soft hyphens
   This might be interessting for all german-speaking people. It is now possible to use a special kind of hyphen (­) which will be wrapped on line break. From now on you can use the correct notation for coposed words, such as "Warenwirtschaftsystem" instead of the wrong one "Waren Wirtschaft System" just because you have to fear, that the line containing this word will look terrible when using text-align:justify; or breaking your layout.
   
   Comparision of hyphens
3. JavaScript 1.8
   Firefox 3 will also include support for JavaScript 1.8, which gives us developers some goodies, like native JSON encoding and decoding (yeah, faster data exchange ;-) ), more array methods and much more. I just want to concentrate on expressions, which allow you to write your code in a lamda-like way:

   function sqr(x) { return x * x; }

   ca be written as

   function sqr(x) return x * x;

   Here is another longer example, taken from John Resig, which creates and fills an array:

   Number.prototype.__iterator__ = function() {
       for ( let i = 0; i < this; i++ )
           yield i;
   };
   [[ i == j ? 1 : 0 for ( i in 10 ) ] for ( j in 10 )];

It is a bit sad, that most of these great features can not be used (or only with an browser switch) if the end-user is using an older browser wich lacks JavaScript 1.8 support. But on the other hand it is possible to increase your applications performace and eventually these features will be available in other browsers, too.

I guess you have seen this little warning way too often, while surfing with the Internet Explorer:

In the majority of cases you are on an encrypted website when some resources (e.g. images, CSS files or iframes (mostly filled with advertisements)) are being loaded over the normal, not encrypted, HTTP protocol. Naturally, such issues are easy to find and resolve: just take the better browser Firefox, right click the page, look at the Page Info, browse through the list in the Media tab and search for an address which does not start with https.

Another possibility is that some content can not be found on the server and Internet Explorer wants to display its own 404 page. If this happens, the browser will try to display a special page from its resources. Unfortunately this page will be rated insecure, because it does not come via HTTPS protocol, but from the browser itself.
You can try to avoid this by building a 404 error page. But even this can fail if the page size is too small for Internet Explorer.

Today I spent some time until I found third reason for this box to appear. I searched for not encrypted requests and watched out for missing files with Fiddler, but I found nothing. After a while I found an hidden frame locating to about:blank. This location, as well as the "file not found" event, leads Internet Explorer to display content from its chrome.
Funnily, this browser does not trust its own content and will bring up a warning.

So, if you have users with old versions of Internet Explorer, be sure not to use about:blank, the rhomb # or empty values for objects like images, iframes or others on SSL encrypted sites.

Update:
Today (04.09.2007) I found another example of Internet Explorer's paranoia: before navigating from an unsecure location to a web page in the Trusted sites list you have to confirm a dialog. The point is, that the current location is a page from the browser's own resources! If this page is fiddled every security check is dispensable...

Yesterday, at the Worldwide Developers Conference and exactly in time for the birthday party of this project Apple introduced the new version of Safari. The interesting fact is that they have made a version for Microsoft Windows, so that I do not have to torment the old Mac mini with upgrading the operating system etc.

My first impression is: wow, this thing is fast! It runs my applications in development and all test cases or prototypes at a similar speed as Firefox. Positioning elements is done faster in Firefox, but setting other attributes seems to faster in Safari. I have run some benchmarks to get a better impression of this.
In the past I had some problems running some test cases in Safari on OS X, which stopped on JavaScript errors which were difficult to debug in Safari. So, it is amazing that everything runs in Safari now.
I have to figure out how to enable Drosera on Safari for Windows to really use this browser for testing.

On my machine I have a strange problem with fonts, which occurs from time to time. It looks as if some characters can not be displayed.

I'm curious about Ben's report on the WWDC 2007. Be shure to read his blog in the next days. ;-)

Update:
Thank you daeg for informing us how to enable the debug menu on Windows machines in your comment on the Slashdot article Safari on Windows.

There are many situations in which you don't want the browser to select the text (or selectable element, e.g. an image), when the user is moving the mouse holding the left mouse button. Especially during drag-and-drop actions this browser behavior will look strange and confuse the user.
To prevent this action on Internet Explorer, first add the proprietary event onselectstart to the particular element. Then assign a function which returns false.
On Gecko bases browsers you have to use the CSS attribute -moz-user-select. The prefix "-moz" shows, that this attribute (as many others, e.g. -moz-border-radius) is a proprietary one and will not work on other browers. The expression -moz-user-select:none; will prevent the browser from it's normal selecting behavior.