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!



I'm a web developer with a passion for standards, and a strong belief in quality-over-quantity and using the right tool for the job.