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

Links

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

码头生活:使用 Docker 做所有事情!

🔗 https://nystudio107.com/blog/dock-life-using-docker-for-all-the-things
阅读评论

我认为,如果您是以任何身份担任 DevOps 人员,Docker 的实用性非常明确。您的程序在容器中运行,并且在任何地方都相同。假设 Docker 正在工作/运行,则代码将以可靠一致的方式执行,无论是在某些开发人员的计算机上运行 Docker,还是在云服务器上运行。这样做的(巨大)吸引力在于错误会一致地发生。“仅限生产环境”的错误将成为过去。还有其他好处,例如将开发环境交付给开发人员团队,即使跨平台也是完全一致的,而不是与各个开发人员的计算机作斗争。

所以……很棒?始终将其用于所有事情?这里的阻碍在于它很复杂,而 Web 开发本身已经很复杂了,而且通常感觉只是太多了。然而,Andrew Welch 认为,您无需深入学习 Docker 即可使用它。

继续阅读 →

我们分析了 425,909 个 Favicon

🔗 https://iconmap.io/blog
阅读评论

这是一个很棒的想法,用于研究项目。大地图很有趣,但研究中也有一些值得一看的小细节。

平均 favicon 网络请求需要 130 毫秒,至少在我们快速的云实例上是这样。

很快,但并非那么快,特别是对于世界上几乎每个网站都拥有的文件而言。更有理由做好这件事并确保只下载一个(理想情况下是 SVG)。

继续阅读 →

哪种 SVG 技术对于过多的图标表现最佳?

🔗 https://cloudfour.com/thinks/svg-icon-stress-test/
阅读评论

Tyler Sticka在这里以最佳方式深入研究:通过制作一个测试页面并实际测量性能。也许 1000 个图标有点极端情况,但嘿,250 行数据,每行包含四个图标,就可以达到这个目的。Tyler 在文章中仔细介绍了细微差别。测试的不同技术:内联<svg>、同文档精灵<symbol>、外部文档精灵<symbol>、带有外部源的<img>、带有数据 URL 的<img>、带有filter的<img>、带有外部源的background-image的<div>、带有数据 URL 的background-image的<div>以及带有mask的<div>。哇!太多了——而且它们本身都是有用的技术。

哪种技术获胜?内联<svg>,除非 SVG 非常复杂,否则<img>更好。这就是我原本会押注的。 我已经在这条路上有一段时间了。

重新构想原子 CSS

🔗 https://antfu.me/posts/reimagine-atomic-css
阅读评论

我个人并不是原子 CSS 的忠实粉丝。我不喜欢所有这些类。我喜欢在 CSS 中表达我的样式,因为我发现 CSS……很好。但我理解很多人似乎喜欢它,它确实有一些明显的优势,例如生成的样式表通常比以其他方式编写的自定义 CSS 更小——此外,可用的类就像护栏,确保在设计系统中更加一致的使用。

我也很欣赏这个领域正在发生的创新。它似乎已经从

继续阅读 →

差距(设计工程)

🔗 https://www.linkedin.com/pulse/gap-egor-kloos/
阅读评论

Egor Kloos 描述了一种情况,即(纯粹的视觉)设计师要求对某个组件进行一些更改。存在一种误解,即(代码猴子)开发人员完全按照要求实施了更改——但实际上,需要的是错误修复和组件的新变体。由于技能的孤立:问题。

继续阅读 →

重新审视行长:遵循研究

🔗 https://designregression.com/article/line-length-revisited-following-the-research
阅读评论

Mary Dyson 对长期以来被普遍接受的观点进行了细致入微的研究,即较短的行长比较长的行长更易读。研究发现,较短的行不一定导致更快的阅读速度。但是,如果您正在寻找一个在下次设计审查辩论中使用的明确答案,那就不行了。最大的发现是长行不会像以前认为的那样减慢速度,而不是说它们更好或更差。

但这里还有更多我发现更有意思的内容,主要是因为我对这个主题基本上不了解,并对写作、可读性和行为获得了一点点背景。

比如……

有一个术语用于描述文本行之间的转换

它是回扫。您知道,就像您的眼睛在行尾遇到Return键并扫到下一行的开头一样。然后,还有欠扫。其想法是,眼睛可能不会扫到下一行的确切开头,而是稍微停在前面一点。

