Miriam Suzanne 是科罗拉多州丹佛的一位作家、艺术家和 Web 开发者,目前正在研究令人兴奋的 CSS 规范,例如容器查询和级联层。
此帖子是 Designcember 的一部分。由 web.dev 倾情打造的 Web 设计盛会。
Miriam Suzanne 是科罗拉多州丹佛的一位作家、艺术家和 Web 开发者。她还是 OddBird(一家网络代理机构)的联合创始人、CSS Tricks 的特约撰稿人、Sass 核心团队的成员,以及 CSS 工作组的 W3C 受邀专家。最近,她一直专注于开发新的 CSS 功能,例如级联层、容器查询和范围。在线下,Miriam 是一位已出版的小说家、剧作家和音乐家。我们讨论了她使用 Sass 和 CSS 的工作。
Rachel:我最初是通过网格框架 Susy 了解您的作品的,是什么促使您创建了该框架?
Miriam:2008 年,网页上的布局体验与现在截然不同。开发者已从表格布局转向更具语义化(但仍有缺陷)的浮动网格。当时,12 列“网格框架”大行其道,这些框架提供预定义的(通常是静态的)网格以及一组预定义的 CSS 类。如果您需要更具自定义性的功能,则只能自行解决。很明显,网站需要变得更具自适应性,但媒体查询尚未推出,并且围绕浮动布局存在大量浏览器兼容性问题。
我当时使用的是 Natalie Downe 的 CSS 系统方法,该方法能够巧妙地响应字体和视口大小,但我对所需的所有重复性数学计算和浏览器 hack 感到沮丧。与此同时,Sass 开始受到关注,并且完全符合我的需求。Susy 的第一个草稿非常简单:只有几个用于进行计算和添加所需 hack 的 mixin。目标是尽可能简洁,仅输出必要的代码。完全可自定义的网格,没有任何预定义的类。
Rachel:您是如何从开发 CSS 预处理器转变为开发 CSS 规范的?您认为从事预处理器方面的工作对规范撰写有帮助吗?
Miriam:根据我的经验,这两者之间有很多重叠之处,而且我仍然非常活跃于这两者之间。但我认为这在很大程度上要归功于以 Natalie Weizenbaum 为首的 Sass 团队,该团队采取了非常长远的眼光,致力于开发能够与不断发展的 Web 标准顺畅集成的工具。在考虑核心 Web 标准的未来时,必须超越“意见主导型”的“一刀切”解决方案,并构建具有长期灵活性的解决方案。
我们如何才能打造出既能满足各种开发者需求和方法,又能鼓励和促进无障碍功能和其他重要考虑因素的工具?
Rachel:我们有大量内容即将进入 CSS,这些内容基本上取代了传统上属于 Sass 的功能。是否有充分的理由继续使用 Sass 等工具?
Miriam:是的,对某些人来说是这样,但这个问题没有普遍适用的答案。以变量为例。Sass 变量在词法上具有作用域,并在服务器上编译,具有列表和对象等有条理的数据结构、颜色操作等。这非常适合不需要在浏览器中运行的设计系统逻辑。
CSS 变量在某些方面有重叠,它们也可以存储值,但它们提供了一套完全不同的基于级联的优势和劣势。Sass 无法处理自定义属性,而 CSS 无法真正处理结构化数据。两者都非常实用,功能也很强大,但您的具体需求可能会有所不同。
我认为,如果用户可以淘汰不再需要的工具,那真是太棒了。有些项目可能不需要同时使用服务器端变量和客户端变量。非常好!但如果就此认为它们是完全相同的,并且一个可以简单地取代另一个,那就太简单了。即使语言提供的功能基本相同,也总会有一些设计逻辑需要在服务器端实现,另一些需要在客户端实现。预处理器将长期存在。
Rachel:随着您越来越深入地参与标准制定工作,有没有什么事情让您感到意外?或者您认为人们可能不太了解这个过程中的哪些方面?
Miriam:在参与之前,标准制定流程给我的感觉就像一个神秘而神奇的黑盒子,我不知道会发生什么。我曾担心自己可能没有足够的浏览器内部知识来做出贡献,但事实是,他们不需要更多浏览器工程师。他们需要更多在实际环境中构建网站和应用的开发者和设计师。
令我惊讶的是,参与者中很少有人主要关注标准,但也很少有人主要从事网站开发或设计工作。W3C 由成员组织的“志愿者”(通常由这些组织付费,但不是他们的主要工作)组成,会员资格并不便宜。这使得参与者偏离了日常设计师和开发者,尤其是像我们这样在小型代理机构或自由职业者中从事客户工作的开发者。如果我没有为这项工作找到外部资金,那么作为受邀专家的我将完全是志愿工作,这是一项昂贵的爱好。
实际上,该流程相当开放和公开,需要开发者参与,但由于同时进行的对话太多,您可能很难找到自己的位置。尤其是当您没有全职工作时。
Rachel:多年来,容器查询一直是许多 Web 开发者的梦寐以求的功能。我们即将获得这些功能,这让我非常兴奋。我感觉很多人都在考虑容器查询的实用性,您认为它们也有可能激发更多创意吗?
Miriam:当然,不过我认为这两者并非完全独立。我们所有人的时间都有限,并且都希望编写可维护且性能良好的代码。如果某件事在实践中难以实现,我们就不太可能发挥创意来探索可能实现的事情。
不过,网络行业现在由大型企业利益主导,因此这些商业问题总是比网络艺术家的声音更受关注。我认为,如果我们忽略了将网络创意作为功能的主要使用场景,就会损失很多。我很高兴看到一些 CSS 艺术爱好者在试用容器查询原型。Jhey Tompkins 制作了一个特别巧妙的交互式 CSS 百叶窗演示,以评论旧的“反 CSS”网络迷因。我认为这个领域还有很多值得探索的地方,我迫不及待地想看看人们还能想出什么新点子。
对话还侧重于基于大小的查询(原始使用情形),但我很高兴看到人们如何使用样式查询,即根据 CSS 属性或变量的值编写条件样式的能力。这是一项非常强大的功能,但目前尚未得到充分利用。我认为这会带来更多创意机会!
Rachel:您认为 CSS 中有哪些我们无法实现(或即将能够实现)的功能会很有用?
Miriam:我正在开发一些其他规范,对此我感到非常兴奋。级联层将让作者更好地控制特异性问题,而 Scope 则有助于更精确地定位选择器。但这两者都属于高级别架构问题。我内心深处的艺术家更期待 CSS 切换开关、以声明方式创建互动样式的能力,以及容器“时间轴”,这些功能可让我们在媒体或容器断点之间平稳过渡值。这对于自适应排版具有非常实际的意义,但也会为自适应艺术和动画带来许多创意机会。
Rachel:目前还有哪些人在网上做着非常有趣、好玩或富有创意的工作?
Miriam:哦,我甚至不知道该怎么回答这个问题,因为有太多人在如此不同的领域从事创意工作。CSSWG 和 Open-UI 正在开展许多令人兴奋的标准工作,包括您在碎片化方面的一些工作。但我经常从网络艺术家那里获得灵感,以及了解人们如何将这些工具投入生产,而这些方式与商业没有直接关系。像 Jhey、Lynn Fisher、Yuan Chuan 等许多人都在不断突破网络技术在视觉和互动方面的界限。即使是从事更偏向业务的工作,也能从艺术技巧中获益良多。
我还很欣赏 Ben Grosser 等人的概念性更强的网络艺术,他们不断促使我们重新思考我们希望从网络(尤其是社交媒体)中获得什么。例如,看看他的新网站 minus.social。
Rachel:如需了解 Miriam 在 CSS 方面的最新动态,请访问 css.oddbird.net;如需了解她的其他最新动态,请访问她的网站 miriam.codes 和 Twitter 账号 @TerribleMia。