Question

I was reading through Eric Meyer’s CSS reset and saw this:

blockquote:before, blockquote:after,
q:before, q:after {
    /* ? */ content: '';
    /* ? */ content: none;
}

I assume that some browsers support content: '' and some content: none, is this the case? And which browsers support which?

Answer 1

Meyer credits Paul Chaplin with that version of the blockquote/q reset styles.

Chaplin’s post on the subject contains the following style block, helpfully annotated.

blockquote, q
{
    quotes: none;
}

/*
Safari doesn't support the quotes attribute, so we do this instead.
*/
blockquote:before, blockquote:after, q:before, q:after
{
    /*
    CSS 2; used to remove quotes in case "none" fails below.
    */
    content: "";
    /*
    CSS 2.1; will remove quotes if supported, and override the above.
    User-agents that don't understand "none" should ignore it, and
    keep the above value. This is here for future compatibility,
    though I'm not 100% convinced that it's a good idea...
    */
    content: none;
}

To boil it down: current versions of most browsers simply support a quotes: none style, which eliminates the need to use the :before and :after selectors. The odd man out was Safari/WebKit, which didn’t respect quotes: none. The next way to solve this was with the :before/:after pseudo-elements, but at the time of that writing, WebKit didn’t support content: none either, so content: "" was required.

However, that post was in 2008, and a quick test with current WebKit browsers (Safari 5.1 and Chrome 12) shows that quotes: none works fine on both. The content: none bug against WebKit is still open for some reason, while the bug for the quotes property was closed fairly recently.

So, long story short, the extra styles appear to be there to support older versions of Safari (and possibly Chrome). It’s a little more difficult to nail down exactly when they got support, but current versions of all browsers seem to deal with quotes: none (and content: none) just fine.