The joy of CSS, SSI and the lot

So… wait, I am not linking to Mirrors of Eris. Not yet. Might seem too forward and self-pushing otherwise.

Now, in building Mirrors of Eris I’ve toyed with the look plenty of times — the site’s currently 80% in its second major CSS overhaul in as many days. The 80% is because dagnabbit I, being an idiot, put one div too few into the blank page I copy-pasted when building the original skeleton; as a consequence there’re a few dozen pages in the fiction (my scribbles) category that all still use stylesheet v5 because v7 would need adding one container div, and switching the places of two others.

The presentation business is endlessly fascinating, and a bit frustrating. If you go to the main page (well, maybe I’ll link there later in this post), you either see a big radial gradient effect below the title, or you don’t. The choice depends on the browser you use.

If you use Firefox, Safari, Chrome, or a few of the small ones, you see the gradient. (“I can see the gradients”, the hollow-cheeked graduate student mumbled. “But do they see me?”)

If you use Internet Exploder or Opera or something else, you don’t see any gradients. (Also, in Microsoft-land IE uses you — wait, sorry, no time for memetical mutations.)

The reason is, browsers that use Gecko (the Firefox engine, I think) understand the -moz-radial-gradient CSS I put in, and Webkit browsers (Safari, Chrome, others) understand the -webkit-gradient thingie’s radial version, but there is no way to make radial gradients that IE understands. (Linear gradients, yes. And with images all is possible, but that would be inelegant and I am lazy.) Thus, and since the gradients are just a decorative element, some browsers slip into a solid background color. (And note the gradients affect only the mostly textless top of the page; I am not so mad as to let flashiness get the better of usability.)

One may think, “Does this person indeed have this much free time? How can he know things are as he says?” — to which I say, if only I had more free time. But no, I have the free time I happen to have; and I have the use of Browser (screen)Shots, too. Which invariably tells me that anything I do will not, never, not ever, display right in IE 6. But as Google, Youtube and Facebook have said they’re willing to piss on the rotting corpse of that miserable excuse for a browser (er, sorry if you are an IE 6 victim), then maybe I can be excused allowing a little breakage (but nothing catastrophic) too.

That’s my design philosophy, if an amateur like me can have such a thing. I’m okay with things looking different in different browsers, as long as only shine is lost; as long as the site just looks less pretty, I’m OK. And as far as I’ve managed to check things, Mirrors of Eris should work with most-all browsers, and the loss of shine should just make it less pretty, and not outright abominable. (Then again, your aesthetic standards may vary.)

In addition to looks (or presentation) I’ve also done a lot of learning on organization. There are three sub-pages (“E.E.E.”, “Interfaith!” and “Math Dark Sin”) which are indices into a horde of smaller, bite-size blasphemies, mockeries and entertainments (respectively, “my own (atheist-)Discordian church”, “all the other religions” and “are mathematicians the root of all evil?YES!!!“). Thinking about this, it struck me early on that these one hundred or so sub-subpages would drive me mad if I ever needed to update something in all of them. (That is, html-update — since every page links to the same CSS file, CSS updating is easy. Or would be, if not for a tedious few pages that refer to an earlier CSS file because I haven’t gotten round to adding the extra divs and bits the newest CSS file needs.)

Because of this update angst, I designed this subset of pages, nicely and sequentially numbered, so that I could update them easily. I drew up a html template for such a page, same for each except for the text which said “content of PAGENUMBER here”, “link to PREVIOUSPAGE here with NAME_OF_PREVIOUSPAGE as the link text”, and the like. The actual numbering I had to learn this BASH shell scripting thing for; remember, I’ve been a Linux user for only a few months! The result was a drooling simpleton abomination of a script that would generate the html framework for the hundred or so sub-subpages.

Then, being a devious man, I made it so that the “content of PAGENUMBER here” text was actually a server-side include (SSI) command — basically a line that tells my host that “when you’re sending this file down to John Q. Randomgoogler, put the contents of this separate file CONTENT_PAGENUMBER here, and don’t tell John Q. anything about it.” (Also, “put the separate file which has the title of the next bit here to be the link text”; and so on. The pages have a “shtml” extension instead of “html” because my particular host seems to need that to let the SSIs work.)

As a result, the content of those pages lives in their own separate easy-to-edit files; and the containers I can change any way I want by just editing the BASH command and the few snippet-files it uses to slam the containers together. Then a one-line command to activate the script, a copy, a paste, and the files are all updated!

The script is named khoura; as far as I know a pleasant nonsense word, though it echoes koura, a Finnish word for a hand, or more accurately a big, crude paw of a hand. The text snippets khoura uses are basically the constant bits between the changing numbers; the script keeps increasing three variables called previous, this and next, and on each  pass through the loop generates one more file into the chain, properly linked to the ones before and after it. (So 005container links to 004container and 006container, and so on.) And, because nitpicking never ends, the next of the last file generated is the number of the first file; and vice versa, so the chain becomes a loop and the unwary and demented reader can go on reading the next of the 34 Interfaith! snips forever and forever.

(One particular battle of geek over practice is whether it would still be better to do the whole final piecing-together with BASH too, and get rid of the SSI. Which would mean more bashing of head against wall, since that would mean redoing the indices, which at the moment list the sizes of the snippets — or rather the sizes of the files which have the content in them, not the files of content-plus-container the browser will always see. And each snippet page has a “last updated” line at the bottom; that would need to be integrated into the BASH commands too, since the date of the content-plus-container wouldn’t tell anything about the time the content was last updated — which is what the line is supposed to tell. Who cares when the divs were last retouched?)

(Here the main argument against this simplifying of the process, is that now I can always backup the web contents and the ten or so khoura files, and all’s safe. The non-SSI system would mean that one essential part of the site would be over there, and another half over here. Backupping the finished files wouldn’t much help in recovery, as they would need to be taken apart before the former system could resume. And with the SSI system I can edit anything over on the host, and not need to worry about the edit being rewritten in the next container update. But I am fairly certain you’re tired of this rambling CSSholery already, right? So no more.)

I hope after all above it does not seem too forthright to say: Mirrors of Eris, a demented, more playful sister to these here Masks of Eris; have a look.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s