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

Links

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

【David Baron 的】关于容器查询可实施路径的想法

🔗 https://github.com/dbaron/container-queries-implementability
阅读评论

这是来自 Firefox 首席工程师 David Baron 的一篇公开帖子的标题,其中包含关于容器查询的想法。我知道很多人一直在屏息等待 David 的想法,因为他极少数几个能够深入了解此事并谈论实施可能性的人之一。

我们仍处于容器查询的早期阶段。每个网页设计师和开发者都想要它们,浏览器也知道这一点,但这是一种非常复杂的情况。在 2020 年 2 月听到关于 可能的 switch 语句语法 的积极信号,这让我们感到非常鼓舞,它将使我们能够访问 available-inline-size 用于有条件地设置各个值。

现在我们看到了 第二个想法,它也处于可能实现的范围内。

继续阅读 →

响应式 CSS 运动路径的不同方法

🔗 https://css-irl.info/responsive-css-motion-path/
阅读评论

作为 Jhey 最近关于 响应式运动路径 的帖子的后续,Michelle Barker 指出,另一种方法可能只是对整个元素使用 transform: scale()。

那里的权衡是,您同时缩放路径和路径上的元素;Jhey 的方法只使路径灵活,而元素保持相同的大小。

我认为计算缩放比例是一个非常酷的技巧,而且 我们之前也介绍过。

Web 货币化的创新:Coil 和 Firefox Reality

🔗 https://hacks.mozilla.ac.cn/2020/03/web-monetization-coil-and-firefox-reality/
阅读评论

我仍然认为 Coil 很酷。我将其安装在 CSS-Tricks 上作为发布者,并且资金不断涌入。我有一个付费账户,我向其他使用它的网站提供资金。我去年写过所有这些。

如果我们真正获得了 Web 货币化 API 的内容,它将爆炸性地发展成为一项巨大的事物。不再需要浏览器扩展,并且可以围绕它构建一个真正的生态系统。

Anselm Hook 撰写了关于使用 Coil(目前)来货币化网络上的游戏的文章,这提醒我们,这不仅仅适用于出版物——它适用于任何网络内容。Coil 甚至适用于您自己域名之外的内容,例如您的 YouTube 频道。

我的 Visual Studio Code 设置:扩展和主题

🔗 https://matthiasott.com/notes/visual-studio-code-setup
阅读评论

Matthias Ott 发布了他的 VS Code 设置。我发现像这样的列表(我整理了 我自己的一些近期更新)令人难以抗拒,可能是因为,就像你们一样,我在 VS Code 中花费了大量时间,并且想要确保我充分利用它。

列表中一些引起我注意的内容

  • 我没想到 Bracket Pair Colorizer 已经 发布了 v2,而且它是单独安装的。
  • 我没想到你需要 一个扩展 来遵守 .editorconfig 文件。**更新:**不需要。
  • 我没有使用任何 PHP 相关的工具,但 Matthias 列出了 PHP Intelephense,我正在试用它。尽管它的用户比那个名字不奇怪的少?当我安装它时,我看到了 Format HTML in PHP,我也正在尝试,因为,是的,请! (即使是 Prettier 的 PHP 插件也无法做到这一点。)

使用扩展也是清理旧垃圾的好机会。

继续阅读 →

谜题和谜团

🔗 http://adcontrarian.blogspot.com/2020/04/puzzles-and-mysteries.html
阅读评论

Bob Hoffman:

谜题,[马尔科姆·格拉德威尔] 写道,是信息不足的问题。一个谜题的例子:吉米·霍法埋在哪里?如果我们有更多信息,我们就会知道答案。如果有人告诉我们“吉米·霍法埋在新泽西州”,我们会比现在知道多一点。如果他们说,“他埋在新泽西州北部”,我们会知道更多。如果他们说,“他埋在沼泽地”,我们就会找到谜题的答案。

另一方面,还有谜团。谜团是我们有大量信息但没有准确分析的问题。一个谜团的例子:为什么城市内部的学校在教育孩子方面做得如此糟糕?有数千项研究。美国每所大学的每个教育部门都对此进行过研究;国会的每个委员会都对此发表过报告;每个社论作家都有自己的理论,每个专家都有自己的观点。然而,我们没有明确的答案。


