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!
The buttons look definitely worse in the new implementation. They lost all the nice details like inner glow. Sure they might be faster but to say that they are pretty much identical is just wrong. Far away from that. Also they differ now between browsers which was never before the case. Not sure if that’s a good idea.
I guess thats a matter of tast. I never likes that inner glow for example.
My intension was never to build a pixel perfect replacement. So I’m fine with the slight differences in different browsers.
You may have fewer images, but box shadow requires the opacity compositing render pipeline in browsers, which is slower. So testing, with things like Speed Tracer and on mobile devices would be warranted.
Why not combine all images together in one sprite file? Many Asian websites use this method and I recently discovered that Youtube also does it.
I love the new CSS3 mixing decorators and it would be even more awesome if you included the possibility to use transparent rgb colors with box shadow.
Anyway, thanks for this awesome, strict, mature and robust framework!
@Steven
We didn’t put it in because of performance. Haven’t done any measurements on that so can’t say that it helps or hurts.
@Isaak
Its easy for a single site which knows all of its resources but were a framework and don’t know whats used in the app itself. Additionally, you can’t combine all images due to the fact that some images need to be stretched.
@Joakim
Sounds like a reasonable addition. RGBA is currently not supported at all but I opened up a issue for that. (http://bugzilla.qooxdoo.org/show_bug.cgi?id=4681)
Pingback: qooxdoo » News » The week in qooxdoo (2011-02-18)