Web Performance Daybook Volume 2

Chapter 11. Pure CSS3 Images? Hmm, Maybe Later

Marcel Duran

Several designers while at Yahoo! requested that the original YSlow logo PSD be used in promotional materials such as t-shirts, posters, flyers, etc. in some events that occurred along this year, I had no idea where it was ever since I joined the Exceptional Performance Team (http://developer.yahoo.com/performance/) to take care of YSlow (http://yslow.org/) amongst other performance tools. In order to solve this problem I decided to rebuild it from scratch because it didn't seem so complicated, the problem was I was a speed freak, not a designer so inspired by the famous pure CSS Twitter fail whale (http://www.subcide.com/articles/pure-css-twitter-fail-whale/) I put my CSS muscles to work out focusing obviously on performance to provide those designers a scalable YSlow logo (http://wh.yslow.org/css3-logo) for their delight as well as potentially having a smaller image payload to be used on the Web.

The Challenge

It was an interesting challenge from performance perspective since the less code I used, the smaller the final image would be and the faster it would perform (rendering time). My goal was to achieve a one-size-fits all solution to be used in the wild on the Web. Besides performance, as a front end engineer, I was also interested in how CSS3 could help solve this issue (cross-browser possibly) and the limitations imposed. I use Chrome for development, so my first goal was to make it happen for that browser first before ...