跳至主要内容
CSS-Tricks
  • 文章
  • 笔记
  • 链接
  • 指南
  • 年鉴
  • 随机
搜索

Links

我们正在阅读的来自网络各处的资讯,以及我们的一些想法。 有我们应该知道的链接吗? 告诉我们!

以丝滑流畅的性能动画化 box-shadow

🔗 http://tobiasahlin.com/blog/how-to-animate-box-shadow/
阅读评论

Tobias Ahlin 的巧妙技巧

如何在 CSS 中动画化 box-shadow 属性,而不会在每一帧上导致重绘,并严重影响页面的性能?简而言之:你不能。动画化 box-shadow 的更改将损害性能。

然而,有一种简单的方法可以模拟相同的效果,且重绘次数最少,可以使你的动画以稳定的 60 FPS 运行:动画化伪元素的不透明度。

Calypso

🔗 https://developer.wordpress.com/calypso/
阅读评论

WordPress 迈出的相当大胆的一步。全新的 UI。全新的技术。不再有 PHP 和 MySQL,而是 Node.js、React、Flux、Babel、Webpack... 最精美、最现代化的工具。仍然完全开源。

Matt Mullenweg:

一方面,这似乎很冒险。WordPress 的成功有多少是基于史诗般的向后兼容性和能够在几乎任何服务器上运行的能力?这会成为自托管 WordPress.org 变体吗?目前,他们说“安装 JetPack,你就可以从 WordPress.com 管理你的自安装”——但这并不像一个答案。如果我们永远无法自安装,那么向后兼容性可能就不重要了?当为核心业务提供动力的全新、闪亮的开源事物就在眼前时,你还能让开发人员对“旧事物”感兴趣吗?

另一方面,这似乎扼杀了风险。如果你停留在旧技术中,你能留住人才多久?用它感觉笨拙过时需要多长时间?

这张图表 真正地突出了前后带来的好处。

我们的 CSS 框架如何帮助加强无障碍性

🔗 http://www.ebaytechblog.com/2015/11/04/how-our-css-framework-helps-enforce-accessibility/
阅读评论

Ian McBurnie

用户界面控件不仅需要看起来像某个特定控件,而且还必须被描述为该控件。

如果我们还能以另一种方式编写我们的 CSS 框架,使其成为我们防御体系中的另一层呢?继续阅读以了解如何做到这一点!

其中一个技巧

[role=button].btn {
  /* Gotta be the right role before it gets the styles */
}

赞助:使用 Telerik Platform 构建下一代移动应用

🔗 http://synd.co/1NvdWvT
阅读评论

为你的移动应用创建最佳用户体验对于它们的成功至关重要。但时间限制和资源有限有时会迫使你妥协。你不应该被迫做出这种权衡。 Telerik Platform 2.0 改变了移动应用开发的游戏规则,使你能够快速、高效地构建具有丰富用户体验的精美应用。

加入 Telerik 于 12 月 3 日星期四,美国东部时间上午 11 点,我们将向你展示如何使用最新版本的 Telerik Platform 构建下一代移动应用。

我们真的需要 CSS 中的特殊性吗?

🔗 http://philipwalton.com/articles/do-we-actually-need-specificity-in-css/
阅读评论

Philip Walton

虽然无法简单地指示浏览器完全忽略特殊性,但可以防止特殊性影响特定 CSS 文件或一组 CSS 文件的级联。

如何做到?答案是使特殊性和源顺序相同。

想象一个样式表,其中所有规则都按从最低特殊性到最高特殊性的顺序排列。在这种样式表中,由于规则的特殊性也对应于规则的源顺序,因此特殊性实际上就从方程式中消失了。

关于 CSS 失败的大多数论点都涉及全局性和特殊性的痛苦。因此,大多数提出的解决方案都涉及尝试消除全局性或扁平化特殊性。

font: caption;

🔗 http://codepen.io/dope/pen/YyxKBj
阅读评论

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 以了解更多信息。

赞助:Syncano - 数据库。后端。中间件。实时。微服务。都在一个地方。

🔗 http://synd.co/1PHqDEs
阅读评论

Syncano 是一个后端平台,用于更有效地构建强大的实时应用。使用多种不同的模块自定义你的后端,并最大程度地减少样板代码。定义你的数据模式,添加实时通信,与任何 API 集成,添加类似微服务的功能,而无需设置服务器或构建自定义 API 路由,以及更多功能——所有这些都在一个地方。从我们的 Rest API 或我们的一个开源库开始。开始构建,花你需要的时间,只有在你准备好部署时才付费。 免费试用!

拥抱网络

🔗 https://www.youtube.com/watch?v=sc3wuXko-k0&index=5&list=PLl0kzWeYVmgsXGi5727YCmXU2CfTmWxsS
阅读评论

Patrick Hamann 在一篇快节奏的演讲中谈到了如何避免单点故障。他建议

  • 使用 预加载和预取
  • 异步加载字体
  • 始终为 Ajax 请求使用超时/断路器
  • 缓存资源
  • 将网络视为一种增强

金融时报的开发人员通过为用户提供通过 HTTP/2 传输的资产,成功地将总下载时间缩短了 1.5 秒。我认为这表明性能和优化的未来将会是多么不同。

相关:Facebook 已开始 “2G Tuesdays”,鼓励员工全天使用 2G 连接,以便最好地模拟全球的用户体验。

重新设计 Toast

🔗 http://responsivewebdesign.com/toast/
阅读评论

Karen McGrane 发推文,梦之队集结,史诗般的重新设计随之而来,整个过程的故事 发布。

一些小巧的知识点 #与我的兴趣相关

  • 这项工作中很大一部分是内容策略和分类工作。清理标签和类别系统(并实际发明不同类型的标签)意味着他们可以提供更多有趣的方式浏览网站。
  • 他们保留了 WordPress。他们对它没有太多积极的评价,但我怀疑这 就像这样。他们用它做了一些我最喜欢的事情,比如使用 Timber 和 ACF。
  • 有一个新的设计,前端工作包括实现该设计。但当然,如今前端工作远不止于此,包括至关重要的工作,即使网站快速并确保广告得到妥善处理。

我一直都很喜欢这种幕后工作曝光。参见 “公开工作”,重新设计 CSS-Tricks 的视频系列,以及最近的 CodePen 重新设计。

使用 CSS 遮罩和变换制作斜角

🔗 https://viget.com/inspire/angled-edges-with-css-masks-and-transforms
阅读评论

Jeremy Frank 提出了一种非常简单巧妙的方法,让元素的结尾不是完美的水平,而是呈倾斜状。

.section {
  clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
}

只需确保有足够的底部填充,这样就不会切断任何重要内容。

Quick Hits

# 2024 年 8 月 23 日
# 2024 年 8 月 21 日
# 2024 年 8 月 14 日
# 2024 年 8 月 14 日
更多快速提示 →
  • 更新
  • 1
  • ...
  • 133
  • 134
  • 135
  • ...
  • 219
  • 旧版

CSS-Tricks 由 DigitalOcean 提供支持。

随时了解 web 开发

使用我们手工制作的时事通讯

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律事项
  • 获取免费积分!
CSS-Tricks
  • 为我们撰稿!
  • 与我们做广告
  • 联系我们
社交
  • RSS 订阅
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.