Showing four muted lines of test with jump arrows across each line taking the eye to the end of the line, followed by dashed arrow leading to the next line. Red arrows highlight where the eye could undershoot a new line and miss content.

单词和短语之间那些快速的眼球运动?这些叫做扫视。我不得不查一下。

欠扫的影响正在受到挑战

我们多年来一直依赖的先前研究来自 1940 年(!),那时我们显然更关注纸质页面而不是明亮的数字显示器。它指出,较长的行增加了眼睛在回扫期间欠扫的可能性,而欠扫会导致回归,从而导致 130 毫秒到 250 毫秒的延迟,大脑需要在此期间确定方向。该报告称之为欠扫-注视。

我们仍然可以在欠扫-注视期间处理单词

本报告引用了一项 2019 年的研究,该研究试图通过加粗每行开头的第一个单词来纠正欠扫,有点像一个自然地将目光吸引到左边缘的锚。

2019 年的研究确实发现,加粗的单词确实减少了欠扫回扫。但尽管如此,阅读速度并没有提高。这就是挑战长期以来认为短行比长行更好的假设的动力。

Mary 进一步解释道

在试图调和为什么较长的行长在屏幕上可能不会减慢阅读速度,但在阅读印刷品时会减慢阅读速度的原因时,我概述了一些差异,例如视角、花费的时间滚动。但尽管屏幕阅读和印刷品阅读之间的物理差异仍然存在,但我们现在有直接的证据来解释为什么较长的行至少与较短的行一样快地被阅读。读者可以在欠扫新行开头时的短暂注视期间处理单词。这节省了后续处理的时间。现在我们也可能承认,印刷品和屏幕最佳行长的范围之间存在更大的一致性。

这在今天把我们带到了哪里?

好吧,离我们可以用于我们日常工作的明确答案更近一步。但最好重新整理我们收集的设计和文案撰写最佳实践,并知道行长不像以前那样具有约束性。

再说一次,这些都没有告诉我们长行或短行哪个更好。Mary 在报告的结尾说,她不能明确建议使用较长的文本行,因为仍然有一些因素在起作用,包括

  • 对于患有阅读障碍的人来说,较短的行更有效。
  • 需要回答更多关于回扫和欠扫的问题。
  • 其他几项研究表明,用户更喜欢较短的行,并且认为较长的行更难阅读。

语义菜单上下文

🔗 https://www.scottohara.me//blog/2021/10/21/menu.html
阅读评论

Scott 深入研究了<menu>元素的历史。他在1994 年的更改日志中追溯到 HTML 2(!)时代。当时的感觉似乎是标记一个列表。我怀疑其意图与今天的<nav>非常相似,但我真的不知道。

简而言之:HTML 4 弃用了它,HTML 5 重新使用了它——这次作为“一组命令”——然后 HTML 5.2 再次弃用了它。有点可惜,因为它有一些明确的用例。

继续阅读 →

cleanup.pictures

🔗 https://cleanup.pictures/
阅读评论

不错的域名,对吧?正如其名称所示:清理图片。您可以在要清理的图像区域上绘制,它会使用奇怪的科学尽其所能。它就像Photoshop 的修复画笔,只是一个一次性使用的免费网站。就像神奇的remove.bg,它是一个同样神奇的一次性使用的网站(和域名)。

继续阅读 →

使用 HTML 和 CSS 检测特定文本输入

🔗 https://www.impressivewebs.com/detecting-specific-text-input-with-html-css/
阅读评论

Louis Lazaris 细分了来自Jane的一些真正的 CSS 技巧。该笔展示了交互性,其中

  1. 您必须按键盘上的特殊组合键。
  2. 然后输入一个秘密密码。

然后,屏幕上会出现一条特殊消息。很容易使用 JavaScript,但不是,这里完全使用 HTML 和 CSS 完成,这很疯狂。

继续阅读 →

介绍 Svelte,以及比较 Svelte 与 React 和 Vue

🔗 https://joshcollinsworth.com/blog/introducing-svelte-comparing-with-react-vue
阅读评论

Josh Collingsworth 显然是 Svelte 的忠实粉丝,因此,虽然这是一篇有趣且有用的比较文章,但它旨在始终将 Svelte 评为赢家。

我发现一些令人信服的事情

继续阅读 →

Quick Hits

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

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发最新动态

通过我们精心制作的电子报

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

© 2024 . All rights reserved.