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

Links

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

instant.page

🔗 https://instant.page/
阅读评论

instant.page 是 Alexandre Dieulot 的一个非常酷的项目。 Alexandre 已经在这个想法上花费了五年时间,因为 InstantClick 是他的,本质上是完全相同的想法。

这个想法是,在将鼠标悬停在链接上和单击链接之间存在明显的延迟。 假设您需要 300 毫秒的延迟。 这 300 毫秒本可以用来预加载下一页。 而且,如果您确实利用这段时间进行预加载,该页面加载的速度就会快很多。

这个新项目利用了更新的技术来完成这项工作。 代码几乎没有,其核心是将一个 `` 添加到您即将单击/触摸的链接文档中。

该页面鼓励您热链接脚本,这意味着如果您已经访问过使用此脚本的页面,则可能会命中缓存。 它不像其他第三方 JavaScript 那样有风险,因为 `integrity` 属性意味着,如果您现在信任代码,它永远不会改变,除非您同时更改该属性。 它还巧妙地使用 `type="module"` 来防止它在不支持预取的浏览器中加载任何内容。

继续阅读 →

2019 年 #StateOfCSS 调查

🔗 https://medium.com/@sachagreif/announcing-the-state-of-css-2019-survey-e1e4268df64d
阅读评论

您知道 State of JavaScript 调查吗?该调查对数千名开发人员进行了关于所有 JS 事物的调查,从框架到测试,以及介于两者之间的许多其他事项。 好吧,Sacha Greif 推出了一个完全专注于 CSS 的调查。

鉴于我们和其他网站最近发布了许多内容,这些内容集中在 学习、复杂性、角色转变 等方面,因此这非常及时。 Sacha 很好的抓住了这一点。

这尤其有趣,因为它是在许多人谈论前端的“前端”(HTML、CSS)和前端的“后端”(JavaScript 及其许多框架和库)之间存在“巨大分歧”的时期。 [...] [T]调查将是一个很好的机会,让我们对当前存在的社区进行快照,并了解它在未来几年将如何发展。

听起来是个不错的目标。 让我们通过提交一些回复来帮助它!

参加调查

使用 monday.com 在一个地方管理和共享项目

🔗 https://synd.co/2GemPNV
阅读评论

我们在 CSS-Tricks 上谈论了很多关于项目管理和工作流程,不是因为它是我们作为设计师和开发人员所做工作核心的内容,而是因为我们所有人都作为团队的一部分在其中扮演着角色,并且因为它最终会影响我们工作质量。

这就是为什么拥有一个良好的系统能够为我们和整个团队带来如此大的好处的原因。 你在哪里可以找到这样的系统? 你可能想 从查看 monday.com 开始。 是的,它是一个项目管理工具,但实际上它远远超出了这个范围。 那里的一些其他平台在任务列表、日历和里程碑处停止, monday.com 做这些加上团队协作。

继续阅读 →

“网络标准最接近的金科玉律”

🔗 https://cloudinary.com/blog/a_chaotic_good_guide_to_image_performance_part_1
阅读评论

互联网自己的 Mat Marquis 摘录了这个来自 HTML 设计原则规范 的精彩引言。

如果发生冲突,请考虑用户优先于作者、作者优先于实现者、实现者优先于规范制定者、规范制定者优先于理论纯度。

然后他将这个理念应用于 在 2019 年将图像放在网站上。

孤独图标的无效性

🔗 https://mattwilcox.net/musing/the-ineffectiveness-of-icons
阅读评论

图标很棒,但正如我们一次又一次地看到的那样,它们往往无法独自完成工作。 即使您在可访问性方面做得很好,并确保有辅助技术的配套文本,但在具有讽刺意味的是,您可能会让那些以视觉方式浏览的人感到困惑,就像 Matt Wilcox 在这篇文章中描述的与他母亲发生的情况一样。

继续阅读 →

重新审视 abbr 元素

🔗 https://bitsofco.de/revisiting-the-abbr-element/
阅读评论

