css - `content: ' '` 与 `content: none`

Question

我在阅读 Eric Meyer 的 CSS reset 时看到了这个:

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

我假设某些浏览器支持 content: '' 和一些 content: none，是这样吗？哪些浏览器支持哪些？

Answer 1

Meyer 将那个版本的 blockquote/q 重置样式归功于 Paul Chaplin。

卓别林的 post关于主题包含以下样式 block ，注释很有帮助。

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

归根结底:大多数浏览器的当前版本仅支持 quotes: none 样式，这消除了使用 :before 和 :after 的需要 选择器。奇怪的人是 Safari/WebKit，它不尊重 quotes: none。解决这个问题的下一个方法是使用 :before/:after 伪元素，但在撰写本文时，WebKit 不支持 content:也没有，所以 content: "" 是必需的。

然而，那篇文章是在 2008 年，而且是 quick test使用当前的 WebKit 浏览器(Safari 5.1 和 Chrome 12)显示 quotes: none 在两者上都可以正常工作。 content: none bug against WebKit由于某种原因仍然开放，而 bug for the quotes property最近关闭了。

所以，长话短说，额外的样式似乎是为了支持旧版本的 Safari(可能还有 Chrome)。确切地确定它们何时获得支持有点困难，但所有浏览器的当前版本似乎都可以很好地处理 quotes: none(和 content: none)。