Jonathan Weiß

The appearance of HTML elements is set by it's style properties. They define dimensions, colors, margins, borders and much more.
All styles which are defined in the style attribute inside an element are available to JavaScript in the style attribute of it's corresponding HTML element object. The value of each property is mapped from HTML without being translated. This means, that a color value of red becomes a string containing red and not the computed value rgb(255, 0, 0).
All styles, including styles from a class definition or inherited styles from a parent element, can be retrieved using the standard way window.getComputedStyle(<element>, null) or the Microsoft way <element>.currentStyle[style property]. This values are also translated to the computed value.

Why am I talking about HTML elements appearance? Well, imagine you want to clone an HTML element not only with its content and child nodes, but also with its appearance. To match the original element, every single style property, which applies on it, has to be copied to the clone.
Now that we know so much about computed styles, it should be no problem to get it done, right? Well, this task is not as easy as it first seems.

Stumbling block no 1: background-color

When an element has no background color, its computed value of background-color is transparent. So far so well, this makes sense, as this information is used by the browsers rendering engine.
To get the visible color for this property, you have to walk through the element's parent elements and fetch the first background color value that contains an usable color value.

Stumbling block no 2: text-decoration

A real head-scratcher for me was the text-decoration property. The value of this property is not inherited, but it's child elements are rendered, as if it were so!

»This property is not inherited, but descendant boxes of a block box should be formatted with the same decoration (e.g., they should all be underlined).«
CSS2 Specification

So all child elements inside an element with a text-decoration style property it will return none for text-decoration — even if you can see their text-decoration. As the property is not being inherited it also is not overwritten and an elements can be rendered with several different text-decoration values.

 
<span style="text-decoration:underline;">Oh
  <span style="text-decoration:overline;">noes!
    <span style="text-decoration:blink;">Teh
      <span style="text-decoration:line-through;">
      blink
      </span>
      tag
    </span>
    is
  </span>
  back!
</span>
 

Oh noes! Teh blink tag is back!

Note that not all browser support the blink value. Luckily... ;-)

I wonder why the specification is that way. Is there some reason for that? I am not aware of any other property that behaves like this.

To retrieve the rendered value, you have to walk through the element's parent elements, as you have to do for the background-color. When the parents have more than one different text-decoration value, it is not possible to clone the element's appearance without adding some extra elements around it.

Stumbling block no 3: text-decoration color

And as if that were not enough trouble with the text-decoration, here is one more thing:

»The color(s) required for the text decoration should be derived from the 'color' property value. [..] The color of decorations should remain the same even if descendant elements have different 'color' values.«
CSS2 Specification

 
<span style="text-decoration:underline;color:red;">lorem
  <span style="text-decoration:overline;color:green;">ipsum
    <span style="text-decoration:line-through;color:blue;">
      dolor
    </span>
    sit
  </span>
  <span style="color:purple;">
    amet
  </span>
</span>
 

lorem ipsum dolor sit amet

The completely match the element's style, you have to add one parent element for each different text-decoration property that also contains a color style property whose color will be applied on the text-decoration line.

The quote

If you are wondering about the quote in title: this is the first line from the Book of the Blind which appears in Blizzard's great game Diablo. I played it for ages when I was younger. :-)
When I realized that I could see a property, that is not visible to JavaScript (at first glance), this poem was brought back to my mind. Here it is, at full length:

I can see what you see not
Vision milky – then eyes rot.

When you turn they will be gone
Whispering their hidden song,

Then you see what can not be –
Shadows move where light should be.

Out of Darkness – out of mind,
Cast down into the Halls of the Blind!

Have you ever seen the icons for servers in the network at a bigger size?

Details about some server

Details about a Windows server

Nice icon, right? ;-)

When the first benchmarks with the Internet Explorer 8.0 Beta 1 came out, I was curious to see how much better IE would be compared to it's predecessor.
If you look at Apple's established SunSipder JavaScript benchmark, you will find that IE 8 is about 4.5 times faster than IE 7. First of all, this is great news for all web developers, But if you look carefully, you will notice that IE 8 benefits most from the results in the string section.

IE always had performance problems with string operations. Even when Microsoft's developers promised to solve this problem, it existed all the time — until now. That is the reason why superior JavaScript frameworks have an option to replace all used strings with variables to avoid this browser weakness. ;-)
Anyway — I am very happy to see, that this huge issue is finally fixed.

If you run the SunSpider benchmark without the string tests, the final result looks different: the increase of performance reduces to 1.5. Do not get me wrong, I do not want to put down IE team's effort: they have done a fantastic work; not only in performance but also in standards support and they have included an excellent debugger. I just want to straighten out that most of the gain in performance comes "for free", as it derives from a bugfix for a quite old issue.

