Zoe Mickley Gillenwater 的五个问题

Zoe 是现代网络的英雄。我第一次从她的书 灵活网页设计 中听说过她，这本书全面而明智地介绍了构建流体宽度网站（以及其他技术，使网站能够利用可变宽度的浏览器窗口）。当时，“媒体查询”还不是什么大事。虽然它是一个不同的概念，但在精神上是相关的。Zoe 在她的新书 Stunning CSS3 中讨论了这一点，以及其他一些 CSS3 技术：基于项目的 CSS 最新指南。

我曾在 ConvergeSE 见过 Zoe 一次，并听过她的演讲。她很懂行！我想我会和她聊聊，了解一下情况。

*Chris: 我知道你最出名的是你的书《灵活网页设计：使用 CSS 创建液体和弹性布局》。对读者来说，这是一本很棒的书，里面有大量的实用建议，而且不害怕说灵活设计能为你做什么，不能为你做什么。那本书才出版了几年。在那个时间里，灵活网页设计的理念有很大改变吗？例如，我仍然经常听到“流体”设计，但很少听到“弹性”，更多的是“响应式”。这些词语有意义吗？它们改变了网页设计的格局吗？还是仅仅是花哨的说法？

Zoe: 我认为自《灵活网页设计》出版以来的两年中，灵活网页设计的整体理念并没有发生太大变化，但它变得越来越重要，而且现在我们有了更多工具来使用，因为 CSS3 有了良好的浏览器支持。自 iPad 发布以来，液体或流体布局一直受到很多关注，因为它们根据用户的视窗大小改变宽度。当有人将他们的 iPad 从纵向旋转到横向时，它们可以适应。它们可以在旧的、小的显示器和大型电视上工作。

我真的很喜欢“响应式网页设计”这个词。与“液体”、“流体”和“弹性”这些仅仅是布局行为的比喻不同，“响应式”暗示了布局提供的益处。它是关于让你的设计响应用户的需求，而不是试图完全、严格地控制设计。但我认为响应式设计是一个大的伞形词——液体和弹性布局是实现它的两种方式，你可以在这些类型的布局中结合使用 CSS3 媒体查询。但你也可以在固定宽度网站上使用媒体查询，在我看来，这仍然是响应式设计。现在有许多方法可以根据用户的设置定制设计，使其尽可能地对用户友好和有吸引力。

我对与液体布局一起使用的媒体查询感到非常兴奋。它们让构建一个网站变得如此容易，这个网站可以在 320 像素的 iPhone 屏幕上一直到 1920×1200 分辨率的显示器上工作。（我不知道为什么有人会想在 1920 像素宽的显示器上浏览网站，但如果他们愿意，你可以选择在没有太多麻烦的情况下为他们提供支持。）

*Chris: 你认为我们应该仅仅依赖 CSS 来实现响应式网页设计吗？处理 1920 像素屏幕和 320 像素屏幕就是一个很好的例子。媒体查询可以帮助我们检测这些尺寸并相应地设计，但这意味着相同的内容被提供给这两个屏幕。难道 320 像素屏幕很可能是在互联网连接速度和处理能力方面要慢得多的设备上吗？因此，让服务器端技术参与进来，提供更轻量级的页面可能是一件好事？或者，让两种设备都获得相同的内容，而且设备之间的能力差距正在缩小，这难道是一件好事吗？

Zoe: 我同意，仅靠媒体查询通常不足以为你所有不同的访客创建最易用的网站。根据网站的不同，你可能确实需要让一些脚本参与进来，以便为不同的设备提供不同的内容或功能。但在一些网站上，我认为将大多数相同的内容和设计元素提供给所有尺寸的用户是合适的。例如，我在我的新书《Stunning CSS3》中使用的媒体查询示例基本上是面包店的宣传网站。像这样的内容简单的网站可能希望他们的移动版网站和桌面版网站具有相同的内容和功能——只是设计不同，以适应空间。因此，使用媒体查询来定制设计，并在需要定制内容和功能时使用其他脚本技术。

