Friday 31 August 2012

Postings with spoilers

In a recent posting, I included a spoiler in relation to a movie.

I guess there are a number of ways to handle a spoiler.

One might be to put it into a collapsible section. Another might be to put an image over it (using CSS) and hide the image when the mouse is put over it.

Most techniques require CSS or JavaScript though.

For simplicity, I just:
  1. Used Paint.NET to find out the background colour of my current template
  2. Added a div around the spoiler itself as follows:
<div style="color: #1c1c1c;">Spoiler!</div>

The only drawback of this approach is that if I change my template, my hidden text will be visible.

A better alternative, and the one I went for in the end, would be to use CSS to control both the colour of the font and the colour of the background:
<div style="color: #1c1c1c; background-color: #1c1c1c;">Spoiler!</div>

Now my spoiler is immune to changes in the template.

You could also use the CSS "hover" modifier to make text visible automatically as the mouse is moved over it. But I think having to select the text means that it will not appear unless you intend it to.