CSS Dev Conf 2016 笔记

我已经参加了每一届 CSS Dev Conf，已经连续五年了。我一直特别喜欢那些关注面相对较窄的会议。由于这场会议的主题，毫无疑问，主要集中在 CSS 上，我认为它每年都成为了一个有趣的 CSS 现状会议，至少对我来说是如此。

在过去几年中，一些主题出现了，比如：预处理器、架构、测试、性能……去年我敢说 是 SVG。

注意事项！

CSS Dev Conf 是一个多轨会议，而且我不得不错过 “最佳” 演讲，因为那是我主持 CodePen 展示与讲述 的时间。所以这并不能完全代表整个会议。抱歉！明年再来吧！

Mike Riethmuller 谈论了响应式排版

更准确地说：“高级流体排版”。他还获得了最佳表演奖！我认为实至名归。

他向我们介绍了 `calc()` 的工作原理，然后开始加入视窗单位并将所有内容应用于字体大小。结果可以是 “流体类型”，或者根据屏幕宽度调整大小的类型，并具有最小值和最大值。它比单独使用视窗单位（或 SVG）更酷，因为您可以限制缩放比例。

查看 CodePen 上 Mike (@MadeByMike) 的笔 精确响应式排版。

这可以用作替代方案，而不是使用媒体查询断点以固定增量调整字体大小。

这是一件大事，因为

1. 它类似于自适应布局和响应式布局之间的区别。我们都知道响应式布局赢得了胜利。
2. 在断点处调整字体大小有点笨拙，远不如这种方法令人满意。
3. 它基本上只是一行代码，因此采用这种想法应该非常容易。

这还不是全部！如果所有类型都按比例缩放，这就像 SVG 的 `<text>`。限制是区别因素，但同时，这些概念也可以扩展到

• 流体模块化比例： 在大屏幕上，标题可能比下一个标题大 1.5 倍，但在小屏幕上只有 1.2 倍（但处于流体比例！）。
• 流体垂直节奏： 不仅字体大小会改变，行高和其他间距也会改变。

我们在 CodePen 的博客中集成了它。

David Khourshid 谈论了响应式动画

这是一些非常棒的 CSS 技巧。它源于使用 JavaScript 操作 CSS 变量的能力。它就像让 CSS 深入访问 DOM 事件一样。

David 使用 RxJS 和他自己的辅助库 RxCSS 来实现他的演示。

他以前会议上类似的演讲

自 CSS Dev Conf 以来，David 已 收集了一堆通过 CSS 变量实现的疯狂演示。它也启发了其他一些人探索这一领域，就像这个

查看 CodePen 上 Jase (@jasesmith) 的笔 CSS 变量作为数据反馈。

Alicia Sedlock 谈论了如何对抗倦怠

这引起了听众的强烈共鸣。之后进行了热烈的讨论，并提出了很多深入探讨主题的好问题。我了解到 “倦怠” 这个词，这是一个更准确的词，指的是不堪重负而选择离开，而 “倦怠” 则指的是更严重的休息。

Dan Wilson 谈论了运动路径

这是一个非常适合 CSS Dev Conf 的演讲，因为它涉及最前沿的 CSS（他们在几周前才更改了这些属性的名称），而且它很有趣。

Dan 并没有谈论 SVG 运动路径，这实际上只能通过 SMIL 实现，而 SMIL 似乎注定要被遗忘。这些是 CSS 中的直接路径，比如

.thing-that-moves {
  /* "Old" syntax. Available in Blink browsers as of ~October 2015 */
  motion-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0");
 
  /* Currently spec'd syntax. Should be in stable Chrome as of ~December 2016 */
  offset-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0");
}

查看 CodePen 上 Dan Wilson (@danwilson) 的笔 照片共享器（CSS 运动路径演示）。

Rachel Nabors 谈论了动画的沟通

摘自她 同名文章。

Trent Walton 向我们介绍了季节性 Web 开发者

Trent eloquent 地谈论了平衡。

CSS Dev Conf 的演讲可以按以下方式组织：哲学、冒险、建设性和恢复性。人们在讨论和倡导的内容中也是如此。它们都有优点和理由，但也可能导致挫折。这些类别甚至体现在我们的工作和社区中，在那里它们既会令人沮丧，也会令人鼓舞。

Wes Bos 展示了可应用的 ES6 提示

Wes 有能力以一种易于理解且能激发灵感的方式让大家理解概念。 直接链接到演讲。

Gregor Adams 谈论了用 CSS 创建令人印象深刻的艺术作品

Gregor 是一位代码艺术家，他谈论了网络技术、艺术、几何以及我每天沉浸在 CodePen 社区中所接触到的一切奇妙事物。

我喜欢 Gregor 偶尔进行大量的实验来探索特定技术或想法。去年是分形。今年我们体验了许多不同的想法。

查看 CodePen 上 Gregor Adams (@pixelass) 的笔 hexels / trixels 绘图应用程序 [原型]。

Clarissa Peterson 谈论了创建美观、可访问且用户友好的表单

我喜欢 Clarissa 在这里强调美观。在倡导表单可访问性时，无需以牺牲美观为代价。事实上，设计良好的表单，具有充足的间距、引人注目的颜色和清晰的状态，有助于可访问性。

这里有很多例子！

Sarah Drasner 谈论了编程中的创造力

创造力很有趣，但它不仅仅是 有趣 。这对你的大脑和你的生意都有好处。

Cecy Correa 帮助我们提升了 GIF 游戏水平

演讲 在最后变得极客起来，Cecy 解释了如何通过在 GitHub 上免费托管来构建自己的 GIF 库，然后创建一个 bash 别名来搜索它们并返回可共享的 URL。

