I’ve never been a big fan of the way the Internet Movie Database handles spoilers. Check out their page on \ufeffThe Six\ufeffth Sense<\/a> and look down at the “Plot Keywords”\ufeff section. You’ll notice a graphic that reads “Spoiler alert! Rollover or vote to view plot keywords!”<\/p>\n IMDB covers spoilers with graphical text<\/p><\/div>\n I think completely covering the text is overkill. For some movies, plot keywords really are spoilers, but much of the time they aren’t. Plus, the graphical text looks different from the rest of the surrounding text, which makes the page look more haphazard. In short, it wasn’t good enough for me, so I decided to stick with the conventions of print, and just use my words to warn readers about spoilers.<\/p>\n But I changed my mind when I saw what Bryant Frazer did on Deep Focus. His \ufeffreview of Enter the Void<\/a>\ufeff has a section labeled “spoiler territory.” I like it because you can still read it without using your mouse. I like that it’s easy to spot where the spoilers are without having to skim the text. I like that it’s not too gimmicky — it’s just a box with a gray background — and the focus remains on the review and not the interface. So I decided to borrow his idea.<\/p>\n The UI programmer in me had a few things I wanted to change. On Deep Focus, the words “spoiler territory” are part of the text of the article. I wanted the formatting to be entirely CSS. To that end, I used the :after pseudo-tag to label my spoilers section like so:<\/p>\n I also thought the words “Spoilers ahead” should be more prominent than the spoiler text, lest a casual reader miss the warning. On Deep Focus, the small red words are less prominent than the spoiler text.<\/p>\n Finally, I thought that if someone wanted to read the entire review, spoilers be damned, it should be easy to remove the formatting and format the text the same way as the rest of the review.<\/p>\n After some tinkering, I came up with a simple rollover effect that changed the default grayed-out view of the spoiler text to a plain view of the text. Because I didn’t want the text to “jump” as you moved your mouse, I decided to keep the margins of the spoiler text when changing between states.<\/p>\n You can see an example of the new Movie Habit spoiler text on \ufeffRobert Denerstein’s review of Conviction<\/a>\ufeff.<\/p>\n Now, to add a spoiler section to a review, I need only wrap the spoiler text in<\/p>\n No JavaScript, no server code, just plain CSS and one HTML tag. Perfect.<\/p>\n The only reason I might eventually add a little JavaScript would be to allow mobile-device readers such as iPads to click (or tap) to change the state, since they don’t have a “hover” state.<\/p>\n … And in case you want to steal my idea, here’s the CSS I used:<\/p>\n As a film critic and a UI programmer, I’ve long thought about the perfect way to format spoilers. (A spoiler is some part of a movie review that gives away a secret or a surprise.) In print, critics give a … Continue reading ![\"\"](\"http:\/\/boulderinformationservices.com\/blog\/wp-content\/uploads\/2010\/11\/imdb_spoilers.png?w=300\" "\\"IMDB_spoilers\\"")
<\/a>.spoilers:after {content: \"Spoilers ahead\"; position: absolute; top: 0; left: 0; ... }<\/pre>\n<div class=\"spoilers\">...<\/div><\/pre>\n
.spoilers {background-color: #D1D2D4; padding: 1em 1em 0 ; position: relative;}\n.spoilers * {opacity: 0.25; }\n.spoilers:after {content: \"Spoilers ahead\"; display: block; opacity: 1; color: #000; font-weight: bold; position: absolute; top: 0; left: 0;}\n.spoilers:hover, .spoiled {background-color: inherit; }\n.spoilers:hover *, .spoiled * {opacity: 1;}\n.spoilers:hover:after, .spoiled:after {opacity: .25; }<\/pre>\n","protected":false},"excerpt":{"rendered":"