64 Hostile CSS delivery

Posted: Apr 23, 2006, under DHTML. Updated: Aug 18, 2006. Add a comment!
Post pages: 1 2

The prime concern should be how to start injecting CSS into the page. Of course, you can throw in a chunk of <style>, but if you’re feeling particularly evil you might as well shove in something like this:

<head>
<link
  rel="stylesheet"
  type="text/css"
  href="external_stylesheet.css">
</head>

Yes, a <head> in the middle of the page. :shock: I know, I know, it’s terrible to even look at, but bear with me. Many editors do exactly this, since it allows them to put the stylesheet on their own site so they can change it with ease without editing the profile, which is what CSS is all about. The fact that we’re mixing that with such atrocious disregard for valid HTML is just ironic.

Similarly, you can inject a JavaScript script remotely or embed it in the page. However, I propose that you don’t resort to JS unless it’s really necessary, and try to do this with CSS only first.

Once we’ve got our CSS injection (the above bastardization works thanks to the lenient rendering engines in the browsers everywhere), it’s time to start examining the general markup in the page, which we cannot modify, and see about getting some hooks so we can do some styling.

As you can see, there is a table at the top and the bottom serving as a header and footer. Then we have some makeshift “headings” improvised with <font> tags, and some <blockquote> zones in between, where more tables and lists are nested.

One concern is differentiating among the various tables and tables within, since we have absolutely no class or id to hook onto.

Another aesthetic concern is the limitation imposed by the ODP logo image, which has a green non-transparent background and will probably force you to adopt the same green color for the head table too, unless you’re willing to whip out the good old JS and change the image with a transparent one.

Here are some hooking tips:

  • Use center table to hook the head table, blockquote table to hook the one with the contact details, and just table to hook the footer. Of course, the order in which you do this is important. :wink:
  • The <font> tags can be made into headings with some liberal use of font effects and display: block.
  • Use positioned backgrounds for the extra mile.
  • Internet Explorer will prevent you from hooking based on element attributes or order (:first).

You’ll notice that it comes down to a bunch of tables, <font> and blockquotes, basically all block elements, so it shouldn’t be too hard to obtain some decent effects. You’ll have more trouble with the cells in the tables.

I feel the need to warn you that some browsers will choose to render the page in quirks mode while others will choose standard mode. Producing different CSS for Firefox vs Opera may be tricky, so be careful not to end up needing to do that. If cornered, you could be forced to resort to JS or server-side scripting (since the stylesheet is separate it might as well be a script).

Finally, here are several profiles that were considered the most innovative at the 2006 Spring Editor Awards: johndouglas, massy, miriamferrari, spectregunner, tlewis, zelight, guidix, geromarsala, dexter2002. Yes, I know. Amateurs. Go show them.

Post pages: 1 2
Previous post:
How to make a successful blog
 Next post:
Romanians learn about copyright