alias gif-search="~/absolute/path/to/gif-repo ls | grep"

$ gif-search query

Eli Fitch 谈论了感知性能

感知性能是最重要的性能。Eli 的表情符号类比让我想到，我愿意绕路 20 英里，即使这样会比坐在交通堵塞中多花 8 分钟。

Eli 的演讲中提到了一个子主题：假进度条。在随后的展示环节中，我演示了如何在 Sass 中使用 random() 函数来随机化（假）进度条的进度。

查看 CodePen 上 Chris Coyier (@chriscoyier) 的 随机化进度条缓动。

Michael Cohen 谈论了淘汰我们的网格系统并拥抱 CSS 网格模块

我认为 Michael 是对的，最终，我们现在所认为的“网格系统” 将 被淘汰。

我对网格感到兴奋，主要是因为我认为它将开启一个新的布局创意时代。这正是 Jen Simmons 所倡导的！

Jen Simmons 谈论了网络上的真实艺术指导

网格布局 绝对是今年的主题。但是 Jen 的主题演讲 不仅仅是“网格会很酷”，她主张使用许多现代工具来释放创造力的巨大潜力：flexbox、形状、列等等。

这个演讲来自之前的会议

Rachel Andrew 谈论了无所不知

Rachel 谈论了大量的 CSS 网格布局，这本应该让我们对它有一个完整的了解，但 Rachel 是一名主题演讲者，她发表了更多关于网络的个人和历史演讲。

基础，各位。

Joah Gerstenberg 谈论了 HTTP/2

具体来说... “它如何影响前端开发人员”。

我希望我能在那儿提问，因为我确实有一些问题。假设我们已经启用了 HTTP/2（我已经启用了）。将资产串联起来 已经是 反模式了吗？是否有我们可以查看的示例网站，可以比较他们在停止串联资产之前和之后的性能？如果我停止串联资产，它是有帮助的，还是永远不会有害的？是否有任何浏览器/平台/版本会受到影响？

Keith Grant 告诉我们要停止用像素思考

这个演讲来自之前的会议

相对单位很好。 更多信息 可以说服你。

Brian Graves 谈论了如何在今天使用明天的 CSS

“我们要去的地方，不需要预处理器。”

我最喜欢的：@apply。它有点像混合/扩展（在预处理器中），虽然它不需要任何代码/选择器重复来完成它的工作。

查看 CodePen 上 Serg Hospodarets (@malyw) 的 CSS @apply 规则支持测试。

Jonathan Snook 与我们谈论了使用容器查询的响应式 Web 应用程序

不幸的是，我错过了这个演讲，我只有 EQCSS（“元素查询”）网站的链接。不过我认为“容器查询”更可能是它的名字？

Jonathan 将考察 Shopify 管理团队用来管理所有应用程序组件之间复杂交互的方法，并在不到一个月的时间内完成一个完全流体响应式设计。他还将探讨这种方法目前如何在 Xero 中被用来实现不同技术栈之间的统一性，并加速开发过程。

看到大型生产网站走上这条道路非常有趣。这也是我（错误地）假设 没有 在容器查询中发生的。我仍然怀疑，一旦原生浏览器对这些查询的支持开始感受到某种势头，它将成为 CSS 中的热门话题。然后可以构建一个真正的 polyfill，这个概念就会滚雪球。

Kevin Lamping 谈论了自动化 UI 测试

CSS 测试是另一个已经存在很长时间但似乎从未获得大量势头的主题。它很难。它很脆弱。它在可以做的事情上受到限制。事先知道所有这些并不能让你觉得花很多时间去做它很吸引人。我个人认为，我必须有一个真正庞大、真正关键的网站，而且要有一个专门负责 CSS 测试的人。

看起来 Kevin 解决了许多已知挑战，并且 有一个仓库 演示了这一点。

Matt Vanderpol 谈论了如何从 CSS 生成活的样式指南

我喜欢样式指南的讨论是如何从“拥有一个”演变成如何使其易于构建、使用和管理。

Adam McCombs 谈论了模式库如何改变你的生活

模式库使你能够开发系统而不是页面。

你知道什么会是一个真正有趣的样式指南/模式库演讲，来补充所有关于它们的聪明言论吗？如果人们拿他们的样式指南，然后拿一个他们需要构建的设计，并使用该指南进行实时编码。我认为这可以很好地展示许多人关于样式指南如何使最终设计更快构建且更一致的观点。

Estelle Weyl 谈到了包容性代码

正如她所说，换句话说：简单、快速、可访问。

ARIA 使用的第一条规则是，如果您可以使用具有语义行为的原生 HTML 元素或属性，请使用它！

— 讨厌的女人 (@estellevw) 2016 年 2 月 25 日

Ivan Wilson 谈到了表单的秘密生活

对正确使用表单进行宣传永远不会过时。

Vincent Nalupta 谈到了 KonMari CSS

KonMari，指的是 Marie Kondo 的 KonMari 方法：“整理的魔力”（书籍）。应用到 CSS 上，它就是：分析、计划、重构、优化。

Julia Konivestska 谈到了使用响应式 d3.js 进行数据可视化

演讲的一部分是关于从头开始构建图表像这样：从数据到库和 API 等等，让这一切发生。然后使其响应式，这涉及在 JavaScript 中测量事物并重新渲染图表。

这些都是很棒的知识，但也让我开始思考您可以在 SVG 中做哪些原生事情来帮助响应性。其中一些最近在我的使用 Robin 的条形图进行捣鼓时得到了实现。事实证明，您可以通过根本不使用 viewBox 来做很多事情。

---

如果让我选一个主题或最热门的话题，我会说 CSS 变量和网格。