有趣的是思考这与前端开发有何关联。当我们编写代码时,我们遇到的每一个¹问题都是一个谜题。我们只需要更多信息,我们就可以弄清楚该怎么做。有时,设计也是如此。信息可以使我们的设计更好。但是设计²的成功具有模糊的特性,使其感觉更像一个谜团。

  1. 除了 CORS。CORS 是一个谜团。
  2. 还有商业、营销和爱情。

没有 `max-width` 的受约束的 CSS 网格

🔗 https://ethanmarcotte.com/wrote/css-grid-without-max-width/
阅读评论

max-width 并没有错,但 Ethan 在最后一句话中指出

与其简单地将 max-width 作为约束的默认值,我可以用设计周围的空白空间,并将其作为布局工具。

如果网格“周围”的空间实际上是网格的一部分,则更容易使用。也许您最终会决定将一些作者信息放在那里,或者显示广告,或者谁知道是什么。如果您在已建立的网格内执行此操作,它将更加健壮。

对比三角形

🔗 https://chipcullen.com/the-contrast-triangle/
阅读评论

Chip Cullen:

假设您正在构建一个网站,并且您正在与设计师合作。他们会向您提供一些可靠的设计,并且您已准备好开始。您还是一位有责任心的前端开发人员,并且希望确保您构建的网站是可访问的。您正在使用的设计中有一些正文内容,但您注意到正文内容中的链接缺少下划线。

您现在正处于对比三角形 中。

继续阅读 →

一些优秀的公司工程博客是如何撰写的

🔗 https://danluu.com/corp-eng-blogs/
阅读评论

来自 Dan Luu 的有趣研究¹

……我的个人博客获得的流量通常比估值达九位数或十位数的公司整个公司工程博客的流量都多,而且我的博客获得的流量通常是其十倍。

我认为这很奇怪,因为这类科技公司通常拥有数百到数千名员工。他们更有可能比我更有能力撰写一篇引人入胜的博客,而且公司从拥有引人入胜的博客中获得的价值也比我多得多。

首先,是的。拥有一个优秀的博客(漏斗顶部的流量、展示招聘文化、确立行业领导地位……)具有极大的价值,但即使拥有足够多的资源,也很少有公司能做好这一点。

继续阅读 →

在调试时,您的态度很重要

🔗 https://jvns.ca/blog/debugging-attitude-matters/
阅读评论

Julia Evans:

上周我一直在调试一些 CSS,我认为这篇文章缺少了一些重要的东西:您的态度。

现在——我还没有成为一个非常优秀的 CSS 开发人员。我从未在专业领域编写过 CSS,而且我不了解许多基本的 CSS 概念(我认为我最近终于第一次理解了 position: absolute 的工作原理)。上周我正在处理我尝试过的最复杂的 CSS 项目。

在我调试 CSS 的过程中,我注意到自己做了一些平时不会做的事情!我

• 随机更改代码,希望能起作用
• 搜索了很多东西并尝试了它们,而不理解它们的作用
• 如果某些内容坏了,则恢复我的更改并重新开始

这种策略的效果正如您想象的那样(效果不佳!),这是因为我对 CSS 的态度!我对 CSS 有了一种不同寻常的信念,认为 CSS 太难了,我无法理解。所以让我们来谈谈这种态度吧!

继续阅读 →

像 2020 年一样创建对角线布局

🔗 https://9elements.com/blog/pure-css-diagonal-layouts/
阅读评论

Nils Binder 介绍了各种方法

1. 使用三角形形式的 SVG。Erik Kennedy 在 CSS-Tricks 上很好地描述了这种技术。

2. 使用 clip-path 隐藏部分内容。阅读 Sebastiano Guerriero 编写的 CSS 中的对角线容器 或 Kilian Valkhof 编写的 CSS 中具有固定角度的斜边。

3. 使用 CSS 变换

我通常是 #2 类型的人——稍微切掉顶部和底部,确保有足够的填充,然后就完成了。但 Nils 几乎说服了我,这种花哨的数学方法更好。

继续阅读 →

Quick Hits

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

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发最新动态

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

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

© 2024 . All rights reserved.