与 Lea Verou 的五个问题

Lea 是一位来自希腊的前端网页开发者。您可能听说过她，因为自从她开始用英语 写博客（下面将详细介绍）以来，她的知名度就迅速提高。或者您可能见过她的一些作品。她创建了许多 单页网站，这些网站要么展示了 CSS 的惊人功能，要么帮助您完成一项困难/繁琐的任务。

我问了 Lea 一些关于她作品的批判性反应、希腊的社区、CSS 的未来等等方面的问题。

*Chris：我认为您用 图案库 证明了 CSS3 渐变可以做的不仅仅是制作 3D 风格的按钮。您在哪些现实世界的设计场景中使用过渐变来完成任务？

Lea：首先想到的是这些：

• 在我的博客上，您可以看到一侧是桃红色的条纹，另一侧是白色。实际上，渐变不仅用于桃红色的条纹，还用于用白色覆盖另一侧。我在 -prefix-free 的首页使用了相同的技巧。
• 在 cubic-bezier.com 上，指南是用 CSS 渐变制作的。
• 在 CSS.coloratum 上，我在颜色的后面使用了用渐变制作的黑色和白色条纹，这在颜色半透明时很有帮助（当颜色为纯色时，它根本不会显示）。
• 在 Michaelia 酒店的网站 上，用于圆圈中的孔以及 预订页面 上的左下角对角线。

当然，在更多需要渐变的情况下，我也使用了 CSS 渐变。但我想你并没有问这个 :)

*Chris：您最近编写了 -prefix-free，这是一个 JavaScript CSS 处理器，它会自动添加 CSS 属性所需的供应商前缀，以使其在用户使用的任何浏览器中都能正常工作。您对此收到了极端混合的反应。反对者可能会谈论“未添加 CSS3 内容的闪现”或笼统地说 JavaScript 不适合这种事情。您能概括一下最常见的投诉并发表您的看法吗？

Lea：“极端混合的反应”确实如此！人们要么非常喜欢它，要么非常讨厌它。幸运的是，前一类人比后一类人多得多。第二类人最常见的投诉是：

“它会导致 FOUC（未添加 CSS3 内容的闪现）”

我的回答：如果您将 -prefix-free 放在样式表之后，FOUC 会非常小，以至于没有人会注意到，除非他们在寻找它。普通用户不会像我们这样去寻找 FOUC。我们可能会认为“它非常快，但我设法注意到一个 FOUC，哈哈！”，但用户甚至不会想到参与愚蠢的“发现 FOUC”游戏。如果持续时间过长或差异过大，他们会注意到它。例如，常规的 FOUC（未设置样式内容的闪现）更容易注意到，因为页面完全没有样式。-prefix-free 的 FOUC 只是在很短的一段时间内缺少一些 CSS3。

“它使样式依赖于 JavaScript”

我的回答：如果 JavaScript 不可用（< 2% 的访问者），则唯一缺少的样式将是一些 CSS3 功能（随着时间的推移和供应商删除前缀，这种情况越来越少）。如果您在设计页面时考虑了优雅降级，即使没有任何 CSS3，它也应该可以正常工作并看起来不错。如果您没有这样做，您将遇到比这更大的问题。“这在服务器端做得更好。只需执行一次，而不是在每次页面加载时执行。”

我的回答：-prefix-free 做的事情在服务器端是不可能做到的。-prefix-free 检测哪些功能需要前缀，并且仅在需要时添加它。此外，它会自动检测哪些需要前缀的属性可用。它不必保留需要为哪些功能添加哪些前缀的列表，所有内容都会进行功能检测，因此非常具有未来证明性。使用预处理器，需要维护关于此类内容的列表。此类列表注定是不完整的，并且很快就会过时。我尝试过的每个服务器端前缀器都会在某些情况下失败。

例如，考虑一下 CSS 动画。一开始，只有 Webkit。然后 Firefox 实现了它们，我们不得不回去添加 -moz- 版本。现在 IE 也刚刚实现了它们，所以一切都必须更改并包含 -ms- 前缀。很快，Opera 将实现 CSS 动画。我们真的要第三次回头添加 @-o-keyframes 吗？可能不会。大多数人只会开始编造关于 Opera 的市场份额很低以及他们不需要费心的借口。-prefix-free 在此类情况下非常有用，因为您永远不需要回头更改任何内容。当 Opera 实现 CSS 动画时，它们在 Opera 中也能正常工作，甚至不需要更新 -prefix-free。

“但是，如果您确实需要供应商前缀因为实现存在错误怎么办？”

我的回答：-prefix-free 不会更改已添加前缀的内容，因此，如果您需要为特定引擎指定不同的内容，您可以将已添加前缀的内容与未添加前缀的内容一起使用。-prefix-free 还会在根元素中添加一个包含当前前缀的类，以提供更大的灵活性。

*Chris：您现在住在希腊。也许只是我的看法，但希腊似乎并不是进步的网络技术的温床。或者我错了？显然，这并没有阻止它培养出像您这样的世界级开发者。对于您能取得的成就，位置还有多大关系？

Lea：你一点也没错，Chris，希腊距离成为进步的网络技术的温床还差得很远。您可能会惊讶地发现，我在希腊几乎没有得到任何认可。我甚至还有一个希腊黑粉！（尽管他住在布鲁塞尔，而不是希腊）

