With the recent introduction of the Simple theme, we also added new features to the theming layer of qooxdoo. Those additions mainly include an extended usage of CSS3 features like box shadow or border radius.
Wouldn’t it be nice if qooxdoo’s default theme called “Modern” could also benefit from those new technologies? But wait, we don’t want to loose the current look in older browsers not supporting the new technologies. Don’t worry, you can still use the previous image-based decorators for the old browsers and use the new, shiny decorators for the new browsers. That’s what we did in the Modern theme just recently. Did we succeed? Take a look yourself:
I guess you can’t tell which screenshot shows the one using the CSS decorators, right?
You may ask yourself, what is it good for if it still looks the same? Well, there are at least two good reasons for that:
First, you don’t have to load all those images used for the old decorators, which saves quite a number of requests. For example in the feedreader, I tried out a typical interactive workflow in Chrome, which caused 40 requests in the old version. The same workflow caused only 26 requests using the new decorators. Keep in mind that the 40 requests mentioned is not that much, because qooxdoo already uses combined images to reduce the number of requests. But with the new decorators, you can get rid of even those combined images.
The following combined image was previously needed to style CheckBox and RadioButton, but with the new decorators in newer browsers it isn’t needed any longer:
A second and also important advantage of the new decorators is that you don’t have that flickering effect on decorator changes, which is caused by loading the corresponding images. A good example is the button, which has a hover effect. When hovering the widget a new decorator is set, which used to be image-based. These images needed to be loaded the first time they were shown, which caused a delay in rendering. Only by preloading those images you could mitigate this issue. Now for all modern browsers you don’t have to care any more, it is instantaneous.
The changes in the Modern theme are currently in trunk, may get some fine-tuning where needed, and will ship with the upcoming qooxdoo 1.4 release. If you are on trunk, give it a try and let us know what you think!