来自 Ire Aderinokun 的一个不可抗拒的 HTML 元素深度探索,这次是关于用于缩写的 `<abbr title=""></abbr>` 元素。 你可以简单地使用它(JUI) 并且它可以正常工作,但如果你希望为它们创建一个工具提示(它也可以在触摸屏上工作),那么它要复杂得多。

最终结果是保留语义 HTML 并通过大约 50 行 JavaScript 进行渐进式增强,这些 JavaScript 添加了交互式包装元素和事件处理程序。

继续阅读 →

HTML、CSS 和我们正在消失的行业入门点

🔗 https://rachelandrew.co.uk/archives/2019/01/30/html-css-and-our-vanishing-industry-entry-points/
阅读评论

Rachel Andrew

我们过去 20 年左右创造的一切都非常了不起,我仍然可以带着一个完全的初学者,在一整天内教他们用 HTML 和 CSS 构建一个简单的网页。 我们不需要谈论工具或框架,学习如何创建拉取请求或通过 npm 将大量代码拖到我们的计算机上以开始使用。 我们只需要一个文本编辑器和几个小时。 这就是我们在网页上显示事物的方式。

这是真正的入门点,是的,在 2019 年,他们将不得不迅速转向那些使他们能够找到工作的工具和技术,如果这是他们的目标的话。 但是,这些工具最终会输出 HTML 和 CSS。 它是我们所做一切的基础,这使得那些真正拥有这些领域深厚技能的人被贬低变得更加令人费解。

说到入门点,我整理了一堆关于 如何在当今学习 HTML 和 CSS 的想法。

Gradians 和 Turns:CSS 角度的默默英雄

🔗 https://dev.to/kenbellows/gradians-and-turns-the-quiet-heroes-of-css-angles-7ia
阅读评论

我喜欢发现一些被忽视的 CSS 宝石,比如 Ken Bellows 在他的帖子中解释的 gradien(`grad`)和 turn(`turn`)单位。 我不知道,也许你们已经知道了它们,但它们对我来说是全新的。

它们是处理角度的额外选项,其中度数(`deg`)和弧度(`rad`)更为常见。 只要我处理旋转,我都会偏向度数。 但是现在我知道有一种更简单的方法来表达半旋转,即使用 `0.5turn` 而不是 `180deg`,我可以看到自己更频繁地使用 turns。

继续阅读 →

带宽或延迟:何时针对哪个进行优化

🔗 https://csswizardry.com/2019/01/bandwidth-or-latency-when-to-optimise-which/
阅读评论

Harry Roberts

记住的一条经验法则是,对于常规的网页浏览,延迟方面的改进比带宽方面的改进更有益,而带宽方面的改进在处理更大文件时更明显。

更像是 position: tricky;

🔗 https://medium.com/@elad/css-position-sticky-how-it-really-works-54cd01dc2d46
阅读评论

我非常喜欢 `position: sticky;`。 它有实际的用例。 我会想到一些事情,比如在长文章的侧边栏中保留一个目录,但作为一种相当简单的实现,并且没有以尴尬的方式重叠事物的风险。 但是 Elad Shechter 在这里是对的:它并没有被广泛使用——至少部分原因是——并且可能是因为它有点难以理解。

我喜欢 Elad 使用“Sticky Item”和“Sticky Container”来解释它。 容器需要足够大,以便滚动是相关的,并且粘性才能发挥作用。

继续阅读 →

Quick Hits

# 2024 年 8 月 23 日
# 2024 年 8 月 21 日
# 2024 年 8 月 14 日
# 2024 年 8 月 14 日
更多快速要点 →
  • 更新
  • 1
  • ...
  • 66
  • 67
  • 68
  • ...
  • 219
  • 较旧

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发的最新动态

通过我们精心制作的时事通讯

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律事项
  • 获取免费积分!
CSS-Tricks
  • 为我们写作!
  • 与我们合作广告
  • 联系我们
社交
  • RSS 提要
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.