Last night a buddy called me late. His MySpace profile had completely broken. Literally, the main layout table had spilled across half the screen and his embedded music player was floating weirdly on top of his "Top 8" friends list. We spent a good while trying to decipher the mess of tags and styles he had copied and pasted from God knows what obscure forum. We finally managed to fix it by deleting half of the stuff, but this whole process made me reflect on the technical madness we've managed to normalize in web design.

Anyone who has tried to build a half-decent page knows that separating content from presentation is a basic, sacred rule. I was recently commenting around here on how clean it is to work with the template system in WordPress. You keep your PHP files on one side and your centralized stylesheet on another. MySpace, to our retinas' dismay, does exactly the opposite. It allows users to brute-force HTML and CSS code directly into the profile text boxes, such as the "About me" section.

Think for a second about the massive atrocity this implies. To change the background wallpaper or hide ad blocks, people are injecting entire <style> blocks right into the middle of the page's <body>. The Internet Explorer 6 rendering engine suffers a silent collapse every time it has to interpret that, and Firefox literally does whatever it can to keep sparks from flying out of the monitor.

The trick everyone uses involves guessing or inspecting the classes that MySpace's own developers have defined on their tables, and then hammer-forcing the overriding of the rules using the !important attribute. You dump a bunch of inline rules and pray the browser listens to yours instead of the original ones.

<style type="text/css">
/* Hide MySpace's default main table */
table, tr, td {
    background-color: transparent !important;
    border: none !important;
}

/* Change the profile background to a heavy image that chokes my 1 Meg ADSL */
body {
    background-image: url("http://ejemplo.com/fondo-gotico.jpg");
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #000000;
}

/* Modify the comment box and hide the ads */
.contactTable { width: 300px !important; padding: 0px !important; }
div.google-ad { display: none !important; }
</style>

What happens when you do this is that you end up with a monumental, horrible code and zero maintainability. A normal teenager's profile can have dozens of different code blocks clashing against each other. If tomorrow MySpace programmers decide to change the class attribute of their internal system or reorganize the table hierarchy, millions of customized profiles will go down the drain overnight. It's a house of cards held up solely by duct tape and desperation.

From a purely technical standpoint, throwing the doors wide open for the user to insert unfiltered HTML seems like a ticking time bomb to me. Not just because of the bleeding visual disaster we all know about, but because you are actively inviting someone to slip you a Cross-Site Scripting attack. I've seen profiles that execute small hidden Flash players or alter the mouse behavior using hideous proprietary Microsoft filters. All this happens simply because the platform prefers to provide a false sense of customization freedom over basic security.

Seeing how the web is advancing, with the Web 2.0 explosion, the intensive use of AJAX, and the fever to share absolutely everything, I wonder if this model of unconditionally injecting code will be the norm on the networks of the future. Personally, I pray for sanity to prevail. The web urgently needs clear standards, neat external stylesheets, and clean code. While that utopia arrives, I'll keep using the Web Developer extension in my browser to disable CSS every time I enter a buddy's profile. At least that way I save myself the headache and the visual suffering.