Recently I came across an article about Diana Smith, a user interface engineer, nay, artist who uses CSS (Cascading Style Sheets) as a medium for creating pieces of artwork. She creates these CSS masterpieces by typing out each and every element by hand.
All 4324 lines of them.
Now, the artwork that Diana has created is impressive enough, but what’s even more impressive to me, as a web developer, is that it demonstrates two concepts that I and other web developers often talk about: browser compatibility and reusable code.
Diana Smith is quick to point out on her github account that due to the artistic nature of her projects, she hasn’t concerned herself with cross-browser-compatibility. This means that viewing the actual live version of her work will “most likely look laughable in anything other than chrome.” 
Things really start to break down when you view the artwork in older versions of browsers. Let’s take a look at Internet Explorer (IE), for example. In IE 9, Francine starts to appear as an ethereal ghost, with her lower torso becoming transparent. When viewed in IE 8 Francine looks as though she was drawn by a kindergartener cubist. In IE 5 the artwork now resembles a surrealistic modern piece. These different renderings of the same code show an extreme example of what can happen when you try to view a modern website in an out of date browser.
The other thing that was super interesting to me was how Diana coded her work. What I saw when I looked at the source code was a beautiful example of reusable code.
Granted, all that the HTML contains are empty divs, but the example I pulled here is creating the subject’s left eye. What I’m most focused on is actually the eye lashes. Each eye has 12 lashes, six on top and six on the bottom, but they’re actually the same eyelash. They just have modifiers (top, bottom, lash1-lash6) applied to them to move them around and rotate them. Even the wrinkles on her right glove are the same style just used over and over again. Although most people who are creating CSS for website use are not going to be creating eyelashes or clothing wrinkles on websites, it does illustrate a goal of every web developer, and that’s to write scalable, reusable code.
Related Resources
- “Some Web Developer Career Advice,” The Bigger Picture.
Produced by the Smithsonian Institution Archives. For copyright questions, please see the Terms of Use.
Leave a Comment