与 Nicolas Gallagher 的五个问题

Nicolas 拥有一个每个人都应该订阅的 网页设计博客。他以我们都应该努力达到的透彻性和理解力来解释事物。我与 Nicolas 进行了交流，向他询问了一些关于网络未来、他的生活以及他是否对其他人有任何建议的问题。

*Chris：我特此授予您“伪元素博士”的称号。您显然在该领域做了很多 实验，并制作了一些 很棒的演示。您认为伪元素在现代生产级 Web 工作中的作用是什么？它们有光明的未来吗？

Nicolas：由于伪元素的浏览器支持范围比许多 CSS3 属性/值/函数都广，因此我看不出在适当情况下不利用它们的任何理由。除了使用生成内容的基本用途外，还有几种基于伪元素的技巧，它们提供了一些极佳且灵活的方法来逐步增强网站，而无需使用表现性 HTML 或图像。当与 CSS3 结合使用时，它们提供了更多可能性。

大多数人在现代生产级 Web 工作中已经使用伪元素。注入生成的内容（无论是文本还是图像）是它们的根本目的。“clearfix”技巧是最广泛使用的伪元素技巧。最近，我一直在生产工作中融入的一些较新的伪元素技巧包括：无需额外标记即可裁剪精灵图、无需图像即可创建纸张折角效果、无需图像即可应用阴影、更易访问的图像替换形式以及“突出”背景图像。

我使用这些技巧来完成目前 Web 技术内置功能无法实现的事情。它们帮助我保持 HTML 的语义化和精简。当出现更好的方法并得到充分支持时，这些技巧（就像之前其他的技巧一样）将从我的工具箱中退休。很难知道它们将来如何融入前端开发，但就目前而言，我认为它们构成了某些有用技巧的基础。越来越多的人开始在实验和视觉效果中使用它们的事实表明，人们对您可以用它们做什么以及减少生产工作中使用的表现性 HTML 的数量越来越感兴趣。

*Chris：伪元素实际上是 CSS2 的一部分，但您最近向我指出，CSS3 规范专门有一节内容介绍它们。它自 2003 年以来就没有更新过，并且其中描述的内容没有一个被任何浏览器实现。但是，它包含一些非常有趣的内容。例如多个/链式伪元素以及诸如 :outside 之类的东西，它可以将内容放置在伪元素上级之外。这些东西将使这个已经很强大的想法变得更加强大。您认为它为什么被忽视？您认为它是否有潜在的问题？

Nicolas：我推测它目前被认为优先级很低。实现 HTML5（以及相关技术）以及 CSS3 模块中为开发人员和 Web 用户提供价值的部分，具有更清晰的直接优势。诸如选择器、阴影、渐变、圆角、转换、过渡等内容长期以来一直是开发人员愿望清单上的内容。它们的需求量很大，以至于 JavaScript 库长期以来一直在填补空白。我想浏览器供应商正在将其有限的资源投入到收益最大的领域。

CSS3 生成和替换内容模块的功能可能是“锦上添花”——我们可以进行一些疯狂的实验——但也有可能其中大部分根本不会被实现。在我看来，CSS3 的其他部分更有用且更紧迫。一个合适的 CSS 网格或布局模块就在其中。我们仍在使用浮动和其他技巧来创建简单的 Web 布局。这个最近的提案看起来很有趣——http://www.interoperabilitybridges.com/css3-grid-align/。许多聪明人在研究 CSS 规范和浏览器；这些事情不可能容易。但时间确实很长了！

我也很好奇您在开发新的 CSS Tricks 网站时的体验。您在其中使用了大量实验性的 CSS，但您仍然希望有哪些功能？

Chris：当然，更好的布局系统会很好。我仍然在使用浮动，因为它是最跨浏览器兼容的基于 CSS 的布局技术。我想到的一件事是我正在使用的滑动主导航。我尝试了各种方法来实现它，其中一种是开始获得一些支持的弹性盒模型技术。在一个像这样的网站上，对于像这样的一个小装饰，我完全没问题使用渐进式技术。但是，即使在支持它的浏览器中，动画也断断续续且效果很差。我确实希望这些前沿的 CSS 功能能够得到更完善的实现。发现一些跨浏览器的小问题也很令人沮丧，例如 Opera 支持使用 -o-transition 的过渡，但不支持 background-position 过渡。因此，仅仅因为浏览器“支持”某个特定属性，并不意味着它在其他浏览器中以相同的方式支持。

