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

Links

我们正在阅读并有一些想法的网络上的内容。有我们应该知道的链接吗?告诉我们!

容器查询:再次冲锋陷阵

🔗 http://alistapart.com/article/container-queries-once-more-unto-the-breach
阅读评论

我想计划是停止使用“元素查询”,并开始思考和将其称为“容器查询”。我们已经关注这个故事一段时间了。元素查询有一个严重的缺陷:无限循环。

.our-element:media(min-width: 500px) {
  width: 499px;
}

正如响应式问题社区小组成员 Mat Marquis 所说

好吧,由于查询不再匹配,因此不再应用新宽度。由于从未应用新宽度,因此元素查询将再次匹配,因此将应用新宽度,因此查询将不再匹配,因此不会应用新宽度,依此类推,直至无限。我们仅用几行 CSS 就实现了 TARDIS 级别的悖论,并且浏览器无法以可预测的方式处理它。

Jon Neal 确实有一些关于浏览器如何处理的想法

无限循环将在有问题的块处冻结。虽然无限循环更有可能发生在元素媒体查询中,但这个问题自从:hover以来就一直存在。因此,一个明确的规范将是双重有用的。

但唉,也许将查询强加到父元素上会有所帮助

……我们需要重新构建我们谈论潜在解决方案的方式。由于解决方案不允许元素自行重新设置样式,因此我们可以将此约束构建到规范中:附加到元素的查询只能影响该元素的子元素的样式。

我不认为它完全解决了无限循环问题,但它使处理起来更容易了吗?

Helvetica 的最终定论?

🔗 http://ilovetypography.com/2015/06/27/the-last-word-on-helvetica/
阅读评论

如果你要借用关于 Helvetica 的观点,你最好采用 John Boardley 的观点。

因此,与其讨厌一种字体,不如将这种精力用于热爱另一种字体。

趁你在那里,不妨也浏览一下 ilovetypography.com 的重新设计!

为什么可用性很重要

🔗 http://www.kryogenix.org/code/browser/why-availability/
阅读评论

Stuart Langridge 的 GIF 演示了无法查看你网站的一小部分访问者不仅仅是静态的少数群体,而是一个分散的少数群体。

并非 1% 的人始终无法查看你的网站,而 99% 的人始终可以查看。它是 1% 的访问量。几乎所有无法正确获取你网站的人实际上都应该能够获取。

网页性能:缓存效率练习

🔗 https://code.facebook.com/posts/964122680272229/web-performance-cache-efficiency-exercise/
阅读评论

Ryan Albrecht 深入探讨了 Facebook.com 上浏览器缓存的效率。他们每天发布两次代码,并在发布时破坏缓存,因此他们很好奇这是否过于频繁以至于浏览器缓存效率低下。

在收集数据后,他们发现 44.6% 的用户获得了空缓存,他们认为这很有效

最佳实践告诉我们使用外部样式和脚本、包含 Cache-Control 和 ETag 标头、压缩网络数据、使用 URL 使缓存资源过期以及将频繁更新的资源与长期存在的资源分开。所有这些技术都可以在任何网站上一起使用,而不仅仅是 Facebook 规模的网站。

不过,我不确定在什么水平上它们会被认定为无用。浏览器缓存似乎是一项很容易实现的事情,如果 90% 的用户获得了空缓存,它仍然值得一试,即使仅仅是为了提高该会话的速度。

上下文样式:UI 组件、嵌套和实现细节

🔗 http://csswizardry.com/2015/06/contextual-styling-ui-components-nesting-and-implementation-detail
阅读评论

如果在将这些按钮放置在页眉中时需要更小的按钮样式,该怎么办?你是创建一个新类还是一个新的自定义按钮修饰符?Harry Roberts 在以下关于在组件位于另一个组件内部时修改组件的文章中解决了这个问题

如果需要根据 UI 组件放置的位置更改其外观,则你的设计系统已失败。就这么简单。事物应该设计成无知的;事物应该设计成我们始终只拥有“此组件”,而不是“在……内部时的此组件”。

这里的问题不是“我们如何设置样式?”,而是“为什么一开始就这样设计?”。换句话说,这里的问题不在代码中,而在设计中。

这里的设计问题可以通过巧妙地反转问题来解决:与其说“当按钮位于页眉中时,需要更小”,我们需要说“我们有一个更小的按钮变体,我们在页眉中使用它。”。

换句话说,一个设计系统,其中各个部分有意彼此无知。

具有最小和最大尺寸的视口大小的排版

🔗 https://eduardoboucas.com/blog/2015/06/18/viewport-sized-typography-with-minimum-and-maximum-sizes.html
阅读评论

没有min-font-size或max-font-size,因此虽然以视口单位设置字体大小很酷,但你的font-size很可能在小屏幕上变得太小,或者在大屏幕上变得太大。

不过,Eduardo Boucas 有一个巧妙的解决方法。使用媒体查询,当视口达到超过这些最小/最大值的分隔点时,强制font-size恢复为设定的像素值。他有一个 Sass 混合器来帮助计算数学,但最终编译后的 CSS 非常简单。

此外,请记住这个与之相关的有趣的小技巧。

CSS conic-gradient() polyfil

🔗 http://lea.verou.me/2015/06/conical-gradients-today/
阅读评论

我得以在 CSS Conf 上观看 Lea Verou 像一个十足的篮球运动员一样在舞台上发布它。它有令人惊讶的许多实际(且有趣)的用例。

关于我们快节奏行业带来的压力

🔗 http://wesbos.com/overwhelmed-with-web-development/
阅读评论

Wes Bos

公司在技术上进行多年投资,并且会坚持使用其技术栈相当长一段时间。因此,尽管你认为每个人每 6 个月就会抛弃其当前的设置并转向一个闪亮的新框架,但事实并非如此。

很容易开“自上次 JavaScript 框架以来已经过去的天数:0”的玩笑(因为它有点是真的),但这并不意味着你需要关心或改变方向。

相关:如何与网页技术保持同步

HTML 是否“完整”?

🔗 http://www.brucelawson.co.uk/2015/is-html-complete/
阅读评论

Bruce Lawson 对 Tim Bray 的观点“HTML 已完成”的有趣回复。

赞助商:Divi 2.4

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

Divi 不仅仅是一个 WordPress 主题。它是构建你完美主题的主题。你可以通过添加你选择的各种内容类型的行和列来构建页面。结果是一个美观、现代、响应式的页面布局,易于控制。

Divi 2.4 将设计和功能的界限推向了更远,巩固了 Divi 作为 Elegant Themes 旗舰主题的地位,同时也成为有史以来最受欢迎的响应式 WordPress 主题之一。新的激动人心的功能包括添加数百种高级模块设置和主题自定义器控件,使 Divi 的页面构建块比以往任何时候都更加灵活。另一个令人印象深刻的功能是整合了更大的 Divi 库,可以在其中存储、保存和编辑布局和单个布局元素。为你的客户创建 WordPress 网站从未如此简单。立即下载 Divi!

Quick Hits

# 2024 年 8 月 23 日
# 2024 年 8 月 21 日
# 2024 年 8 月 14 日
# 2024 年 8 月 14 日
更多快速提示 →
  • 更新
  • 1
  • ...
  • 141
  • 142
  • 143
  • ...
  • 219
  • 较旧

CSS-Tricks 由 DigitalOcean 提供支持。

关注网页开发最新动态

使用我们精心制作的时事通讯

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律信息
  • 获取免费积分!
CSS-Tricks
  • 为我们撰稿!
  • 与我们合作广告
  • 联系我们
社交
  • RSS Feed
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.