While today's support for web standards is pretty well, web applications are spreading like wild fire and web applications for mobile devices are getting more important, web browsers vendors are working hard on optimizing their products for speed and memory footprint.
This results in the fact that nightly builds of Webkit and Firefox are 3 to 6 times faster than IE 8. These are (and will be!) the products Internet Explorer is compared with.

There are interesting times ahead and I am looking forward to see the results in the final version of the browsers. :-)

I can not believe this! Microsoft just U-turned their IE 8 strategy:

We’ve decided that IE8 will, by default, interpret web content in the most standards compliant way it can. This decision is a change from what we’ve posted previously.

I hardly dare to say, but Microsoft's recent work got my respect. ;-)

I have done a lot of testing with Firefox 3 beta, since it will be released soon and I want to get to know the new features and enjoy the improvements. If you duplicate your old Firefox profile (run "firefox -P" to access the profile manager), you can use both versions on the same system - but only instances of one version to the same time. This works pretty well, so that I have one butter-and-bread tool (thanks for this term, Thomas ;-) ) for my daily work and one unstable, experimental one for testing.

Update:
On OS X you can run both versions at the same time. Awesome! :-)

Unfortunately there are some extensions which do not work with Firefox 3, since their authors have not tested and qualified them to work perfectly with the new version.

Luckily, you can easily install extensions, even if they are not qualified the new version.

1. Download the extension file to your computer.
2. Unzip the xpi file (it behaves like a zip file) and open install.rdf with your favorite editor.
3. Change the setting of em:maxVersion to 3.0 or higher (be sure that em:targetApplication is Firefox)
4. Save the file and restore the xpi file.
5. Open the extension from your local filesystem with Firefox 3 and install it.

Please note that using an unqualified extension is risky and can cause unexpected behavior and even browser crashes.

Let us assume that you have a function which will execute different code based on conditions which do not change during runtime (e.g. the rendering engine of the user agent).

function doStuff(){
  if(userAgent == "internetexplorer"){
    // ...
  }else if(userAgent == "firefox"){
    // ..
  }else if(userAgent == "webkit"){
    // ..
  }else if(userAgent == "opera"){
    // ..
  }else{
    // ..
  }
}

Each time the function is called the string comparisons have to be done, even if the value for userAgent will not change at all.

To optimize this situation assign the actual function code to a variable named doStuff:

 
if(userAgent == "internetexplorer"){
  doStuff = function(){ /* .. */ };
}else if(userAgent == "firefox"){
  doStuff = function(){ /* .. */ };
}else if(userAgent == "webkit"){
  doStuff = function(){ /* .. */ };
}else if(userAgent == "opera"){
  doStuff = function(){ /* .. */ };
}else{
  doStuff = function(){ /* .. */ };
}
 

After this no more string comparisons are needed. :-)

I have some random thoughts about Apple which I do not want to release as single posts on this blog, so here they are in the order of appearance. ;-)

MacBook

Before Christmas I bought myself a present and bought a MacBook in order to use it as my private and partly commercial developing machine. My father always told me to switch to the Mac platform, as he is working with Macs since the Apple //c which was released in 1984... Anyway, since I work a lot with qooxdoo ;-) I also wanted to have a native unix-based working environment.

OS X Console font

I never really liked Apple's default mono space font Monaco. Andale Mono looks much better, but my absolute favorite is Inconsolata.

Multi touch gestures

Since I wrote about mouse gestures I was very excited to see the multi touch technology integrated in the new MacBook Air. I really like to see Apple developing better user interfaces. And hey, I want this gestures for my MacBook, too. ;-)

qooxdoo 0.7.3 was released this morning. Being a minor release which includes many bugfixes and improves stability of the framework, this release still is one of the largest in the history of this project. See the official announcement for a list of new features.

Have fun! :-)

Often you need to set just a single CSS attribute in your web application. You will usually do this by applying a value to the specified style attribute.

myElement.style.color = 'red';

Sometimes you will have to set a number of attribute values at once. For example if you have just created an element and can not assign a CSS class, because all attributes depend on specified conditions. In this case it is significant faster to set a value for the whole style attribute instead of setting each CSS attribute.

This five assignments

var myDiv = document.createElement('div');
myDiv.style.backgroundColor = 'blue';
myDiv.style.border = 'solid 4px red';
myDiv.style.fontFamily = 'Helvetica, Arial';
myDiv.style.width = '400px';
myDiv.style.height = '100px';
 

can be combined into one

var myDiv = document.createElement('div');
myDiv.setAttribute('style', 'background-color:blue;border:solid 4px red;font-family:Helvetica, Arial;width:400px;height:100px;');

If you are dealing with dynamically created elements, be sure to read part three of this series. ;-)

After the last "update" of IE 7 and the questionable communication policy in the IEBlog I am very happy to see that things can change. :-)
Thanks, Mr. Gates for bringing light into the darkness.

Anyway, how can IE 8 render the test correctly? At this moment the test is broken...
Ok, I have just seen their video and I guess they were working with the correct Acid2 test.