Myself, Coding, Ranting, and Madness

Webkit 'Hacks'

The students over in Imperial's Department of Computing recently discovered some of the more fun style setting available in the layout/rendering engine WebKit, which is used in both Google's Chrome and Apple's Safari. Those of you who don't really care how web pages actually work, and would just like to learn some cool tricks to make web pages do strange things and therefore be able to confuse your friends may wish to skip to much further down this post, as I'm going to be putting in quite a bit of detail for those who want to try messing with this stuff themselves.

The 'hacks' are actually a set of extensions to the style properties that the WebKit engine implements. Each of these is an extra CSS property that the engine implements, and can be changed in the same way as any other CSS property.

Now, before I list them, I would just like to mention that using these in a real website is a very bad idea: you won't know how the name and value sets may change in the future. If you do any web development, stick with CSS 2/2.1 (maybe 3 if you really need some of the features) and refer to the compatibility tables so diligently put together over at QuirksMode. I'd just like to quickly note my personal thanks to Peter-Paul Koch for all of his brilliant work, saving me hours, days, even (over the last few years) weeks of my time in working out why all the browsers are being weird.

The full list of WebKit extensions, and the default values, is available in tabular form [Show/Hide Table]

So, I may have been a bit harsh about saying you shouldn't use any of them. The user-select property is useful for making many drag/drop scripts look a lot better, and will just be ignored by other browsers (although, will stop your CSS code form being formally validated, if that really matters to you). I haven't had a chance to play with the drag-drop options, but I suspect that these make all such scripts redundant. However, this is not such a good idea to use, as you still need to implement it separately for other engines. What's the problem here - you hit a detect browser / engine script, something which regularly falls out of date. The only way it is safe to implement this kind of script is where the altered version only adds behaviour that will be ignored by all browsers that don't support it (hence all of these properties starting with -webkit-) or, in extreme cases, where the main script can not be written in a way that works in all browsers1

So, what can we do with all of these fun properties? They can of course be set from within the page, the style sheets, or via the DOM using JavaScript. Only the last of these can we can do to arbitrary web pages that we don't manage, by use of the javascript: psuedo-protocol being entered into the address bar.

Now, in favour of getting this post out as quickly as possibly, I'm just going to post some of the scripts that I've written. All of these just directly do things with the the transforms, rather than setting up animations, which I may post a little bit about later.

The first script just causes the entire page to rotate. Two versions of the code are shown: the original version which caused me to write this post (brought to my attention by Mark), and an 'improved' version that I wrote. There isn't really that much of a difference between them, but the two important changes are the removal of the wrapping anonymous function, which will cause the compiled code to not be released from memory properly, and the storage of the handle returned by the setInterval call, so that the loop can be cancelled without having to reload the entire page. [Show / Hide Code]

The second section of code does something slightly more interesting: it makes all the images on the page rock backwards are forwards. This is quite processor intensive, and would be better implemented as a WebKit animation rather than a crude JavaScript loop. Nonetheless, this looks really good on image full sites, such as facebook and last.fm. [Show / Hide Code] javascript: function rotater() { rotater.d += rotater.dir; if(rotater.d > 20 || rotater.d <- 20)rotater.dir=-rotater.dir; for(var x=0; x < document.images.length; x++) document.images[x].style['-webkit-transform'] = 'rotate(' + rotater.d + 'deg)'; }; rotater.d=0; rotater.dir=1; window.handle = window.setInterval(rotater,10);

So, how does these snippets work? The code creates a function 'rotater', gives it some code, some properties, and sets it running on e an infinite timed loop. Try messing around with the code, and see what you can make it do.

1. 1 ↑ This is, thankfully, now a very rare occurrence. To the point that I can't immediately think of an example where it can't be fixed with some basic tests