*Chris：JavaScript（特别是库）可以做的事情和 CSS（特别是 CSS3）可以做的事情之间越来越多的重叠。例如过渡和动画，甚至跨越到“事件”领域的事情，例如使用 :target 和 pointer-events 对点击做出反应。如果您必须选择使用哪种技术，您会倾向于哪种？

Nicolas：尽管 JavaScript 和 CSS 可以做的事情之间存在重叠，但我认为大多数情况下，这不是选择其中一个而不是另一个的问题，而是确定哪种技术最适合效果或交互的特定组件的问题。这些决定将取决于上下文：项目的具体要求、您想要实现的效果或体验的性质、浏览器支持等。

如果可以在足够广泛的浏览器中完全使用 CSS 轻松完成某些操作，那么我会选择 CSS 解决方案。曾经有一段时间，JavaScript 用于图像悬停效果，因为 CSS 不可用或未得到广泛实施。现在，它可以通过 CSS 轻松实现。某些效果（例如简单的过渡）也可能从在 JavaScript 中完成转变为在浏览器支持改善后在 CSS 中常规完成。现在，我宁愿使用 CSS 过渡来进行小幅增强。如果某个效果不是必需的，我会倾向于使用 CSS 并将其排除在不支持的浏览器之外。

对于用于改善网站体验的更复杂和重要的交互，JavaScript 是主要工具。脚本可以做一些事情，这些事情永远不会成为 CSS 层的一部分。随着 CSS 的不断发展，我们可能会能够将交互的更多组件（例如转换、过渡和动画）移入 CSS 层。但 JavaScript 将始终发挥作用，处理绑定、逻辑、计算、协调以及脚本相对于 CSS 提供的任何其他功能。JavaScript 专家（我不是其中之一）可以对 JavaScript 在现代 Web 开发中日益重要的作用提供更深入的见解。但是，一旦您脱离基本的交互，我通常会发现自己使用 CSS 和 JavaScript *一起*来实现预期的结果。

*Chris：我最近 进行了一项调查，了解大学学位与其与人们当前工作的关系。结果表明，大多数人的学位至少与其作为 Web 工作者的工作存在间接关系。我看到您拥有社会人类学硕士学位。您是否认为这至少与您目前的工作存在间接关系，或者这是一种牵强附会？

Nicolas：对我来说，这绝对相关。我现在所做的事情感觉像是当我还在学术环境中学习人类学时所做事情的延续。我仍然进行研究、草图绘制、试图识别和挑战假设、向他人学习、与他人合作、创造事物……并且经常感觉自己一无所知！作为一种思维方式，两者之间的相似之处多于差异。

你会发现很多 Web 工作者会写关于他们的工作与武术、音乐、园艺或烹饪之间的联系。当你享受某些事物并定期执行它们时，你会看到它们之间的相似之处。我所做的事情中，没有一件我没有将其视为与我从学习人类学中学到的知识相关，以及从中受益的。

作为一门学科，互联网的方方面面都是人类学探究的对象。“用户研究”和人类学领域有着根本的联系，许多人类学方法也被以不同的方式应用于用户体验工作和产品设计中。谷歌和Facebook（以及其他一些公司）都在进行着属于人类学范畴的研究，这两家公司也因此雇佣了人类学家。这是一门非常多才多艺的学科，你会发现人类学家几乎在你能想象到的任何环境中工作。

*Chris：你今天会对一个正在考虑将网页开发作为职业的大学生说些什么？

Nicolas：我不确定网页开发的职业生涯是什么样子；我认为我还没有一个！但我看到一遍又一遍地重复出现的一个观点——我非常赞同——那就是你应该真正享受你所做的事情。为了乐趣而构建东西，尝试你的想法，尝试新事物，发布你的成果，并与社区中的其他人互动。理想情况下，你向朋友和家人描述的“工作”对你来说应该更像是“玩耍”。其他的都会随之而来；无需急于求成。