228

Currently,

blockquotes,

inline code and

code blocks

have the same background colour. That doesn't work very well when you have a

code block

or inline code in a block quote.

Sure, the formatting still makes it slightly visible, not very.

If there was a

blockquote code {
    background-color: #ddd;
}

in the css,

> the difference would be <code>much more discernible</code>.

12
  • 27
    Possible alternative is to use a RGBA value for the background colour e.g. background-color: rgba(200,200,200,.25) so that it's a darker Gray but with only 25% opacity, then as they stack up they get progressively darker
    – AeroX
    Commented Sep 3, 2014 at 13:06
  • @AeroX: I love that idea, but it wouldn't work for a small subset of users still using old IE (<=8) browsers.
    – naught101
    Commented Sep 4, 2014 at 0:13
  • 18
    @naught101 well, those should update anyway ;)
    – Theolodis
    Commented Sep 4, 2014 at 8:21
  • 3
    Maybe this should be in Meta SE as this could apply to every site
    – SysDragon
    Commented Sep 4, 2014 at 8:23
  • 9
    @naught101 StackExchange only support the last 2 version of browsers (excluding IE9) anyway so that's not a problem.
    – dav_i
    Commented Sep 4, 2014 at 8:40
  • 3
    May I be the first one to say that it didn't really bother me at all? The difference in font is good enough for me... :)
    – deceze Mod
    Commented Sep 4, 2014 at 8:46
  • @SysDragon I'm pretty sure different SE sites have different styles already.
    – user692942
    Commented Sep 4, 2014 at 10:27
  • Pretty pointless considering the content directly informs the viewer but also the slightly darker font isn't much more discerning. Commented Sep 4, 2014 at 17:50
  • 1
    Plenty dark enough to my eyes. Do keep in mind that some LCD panels are not very good at rendering these shades of gray. Typically a wonky color profile, I think, ask at superuser.com. Best to avoid solving a localized problem with a global solution, this could cause a lot of complaints. Commented Sep 4, 2014 at 18:21
  • @dav_i: as a former web developer, active when IE6 was the most common browser (it was still at 10-15% when I stopped), I really, really, really appreciate that policy.
    – naught101
    Commented Sep 5, 2014 at 0:32
  • 2
    Suggested long, long ago but no traction. Too busy watching TV.
    – Cody Gray Mod
    Commented Sep 5, 2014 at 5:35
  • 2
    I think status-completed could be added here (see update in my answer).
    – unor
    Commented Jan 16, 2015 at 13:03

4 Answers 4

104

I’d say the code background should be kept, but the blockquote background should be changed.

Here are the styles used by Software Recommendations (probably the default for SE sites?), which work pretty nice in my opinion:

Background color of blockquote is yellowish, background color of code block is greyish, and a blockquote with inline code is yellowish with greyish background for the code

A nested blockquote shares the same background, while the left border highlights the quote level. A quoted code block is greyish while the quote around it is yellowish.

Update

We now have (almost) the same style on Stack Overflow. See screenshot from 2015-01-16:

Background color of blockquote is yellowish, background color of code block is greyish, and a blockquote with inline code is yellowish with greyish background for the code. A nested blockquote shares the same background, while the left border highlights the quote level. A quoted code block is greyish while the quote around it is yellowish.

4
  • 1
    Yes! I keep meaning to ask for the same quotes as the rest of SE; they look so much better. BUT, how does code look in a quote then? Not inline, but the proper stuff..?
    – Ben
    Commented Sep 4, 2014 at 19:12
  • 8
    I'd be happy with that. With that left border, it also deals well enough with the blockquote-in-blockquote problem.
    – naught101
    Commented Sep 5, 2014 at 0:34
  • 1
    @Ben: I added a screenshot showing a quoted code block.
    – unor
    Commented Sep 5, 2014 at 11:06
  • 1
    I've implemented these styles with User CSS in Firefox. Simply follow the instructions in the comments: gist.github.com/bfrohs/9a1fc1f9bbec1637a841
    – 0b10011
    Commented Sep 23, 2014 at 16:28
27

Why not use a semi-transparent background-color so that nested blocks become increasingly dark?

