41

Spoilers are usually not quotes. But currently spoilers (after clicking) look exactly like blockquotes. So the reader has to memorize which paragraphs he clicked (spoilers), and which were already visible (quotes). Such memorization is distracting and the need for it can be avoided.

Compare (after clicking on the spoiler):

This is a spoiler.

vs

This is a quote.

A different hue with same lightness would be not so colorblind-friendly, but would be a great start. Maybe additionally a big symbolic quotation mark like on other websites would be appropriate.

Edit: This improvement should be implemented directly on the SE website. It shouldn't be reserved to users who have the time, tech skills, and access rights to install userstyles.

In the wake of this improvement, it could also be made clearer that spoilers are clickable and not only hoverable.

  • 1
    It would be cool if we could set personal rendering preferences in our profiles. For example, I usually don't care about spoilers spoiling stuff, so it'd be cool if I could just set a rendering option that suppressed the hiding. – Nat Nov 12 '19 at 0:11
  • This isn't much of an issue on the mobile site or apps. – Sonic the Masked Werehog Nov 12 '19 at 0:11
  • This is something that can be done via user styles, and IMO this should be done by user styles. – muru Nov 12 '19 at 2:25
  • 1
    @Nat I have a CSS-based solution for that as well in my answer. – Glorfindel Nov 12 '19 at 6:05
  • 5
    Huh, today I learned that I can click on a spoiler and it stays visible. Up till now I was always hovering over them. – user142148 Nov 13 '19 at 10:17
  • 1
    What's your beef with lightness? ;) – Lightness Races in Orbit Jan 11 at 15:31
  • 3
    Dang it, OP, now I know Harry was a wizard :( – Lightness Races in Orbit Jan 11 at 15:34
18

The spoiler feels very 1998. It reminds me of the <marquee> tag, but I like it.

I think the current spoiler-guard

If you saw this text before you knew this was supposed to be hidden I haven't done my job.

isn't clear what it is. At first it just looks like the poster made a mistake and left a blank box.

 

The spoiler shouldn't reveal what is under it on flyover. It should require a click.

It should be clearer that it hides some information from the UI at a first glance. Gray can would work well against black text. Stripes help indicate it is a type of "scratchable screen" -

spoiler guard

Don't look now, but CSS 3 supports candy stripes

<style>
.spoiler {
  background:repeating-linear-gradient(
  135deg,
  #fff,
  #fff 15px,
  #eee 15px,
  #eee 20px
  );
}
</style>
<p class="spoiler">
    some spoiler text
</p>
| improve this answer | |
  • 2
    For what it's worth, on mobile it says "click to show spoiler" and you have to press the quote box. On the desktop version of mobile it's just a blank box though whose text is invisible until you tap it – Medix2 Nov 13 '19 at 7:01
  • 1
    @Medix2 or flyover – bobobobo Nov 13 '19 at 7:14
  • 4
    Re "The spoiler feels very 1998": And blinking ads? – P.Mort. - forgot Clay Shirky_q Nov 13 '19 at 13:57
  • 1
    @PeterMortensen 1999 – bobobobo Nov 13 '19 at 15:11
7

As @muru notes in the comments, this can be done by user styles; small snippets of CSS which can be added to a webpage with an extension like Stylus. The first block below adds a quotation mark to blockquotes; the second one changes the background of a spoiler block to the 'scratchable screen surface' from @bobobobo's answer.

blockquote:not([class=""]):not(.spoiler) > p::before {
    content: "“";
    font-weight: bold;
    padding-right: 10px;
}

blockquote[class=""], blockquote.spoiler {
    background:repeating-linear-gradient(
        135deg,
        #fff,
        #fff 15px,
        #eee 15px,
        #eee 20px
    );
    border-left: 2px solid #bbb;
}

Results (after I clicked on the spoiler in your question):

enter image description here

Probably somebody with more CSS skills / better ideas than me can make something nicer. In particular, I'd like the quotation marks to become larger without increasing the height of single-line blockquotes (which is what happens if you add e.g. font-size: 2em).

The main trick here is that a blockquote element for a quote has no class attribute at all, while a spoiler has class="spoiler" before clicking and class="" after; that's the only CSS-accessible way to distinguish them.

There are other browser extensions which can do CSS enhancements; I'd avoid Stylish for reasons mentioned here.


If you need a CSS-based solution to disable spoilers altogether, as mentioned by @Nat in the comments, you'd need something like this:

.spoiler:not(:hover) > * {
    opacity: 1;
}
.spoiler:not(:hover) {
    color: inherit;
}
| improve this answer | |
  • 3
    This improvement should be implemented directly on the SE website. It shouldn't be reserved to users who have the time, tech skills, and access rights to install userstyles. I guess your suggestions are meant as a draft for an SE-wide change. – root Nov 14 '19 at 14:24
  • 3
    Many improvements to the network have started out as userscripts/userstyles. – Glorfindel Nov 14 '19 at 14:25
5

It looks like a new CSS update just implemented this feature request:

enter image description here

Blockquotes don't have the yellow background anymore, and the background for spoilers has been changed to a light gray.

| improve this answer | |
  • 2
    Original announcement on it. – TheLethalCarrot Mar 9 at 17:25
  • 3
    This unfortunately didn't solve the issue. Click on the spoiler (this unhides the text) - it will look the same as a quote. – root Mar 10 at 18:41
  • 1
    @root Not so? Spoilers that are revealed should still have a grey background. – Catija Mar 10 at 18:50
  • 8
    @Catija The gray background still exists if you mouse over it, but when you click it, it disappears. – Sonic the Masked Werehog Mar 10 at 19:20

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .