When I looked at the markup, I thought, "I would use JS to insert those mask divs." Does anyone else feel that same base compulsion to keep the markup clean?
Not really. Using JavaScript to add mask <div>'s is a messier solution, requiring more KB of code, especially if you want it to work on all browsers, even those that don't properly support DOM manipulation. Also the JavaScript would have to run after the other parent <div> has already been downloaded and rendered, meaning that there would be a brief time when there was no mask.
In my opinion, it is just easier and cleaner to add an extra <div> to the code than to add a bunch of extra lines of JavaScript to do the same thing.
Just so I'm not missing something, are there browsers which would support the Webkit CSS but not support DOM manipulation? Or are you concerned with people running NoScript style plugins?
Yes, NoScript is a problem. However, I was referring to other scenarios in general where a problem can be solved by just adding a <div> in HTML code. It seems more economical to me to add the <div> manually to the HTML code as in this Webkit example rather than writing a JavaScript routine to manipulate the HTML code at runtime on the client's machine as you suggested.
If you use a javascript library such as Mootools, you could add a onDomReady event, wich fires as soon as the HTML is rendered - even before the <img>. Of course that means yet more Kbs, but almost all solutions have their downsides.
Regarding the original comment, I do feel the urge...clean and easy to maintain HTML is an irresistible compulsion for me :}
