We’re on the verge of a whole lot of new CSS media queries becoming available. But if you’re a developer that wants to get a head start and try them out, you’re out of luck. Browsers are prototyping them one by one before making them available and we as developers have to wait.
On rendering engines and graphic libraries
It won’t be long before we have a really solid baseline across the 4 major rendering engines in terms of CSS support. Gecko, Webkit, Presto and IE8’s rendering engine. But what about their graphic libraries?
Graphic libraries exist to take the page from the rendering engine and onto the screen. They’ve been underexposed for some time because the rendering engines caused the most grief, but with those getting rapidly better, little annoyances with the graphic libraries start to appear.
When Google announced Google Chrome and it turned out to use the Webkit rendering engine, I think everyone collectively sighed in relief. Not yet another browser to support! Well, that was until it became known that Google Chrome actually doesn’t support a lot of Webkit’s more advanced CSS stuff such as text-shadow or transformations. The reason for this is called Skia.
Skia is the graphic library Google Chrome uses. Webkit renders the page and then Skia actually paints it on the screen. All fair and well, but Google Chrome is the only browser to use Skia. Safari, which also used Webkit, uses the Core Image libraries. So while you may expect that the stuff that works in Safari also works in Google Chrome, that won’t always be the case. The result: Same rendering engine, different looking sites.
Another example: Firefox uses the Gecko rendering engine. It used to use the Pango graphics library but some time ago they switched to Cairo, which dramatically improved Firefox’s graphic rendering. However because of Cairo, fixed elements, when viewed on Linux, jitter. If you’re on Linux, and scroll this website, the top right background jitters. Very annoying, especially since this doesn’t happen on Mac or Windows. This isn’t a problem of gecko, but of Cairo having to (re)paint the site on the screen.
So what does this mean?
Do we all have to buckle up for a new era of browser hacking and working around more and more cross-graphic-libraries oddities? No, I don’t think so. I don’t think this will really become a big problem.
However, very few people know about the how and why of these differences. As a front-end developer it will help you build better websites if you do. So will you?