*Chris: 你出了一本新书叫《Stunning CSS3》，所以我假设你完全支持在今天的生产网站中使用 CSS3。你如何看待 CSS3 和 JavaScript 重叠的领域？使用 CSS3 并跳过 JavaScript？使用 JavaScript 代替？测试支持并进行回退？有很多方法可以处理它，而且似乎没有多少人对“最佳”方法达成一致。

Zoe: 我要给你一个有点令人恼火的答案：“视情况而定”。但事实确实如此，我认为。有些效果最好用 CSS3 控制，而有些效果最好用 JavaScript 控制。CSS3 中的大部分新增功能都是真正的视觉效果，因此，使用 CSS 而不是 JavaScript 来实现这些效果是最有意义和最有效的。例如，圆角。当然，JavaScript 可以做到，但它不是一种行为——它更有意义地放在 CSS 的领域中。使用 border-radius 来制作圆角非常容易，它只需要下载几字节的 CSS，并且在不支持的浏览器中也能很好地降级。

你当然可以使用 JavaScript 作为许多 CSS3 效果的回退。但同样，你是否应该这样做取决于效果和项目。回到圆角为例，你可以使用 JavaScript 作为 IE 的解决方法，但你可能会因为使用它而导致性能下降，因此对于这样一个小的视觉效果来说，它可能不值得。在我的书中，我谈论了整个过程中的 JavaScript 替代方案，以及非脚本解决方法，并讨论了它们的优缺点。在我认为值得实现解决方法的情况下，我会引导你完成操作步骤。因此，我认为我是这两种方法的支持者（放任不管和提供非 CSS3 回退）。

*Chris: 你有 CSS 的讨厌之处吗？在构建网站时，有没有什么东西让你觉得很头疼，你希望有更好的解决方案？

Zoe: 由于我通常构建液体布局，因此组合不同类型的单位是一件棘手的事情，我经常遇到，比如百分比宽度和基于像素的填充。有很多方法可以解决这个问题，但如果有一种更干净、更简单的解决方案就好了。当 calc() 函数最终可用时，它将非常适合处理这类问题，但这还有很长的路要走！

我讨厌在 CSS 中不得不做的一件事是，将并排元素垂直对齐。比如，使文字标签、表单字段和链接在它们的中间或基线对齐。灵活的盒子布局模型将使这变得很容易，但同样，我们必须等待它。

灵活的盒子布局模型做不到的一件事是我希望它能做到，那就是允许你按比例设置并排盒子的宽度。例如，使一个盒子占据与每个后续盒子两倍的空间，如果添加或删除盒子，每个盒子都会相应调整。有一个普遍且容易理解的误解，认为 box-flex 属性可以让你做到这一点，但根据 W3C 规范，它实际上不是这样工作的，也不是应该这样工作的。因此，目前还没有，也还没有计划，可以用 CSS 来实现比例宽度——至少我还没有找到！

*Chris: 你主要用什么软件来完成 CSS 工作？你使用任何类型的可视化编辑器，还是更喜欢手工编写？你使用任何代码片段/宏/捆绑包吗？还有其他炫酷的工作流程技巧吗？

Zoe: 我使用 Dreamweaver 进行所有 CSS 工作，但我所有代码都是在代码视图中手动编写的。它有很棒的提示功能，我偶尔也会使用它的代码片段功能。您还可以修改其默认的空白 CSS 文件，以包含您想要的任何 CSS 代码片段，这样每次您创建一个新 CSS 文件时，您的起始代码就已经存在了。多年来，我已经创建了自己的标准 CSS 规则集合，我将其添加到几乎每个项目中，因此它在我的默认 CSS 文件中，也保存为一个普通的 CSS 文件，我可以将其添加到我启动的任何新项目中。