以丝滑流畅的性能动画化 box-shadow
阅读评论
Tobias Ahlin 的巧妙技巧
如何在 CSS 中动画化
box-shadow
属性,而不会在每一帧上导致重绘,并严重影响页面的性能?简而言之:你不能。动画化box-shadow
的更改将损害性能。然而,有一种简单的方法可以模拟相同的效果,且重绘次数最少,可以使你的动画以稳定的 60 FPS 运行:动画化伪元素的不透明度。
我们正在阅读的来自网络各处的资讯,以及我们的一些想法。 有我们应该知道的链接吗? 告诉我们!
Tobias Ahlin 的巧妙技巧
如何在 CSS 中动画化
box-shadow
属性,而不会在每一帧上导致重绘,并严重影响页面的性能?简而言之:你不能。动画化box-shadow
的更改将损害性能。然而,有一种简单的方法可以模拟相同的效果,且重绘次数最少,可以使你的动画以稳定的 60 FPS 运行:动画化伪元素的不透明度。
WordPress 迈出的相当大胆的一步。全新的 UI。全新的技术。不再有 PHP 和 MySQL,而是 Node.js、React、Flux、Babel、Webpack... 最精美、最现代化的工具。仍然完全开源。
一方面,这似乎很冒险。WordPress 的成功有多少是基于史诗般的向后兼容性和能够在几乎任何服务器上运行的能力?这会成为自托管 WordPress.org 变体吗?目前,他们说“安装 JetPack,你就可以从 WordPress.com 管理你的自安装”——但这并不像一个答案。如果我们永远无法自安装,那么向后兼容性可能就不重要了?当为核心业务提供动力的全新、闪亮的开源事物就在眼前时,你还能让开发人员对“旧事物”感兴趣吗?
另一方面,这似乎扼杀了风险。如果你停留在旧技术中,你能留住人才多久?用它感觉笨拙过时需要多长时间?
这张图表 真正地突出了前后带来的好处。
Ian McBurnie
用户界面控件不仅需要看起来像某个特定控件,而且还必须被描述为该控件。
如果我们还能以另一种方式编写我们的 CSS 框架,使其成为我们防御体系中的另一层呢?继续阅读以了解如何做到这一点!
其中一个技巧
[role=button].btn {
/* Gotta be the right role before it gets the styles */
}
为你的移动应用创建最佳用户体验对于它们的成功至关重要。但时间限制和资源有限有时会迫使你妥协。你不应该被迫做出这种权衡。 Telerik Platform 2.0 改变了移动应用开发的游戏规则,使你能够快速、高效地构建具有丰富用户体验的精美应用。
加入 Telerik 于 12 月 3 日星期四,美国东部时间上午 11 点,我们将向你展示如何使用最新版本的 Telerik Platform 构建下一代移动应用。
Philip Walton
虽然无法简单地指示浏览器完全忽略特殊性,但可以防止特殊性影响特定 CSS 文件或一组 CSS 文件的级联。
如何做到?答案是使特殊性和源顺序相同。
想象一个样式表,其中所有规则都按从最低特殊性到最高特殊性的顺序排列。在这种样式表中,由于规则的特殊性也对应于规则的源顺序,因此特殊性实际上就从方程式中消失了。
关于 CSS 失败的大多数论点都涉及全局性和特殊性的痛苦。因此,大多数提出的解决方案都涉及尝试消除全局性或扁平化特殊性。
Joe Richardson 在 CodePen 上 分享了这个小技巧。
body {
/* operating system font */
font: caption;
}
- 如果你是 Ubuntu 用户,这将是 Ubuntu 字体。
- 如果你是 Yosemite 用户,这将是 Helvetica。
- 如果你是 El Capitan 用户,这将是 San Francisco。
- 如果你是 Microsoft 用户,这将是 Segoe UI。
我不完全确定它的支持情况,但如果它适用于你的需求,它比 直接声明它们 或 用 JavaScript 推断出来 要容易得多。
更新:Viljami Salminen 对此进行了更多测试,结果表明 iOS 中存在一些问题。确保 查看他的 Pen 以了解更多信息。
Patrick Hamann 在一篇快节奏的演讲中谈到了如何避免单点故障。他建议
金融时报的开发人员通过为用户提供通过 HTTP/2 传输的资产,成功地将总下载时间缩短了 1.5 秒。我认为这表明性能和优化的未来将会是多么不同。
相关:Facebook 已开始 “2G Tuesdays”,鼓励员工全天使用 2G 连接,以便最好地模拟全球的用户体验。
Karen McGrane 发推文,梦之队集结,史诗般的重新设计随之而来,整个过程的故事 发布。
一些小巧的知识点 #与我的兴趣相关
我一直都很喜欢这种幕后工作曝光。参见 “公开工作”,重新设计 CSS-Tricks 的视频系列,以及最近的 CodePen 重新设计。
Jeremy Frank 提出了一种非常简单巧妙的方法,让元素的结尾不是完美的水平,而是呈倾斜状。
.section {
clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
}
只需确保有足够的底部填充,这样就不会切断任何重要内容。