CSS reset and quirky quotes

I read Eric Meyer's Reset Reloaded late last year, and have been toying with a reset.css of my own. Eric recently posted an update to his version, and the following caught my eye:

The small changes involve a paring down of the possible quotation around blockquotes and qs. Before, I was explicitly pushing in empty generated content boxes with content: "", but there was no need. A simple quotes: none; takes care of suppressing any automatic quotation marks on those elements.

Something in the back of my mind wasn't happy with that, so I went hunting. It turns out that that WebKit, and presumably Safari (as per its documentation), do not support the CSS 2.1 quotes property, so will suffer doubled quotes when only the quotes: none; method is used in conjunction with hard-coded quotes in the markup.

I've whipped up a test page that shows the lack of support in WebKit/Safari, and includes my modified version of Eric's no-quotes CSS rules from Reset Reloaded. The CSS successfully suppress generated quotes in a recent WebKit nightly, so hopefully also works in the various Safaris - confirmation would be much appreciated.

Interestingly, when I tried the :before/:after method on my alternative test page with just content: none; (a property specified in CSS 2.1), it worked fine in Konqueror 3.5.8 (using the KHTML renderer, which WebKit is derived from), but seems to be unsupported in the WebKit build I used. Using content: ""; (since none is not specified in CSS 2), as in Eric's Reset Reloaded, does the trick, but as Eric himself notes in his update, this actually creates empty generated-content boxes. Unfortunately, it seems to be the only way to strip quotes from Safari.

Also, in Konqueror 3.5.8, when using just the quotes: none; method, an unexpected black box appears at the end of the q element. I'm not entirely sure what causes this, and would appreciate any insight, but it's yet another reason to suffer the content: ""; method, at least for now.

This is my recommendation for anyone wishing to remove generated quotes:

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;
}

Phew. A lot of attention for such a little problem, but duly documented in any case.

I'm still refining my own version of a reset.css, and when I'm happy with it, I'll post it on here. Happy coding!


6 Responses to CSS reset and quirky quotes

  1. 31 Kilian Valkhof 2008-01-26 12:17:56

    Good find, Paul! lets hope those various bugs get fixed soon, but for now your solution seems to work fine :)

  2. 205 Eric Meyer 2008-02-07 19:59:49

    Well spotted, sir. I've done some testing of my own and have seen the same things you did. (Also: 'content: normal' suppresses the quotation marks in Camino, and probably other Gecko variants, but not Safari.) Mind if I use your technique, with credit, in my reset?

  3. 214 Paul Chaplin 2008-02-08 21:21:03

    Hi Eric - thanks, I'm glad you've seen the same results. I hate that period before independent confirmation when you think you have every base covered, but there are still those nagging doubts!

    Please feel free to incorporate my technique however you see fit (I take the same view as you that licences are overkill for this sort of thing, though I'm all too familiar with the legal "gotchas" that make them a good idea, so will be pleased from a CMA point of view when your reset file is explicitly licensed). While credit for this would be very much appreciated, please don't feel obliged - this is only a minor alteration of what you had already published, after all. :)

    It's very interesting that content: normal; has the different effects you mentioned - thanks for noting it.

    Also, my apologies for the first-comment moderation; the spam filter I'm using is remarkably good, but not as near-perfect as Akismet.

  4. 263 Mike Cherim 2008-02-13 03:41:43

    Well done Paul. Thanks for going through all this for such a little problem as you say, but it does a lot of good.

  5. 3175 Mike Novak 2008-06-11 16:54:18

    Good job. The :before/:after method doesn't work in most browsers. I hope they will comply with that standard soon.

  6. 6681 Ben Dodson 2009-04-17 13:26:53

    Unfortunately content: ""; is still the only way to get rid of the quotes in Safari 4 beta. I was rather hoping that one of the other ways mentioned would work now, but alas not!


Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 30720 bytes) in /home/paul/domains/paulchaplin.com/public_html/blog/system/themes/k2/commentform.php on line 21