Layout

[active_apathy]

My recent project, to find a way to get a ComplexSpiral-like effect on LJ, has led to my new layout. It works properly for most current browsers, except IE/Win and Opera (I think). Amaya has a couple of issues with the code, but most like that's from the HTML that LJ gives me - even Trident (the IE/Win rendering engine) manages to render it properly.

It looks kinda ok in IE/Win. That's called 'degrading gracefully'. In other browsers (like Firefox), there's only a tiny patch that's different, but it rather dramatically changes the look of the page. The original image was Tony DiTerlizzi's pic of the Painter that's used in Artists' Alley over at Planewalker.com.

The most beautiful bit of it, though, is that the whole background effect adds roughly as much to page weight as would a large animated icon - a whole 38.6 KB.

Comments

[active-apathy.livejournal.com]

Not a problem at all. We just need to remember that HTML basically uses a tree to represent what's going on - that is, you have:

         html
        /    \
    head      body
    /  \         |
title  link  [content]

So, let's go through the tricky bits first.
: indicates a 'pseudoclass', which are special classes (like the ones you can make with tag.class) assigned by the browser. Examples include :hover. IE/Win only supports pseudoclasses for links, and then only :link, :visited, :hover and :active.
:first-child is a pseudoclass for an element that's the first child of its parent.
+ shows an 'adjacent sibling' - that is, the elements on either side of the + have to be next to each other in the tree, and have the same parent.
# indicates an id or name. div#content will match <div id="content" ...>
Finally, tag1 tag2 means that tag2 has to be a descendant of tag1, though it doesn't matter how many levels of the tree you have to go through to get there. For a direct descendant, you need to use tag1>tag2, but that's not supported by IE.