当我第一次开始写博客时，我开始用希腊语发布我的研究成果。没有人太关注。几个月后，我决定试试我的英语博客，好吧，我们都知道结果如何 :)

我认为这是因为大多数希腊开发者都想要一个可以在每个浏览器中都能快速使用的解决方案，将其应用于他们当前的项目并继续前进。他们没有时间思考研究和酷炫的新事物，他们仍在努力使事情正常运作。因此，即使他们会认可帮助简化其日常开发工作的项目和人员，他们也不会太关心实验性内容。希腊人也很重年龄歧视，除非你有很多“工作经验”，否则他们甚至不会听你说什么。年轻人在这里通常会被轻视，如果你不够强大，你实际上可能会相信自己什么也做不了，直到你四十多岁。幸运的是，在我们这个领域，位置关系不大，至少就国家而言是这样。如果您想拥有国际受众，您只需在您在网上做的所有事情中都使用英语，就这么简单。

但是，我计划在几个月后搬出希腊，希望是去美国。即使我是希腊人，希腊也从未真正让我感到像家一样。当我不在这里的时候，我快乐得多。最近的电影《猩球崛起》中有一句台词，我发现它非常感人，正是因为这个原因。在凯撒与其他猿猴相处了一段时间后，再次遇到了他的养父，他拒绝回家，而是告诉他“凯撒回家了”。有时，你所属的地方（“家”）不是你成长的地方或你亲人所在的地方。它是你很容易找到与你相似的人并真正“理解”你的人的地方。

*Chris：多年来，设计师一直通过创建“纯 CSS”的复杂图像来扩展 CSS 的能力。一方面，通常很巧妙且令人印象深刻。另一方面，通常不切实际且无意义。一年半前，您 指出了这一点 并引用 SVG 作为更好的替代方案。您认为为什么设计师没有更多地尝试使用 SVG？一年半后，它仍然是更好的选择吗？

Lea：是的，我仍然认为 SVG 是更好的选择。它是为此目的而创建的，并且它允许做的事情比 CSS3 还要多。但是，它仍然没有获得应有的采用，我主要将其归因于以下原因：

1. 语法复杂。 SVG 允许我们做一些疯狂的事情，但大多数时候伴随着同样疯狂和复杂的语法。一旦你理解了每个功能是如何工作的，它就说得通了，但学习曲线非常陡峭。尤其是在没有调试工具帮助你理解哪里出错，以及关于浏览器支持的信息非常少的情况下，你可能会卡住，想知道是自己误解了什么还是根本不支持。
2. 资源不足。 这有点像先有鸡还是先有蛋的问题。如果参与 SVG 开发的人不够多，就不会有足够多的人编写教程，因此不会有足够多的人受到启发学习 SVG。现有的少量资源要么是针对初学者的非常简单的示例，要么是与应用工作没有太大关联的学术内容（而且两者通常都很丑，把设计师吓跑了）。
3. 规范难以理解。 虽然 CSS 和 HTML 规范在大多数情况下都比较容易理解，但 SVG 规范的很大一部分需要大学级别的计算机图形学和线性代数知识。即使你拥有这种知识，它仍然很难。鉴于上面提到的缺乏良好的 SVG 资源，这对 SVG 的采用造成了比看起来更大的伤害。
4. 懒惰。 人们喜欢熟悉的东西，他们已经知道的东西。如果他们可以避免学习新事物，大多数人都会这么做。
5. 浏览器支持问题。 SVG 带来了自己的一套浏览器错误，其中大部分的文档记录都远不如 CSS 和 HTML 错误。这也是一个先有鸡还是先有蛋的问题：开发人员使用某种技术的越多，其错误的优先级就越高。目前有一些SVG 错误已经存在多年未解决，因为使用它的人不够多。

但是我认为 SVG 拥有巨大的未开发潜力，尤其是在我们现在可以将其嵌入 HTML5 文档的情况下。它隐藏在那里，等待被发现。我们只需要更多有创意的人开始尝试它。

*Chris：你的 CSS 愿望是什么？一些你经常希望用 CSS 实现但无法实现的事情。也许是一个浏览器支持非常有限的现有功能，或者一些完全超出当前规范和规范讨论范围的东西。

Lea：我最喜欢的 CSS3 功能，但目前实现还不够多的是 CSS3 对 attr() 的泛化。在 CSS2.1 中，我们可以在 content 属性中使用 attr()，在生成的內容中使用属性值。在 CSS3 中，我们应该能够在每个属性中使用 attr()，这将大大减少表示性的 JavaScript 代码。不幸的是，只有 IE9 支持它，而且还不完全。如果开发人员意识到它简化了多少用例并开始推动浏览器供应商支持它就好了！

但我也有很多尚未存在的 CSS 功能愿望清单

• 对 currentColor 的泛化：一个 current() 函数，它可以接受任何属性（currentColor 将成为 current(color) 的别名）。
• inherit 关键字变成一个函数，它可以接受一个参数来指定向上嵌套多少层。inherit 将成为 inherit(1) 的别名。
• 能够在任何地方使用颜色关键字 invert，而不仅仅是在轮廓中。
• 能够在选择器中使用 attr() 和 counter()。
• 锥形渐变，希望在 CSS4 中出现。
• 对角线角，具有可调节的角度和大小（示例）

以及许多其他功能。在 CSS 方面，我是一个梦想家 :)

*Chris：谢谢，Lea！