Miriam Suzanne 是一位来自科罗拉多州丹佛的作者、艺术家兼 Web 开发者,目前正致力于制定容器查询和级联层等令人兴奋的 CSS 规范。
此帖子来自 Designcember。网页设计大会,由 web.dev 为你带来。
Miriam Suzanne 是住在科罗拉多州丹佛的作者、艺术家兼 Web 开发者。她是 OddBird(一家网络代理机构)的联合创始人、CSS Tricks 的专职撰稿人、Sass 核心团队成员,以及 CSS 工作组的 W3C 受邀专家。最近,她专注于开发新的 CSS 功能,例如级联层、容器查询和范围。米丽亚姆 (Miriam) 是一名出版小说家、剧作家和音乐人。我们谈到了她与 Sass 和 CSS 的合作。
Rachel:我最初之所以知道你的工作是因为你的网格框架 Susy,是什么让你萌生了这个想法?
Miriam:早在 2008 年,网络布局就是一个截然不同的体验。开发者已从表格布局转向更具语义化(但仍然很复杂)的悬浮网格。一刀切的 12 列“网格框架”催生了一波潮流,它提供了一个预定义(通常为静态)网格以及一组预定义的 CSS 类。如果您需要更多自定义功能,那就只能自己出手了。很明显,网站需要提高响应速度,但媒体查询尚不可用,而且自适应浮动广告也存在很多浏览器兼容性问题。
当时,我使用了 Natalie Downe 的 CSS Systems 方法,这种方法非常巧妙,能够同时响应字体和视口大小,但所需的各种重复性数学和浏览器技巧让我感到失望。与此同时,Sass 也开始引起一些关注,它完全满足了我的需求。Susy 的初稿非常简单:只需使用几个 Mixin 进行计算并添加我需要的技巧。目标是尽可能减少,并且仅输出基本代码。完全可自定义的网格,无需任何预定义的类。
Rachel:您是如何从从事 CSS 预处理器转向研究 CSS 规范的转变过程?您认为使用预处理器是编写规范的良好背景吗?
Miriam:根据我的经验,有很多重叠的地方,而且我仍然非常积极地处理这两个问题。但我认为这在很大程度上要归功于 Sass 团队,该团队由 Natalie Weizenbaum 领导,该团队立足长远,致力于开发可与开发 Web 标准无缝集成的工具。在考虑核心网络标准的未来时,您必须突破一刀切的“有针对性”的解决方案,构建长期的灵活性。
我们如何打造能够尊重开发者需求和方法多样性,同时仍然鼓励和支持无障碍功能和其他重要注意事项的工具?
Rachel:CSS 中的许多功能都本质上取代了传统上属于 Sass 的功能。有充分的理由仍然使用 Sass 之类的产品吗?
Miriam:对某些人来说是的,但这里没有万能的答案。以变量为例。Sass 变量的范围按词法确定范围,并在服务器上进行编译,并采用有组织的数据结构(例如列表和对象、颜色操作等)。这对于无需在浏览器中运行的系统逻辑设计非常有用。
CSS 变量有一些重叠,它们也可以存储值,但它们提供了一组完全不同的基于级联的优缺点。Sass 无法处理自定义属性,CSS 也无法实际处理结构化数据。两者都很有用,功能强大,但您的具体需求可能会有所不同。
我认为人们可以淘汰不再需要的工具,而且有些项目可能不需要服务器端变量和客户端变量,就会很不错。非常好!但简单地假设它们完全相同,即直接取代另一个。总有一些设计逻辑会在服务器端执行,有些则会在客户端执行,即使我们已经达到这种语言提供的功能基本相同的状态,也是如此。我们长期使用预处理器。
Rachel:由于您越来越频繁地参与到标准的制定中,因此有什么让您感到惊讶的地方吗?或者您认为大家可能对这个过程还不知道的事项?
Miriam:在参与这之前,标准流程就像是一个神秘而神奇的黑盒子,我不确定要怎么做。我担心自己可能没有足够的浏览器内部知识,无法贡献自己的力量,但事实上,他们不需要更多的浏览器工程师了。他们需要更多真正构建网站和应用的开发者和设计人员。
我惊讶地发现,在这方面,几乎没有人主要关注标准,但也很少主要是开发或设计网站。W3C 由来自各成员组织的“志愿者”组成(通常由这些组织支付报酬,但不作为其主要工作),而且会员费用并不贵。这就让参与者远离了日常的设计师和开发者,尤其是在小型代理机构或自由职业者从事客户工作的那些人。如果没有外部资金来支持我的工作,我的受邀专家完全是志愿者,这项业余爱好是一项费用高昂的事业。
实际上,这个过程相当开放和公开,需要开发者的参与,但同时进行的对话太多了,很难找到合适的位置。尤其是在不是日常工作的情况下。
Rachel:多年来,容器查询一直是许多 Web 开发者的制胜法宝。看到这些新功能,我非常高兴。我感觉很多人都在思考容器查询的实用性,你是否认为它们也有释放创造力的潜力?
Miriam:当然可以,但我认为这并不是完全独立的。我们都没有时间限制,而我们正努力编写可维护且性能出色的代码。当在现实生活中很难做的事情时,我们不太可能发挥创造力来发挥创造力。
尽管如此,网络行业现在仍由大型企业利益驱动,因此这类商业利益总是会比网络艺术家们投入更多时间。我认为,如果我们忽略将网络创意作为功能的主要应用场景,将会造成严重损失。我非常高兴看到一些 CSS 艺术人士正在使用容器查询原型。Jhey Tompkins 制作了一个特别巧妙的互动演示,展示了 CSS 威尼斯百叶窗,作为对以前的反 CSS 表情包的评论。我认为这个领域还有很多有待探索的地方,我迫不及待地想要看看其他人的创意。
这次谈话的重点也聚焦于基于尺寸的查询(作为原始用例),但我非常期待人们使用样式查询,即能够根据 CSS 属性或变量的值编写条件样式。这是一项非常强大的功能,目前大部分尚未被人探索。我认为,这带来了更多创意机会!
Rachel:在 CSS 中,有没有您认为会很有用的方面,还有一些我们在 CSS 中无法做(或者有新的做法)的事情?
Miriam:目前,我正在制定的一些其他规范,我感到非常兴奋。级联层让作者能够更好地控制特异性问题,而作用域 (Scope) 应有助于进行更精确的选择器定位。但这两种情况都属于架构方面的高级问题。像我这样的艺术家更喜欢 CSS 切换开关、用于创建互动样式的声明式方式或容器“时间轴”等功能,让我们可以在媒体或容器断点之间平滑地转换值。这对自适应排版有着非常实际的影响,但同时也为自适应艺术和动画提供了很多创意机会。
Rachel:现在还有谁在网络上做着非常有趣、有趣或富有创意的工作?
Miriam:哦,我甚至不知道如何回答,因为有太多人在如此不同的领域从事创意工作。CSSWG 和 Open-UI 中正在开发许多激动人心的标准,其中包括您在碎片化方面的一些工作。但我经常从网络艺术家那里获得最多灵感,以及人们如何以与商业没有直接关系的方式将这些工具投入生产。像 Jhey、Lynn Fisher 或 Yuan Chuan 这样的用户,或者许多其他不断突破网络技术在视觉和互动方式领域的极限的人。即使是做更多以商业为导向的工作的人,也能从他们的艺术技巧中学到很多东西。
我也非常欣赏像 Ben groer 这样的网络艺术人物,这种网络艺术更具概念性,他不断促使我们重新思考我们希望从网络(尤其是社交媒体)中获得什么。例如,查看他新增的 minus.social。
Rachel:欢迎访问 css.oddbird.net,了解 Miriam 的 CSS 工作动态,并通过她的网站 miriam.codes 和 Twitter @TerribleMia 了解她的最新动态。