blockquote, code {
    background-color: rgba(0, 0, 0, .07);
}                                                                                          /* I need the following stuff but I can't hide it from you yet :( */ blockquote { padding: 10px 10px 1px; margin: 0 0 10px 0; } code { padding: 1px 5px; } pre code { display: block; padding: 10px; } p { padding: 0; margin: 0 0 1em 0; }
<p>Here's a <code>blockquote</code>:</p>
<blockquote><p>Here's a <code>pre</code>:</p>
    <pre><code>foo();</code></pre>
    <p>Another <code>blockquote</code>:</p>
    <blockquote>
        <p>Another <code>pre</code>:</p>
        <pre><code>bar();</code></pre>
    </blockquote>
</blockquote>

This would also look nicer for deleted posts (red background) and posts animated with jquery ui's effect("highlight") (yellowish-orange background) as it would simply darken the underlying background color rather than staying a static grey.

I swear I didn't steal AeroX's idea. This follows from my suggestion here.

3
  • 23
    Using Stack Snippets in an actual answer...? awww yeahhh!
    – Matt
    Commented Sep 4, 2014 at 19:00
  • 1
    +1 but I wouldn't care even if you had stolen my comment and turned it into an answer
    – AeroX
    Commented Sep 10, 2014 at 11:43
  • 2
    I beg to differ, yellow background with slightly darker left border is infinitely better for blockquote. With the old gray background, code is ok. Commented Sep 21, 2014 at 8:43
21

What I suggest is:

If quote isn't prominent then problem with <code> doesn't even apply. I'd extend same concept to <pre> too (to make it more distinct from a code block) but this is another story...

Here it's an example of what I mean (from an hypothetical answer, text has serifs to make clear what's the example and what's this answer text):

Example of proposed solution

Note how visual flow isn't broken by quotations but they're also distinct from surrounding text. Citation from OP is muted (it's available within same page but it's copied for clarity, moreover different color - even if muted - will also help to quickly identify each section). Citation from another source has same visual importance as answer text (because it's part of it and it completes answer). I'd also support <cite> tag (now it's unsupported and it's not styled), it's especially useful for external resources.

It's not a common case but blank background and border also allows to have nested citations (note it's still easy to understand that inner citation comes from an external resource, no color mixes and transparencies to decode):

Nested citations example

Explanation

First of all I'd avoid to use only different background colors (as suggested in other answers) because of it won't work with color blind people (around 8% of male population).

I think quotes doesn't need a strong visual appearance, what you need is a subtle visual element to make it clear.

For example Bootstrap uses a simple thick line of the left of <blockquote>:

Bootstrap example

Similar style is used in Foundation (with a thinner line and slightly lighter text):

Foundation example

Also just margin and text style work pretty well:

Padding only example

Extra borders may make text nicer and more elegant (IMO) but they don't really improve legibility (creating a too strong separation between paragraphs) so I'd avoid them. Colors may also be used but risk is to make page too noisy and they should chosen carefully again to avoid confusion for color blind people.

Moreover inline <code> has a lighter background than a code block. I think it's good to reduce "visual noise" of the page. Anyway, whatever is the style for inline or block code, I think to make <blockquote> less prominent will greatly improve legibility and it'll match globally accepted typographical conventions (here it's StackOverflow to do something strange: why quote is highlighted compared to normal text?).

<rant>

Actually SO a common usage of blockquote is semantically wrong:

The main purpose of a blockquote is to separate a large section of text — quoted from an outside source — that is relevant to the source material at hand.

A normal usage of <blockquote> is to repeat a sentence from question to answer step by step. It's called Pull quote:

A pull quote is a quotation or excerpt from an article that is typically placed in a larger or distinctive typeface on the same page, serving to entice readers into an article or to highlight a key topic.

This type of quote should be placed in a <aside> element:

The [aside] element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page. It’s not appropriate to use the aside element just for parentheticals, since those are part of the main flow of the document.

What I care (here) is not HTML page code itself but visual appearance those quotes should have. IMO it should be clearer if we're quoting OP or we're quoting an external authoritative source.

</rant>

3
  • 10
    I like pandas!!!
    – Amit Joki
    Commented Sep 4, 2014 at 17:34
  • I'd be happy with the first ones, but please don't make blockquotes italic - that just makes <em> tags harder to read.
    – naught101
    Commented Sep 5, 2014 at 0:36
  • 1
    Huh... why don't inline code blocks in comments have grey backgrounds on meta.SO?
    – naught101
    Commented Sep 5, 2014 at 0:37
8

Adding to @unor's answer, Software Reccomendations (among other sites) has not only got the difference between quotes and code blocks right, but also nested quotes and quoted code blocks right.

enter image description here

You must log in to answer this question.

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