CSS Inside-Out Conditional (customization hack for template-driven web apps)
10 August 06
A whole class of rudimentarily customizable web applications operates by putting magic function calls into
HTML/CSS templates, which you may then, if you have the patience and knowledge, attempt to customize. For example,
a magic #showButton function may insert a useful system button, so you can move the button
around on the resulting page by moving the magic function around in the template. Part of the magic of the function
may be that the button is only actually inserted if the user is logged in, or it's Tuesday.
Usually the logic and the display components of the magic function are not separated, though, so if you want
the context-sensitivity, you have to take the button exactly the way they made it. If you insert your own button instead of
the magic function, it will always appear on the page, even when the user isn't logged in, or it's Wednesday.
Using a little CSS judo, though, it's possible to make a magic function show and hide your own custom button,
or any custom HTML you want, without the magic function ever knowing it's helping you.
First, in the HTML template, wrap the magic function with a couple extra divs for use in the CSS. If the magic function
is #showButton, for example, wrap it like this:
<div class=Override> #showButton <div class=Mine><input type=button value="My Button"></div> </div>
Next, in the CSS template, add the following lines:
.Override>* {display: none}
.Override>.Mine {display: block}
.Override>.Mine:first-child {display: none}
The > selector matches immediate children, and the :first-child pseudo-class matches
when the thing is the first child of its parent, so these three rules effectively say "Hide everything in the
Override div, except show the Mine div, except hide even the Mine div if it is the first thing in the Override div."
If the magic function inserts its button, then, we get this:
<div class=Override> <input type=button value="Their Button"> <div class=Mine><input type=button value="My Button"></div> </div>
The Mine div is not the first child of the Override div here, so our third style rule doesn't apply, thus Their Button
should be hidden, and our button should be shown.
If the magic function does not insert its button, we get this:
<div class=Override> <div class=Mine><input type=button value="My Button"></div> </div>
Now the Mine div is the first child of the Override div, so all our rules apply, and our button is hidden
along with theirs.
If your browser handles selectors correctly, this should be working below. If it isn't, you do know that Safari and Firefox are free, right?