Pixel Pioneers 2019综述

最新推荐文章于 2024-10-17 10:27:13 发布

cuotangu3718

最新推荐文章于 2024-10-17 10:27:13 发布

阅读量118

点赞数

文章标签： java 人工智能 css html 编程语言

原文链接：https://css-irl.info/pixel-pioneers-2019-roundup/

版权

上周，我参加了在我的本地布里斯托尔举行的年度会议Pixel Pioneers 。在我的日历中，这已经很快成为一个确定的日期，而今年也没有令人失望。实际上，我什至可以说它可能是迄今为止最好的一种。

由于工作上的承诺，我没有看到所有的演讲，但是我确实看到的演讲都是模范的，每个演讲都需要学习。这是一些关键主题的简要概述，以及它们在当今网络环境中的位置：

修复这些UX错误

Craig Sullivan的一个肮脏（但很愉快！）咆哮，第一个演讲， “优化设备体验的15分钟模型”没有犯人。克雷格（Craig）分享了一些有关UX的令人震惊的罪行，以及他防止这些罪行的公式。提示–它涉及在真实设备上进行测试！这里的主要收获是，忽略测试可能会导致指标偏差，客户受挫，并可能造成数千（甚至数百万）美元的损失，尤其是对于大公司而言。将这些UX错误的优先级排在新功能之上。

令人激动的Web动画即将到来

Lis Linhart在网络动画上作了精彩的演讲，并附有精美的插图幻灯片和定制演示。她采用了Pixel Pioneers网站上的元素来制作示例，这些示例确实带动了一些围绕计时和缓和使动画更自然的关键点，并展示了一些非常酷的3D技术。我们了解了设置不同CSS属性动画对性能的相对影响–转换和不透明度比宽度和边距要好。她解释了将元素提升到新图层如何改善动画的性能。

Lis还展示了一些示例，说明了如何使用Web动画API （WAAPI）编写更复杂的动画。不幸的是，目前还没有任何浏览器支持它，但是看起来很令人兴奋！

使用开发工具消除Flexbox布局的神秘感

我很高兴看到Chen Hui-Jing的演讲，《 使用DevTools理解现代CSS布局》 ，值得等待！她没有使用任何幻灯片–整个演示包括使用Firefox开发人员工具检查flexbox布局。 Firefox具有出色的flexbox检查器，可让您准确查看flex容器内部的空间分配方式以及flex项目的解析大小。我以为我对flexbox的工作原理有一个很好的了解，但是这次演讲使我对flex-basis （flexbox的更神秘的属性之一！）的实际行为有了更好的理解。在浏览器开发工具中查看此内容突然使它变得更加有意义。

子网格来了

作为CSS布局极客，看到Rachel Andrew谈论CSS Grid始终是一种享受。没有比雷切尔（Rachel）更多的知识！在本次演讲中，她深入研究了subgrid，这是CSS Grid Level 2规范的一个非常需要的功能，现在可以在Firefox Nightly中使用。她展示了一些用例，这些用例很好地解释了为什么我们需要子网格-以及当前的选项（例如display: contents如何无法满足所有要求（以及在可访问性上留下了空白）。

Rachel还强调了在尚未得到广泛支持的情况下，开发人员尝试并撰写CSS新功能的重要性。这些实验和讨论可以真正塑造规范的发展方式，每个人都可以在其中发表自己的意见。