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

Links

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

Sass !default 和可主题化设计系统

🔗 https://bradfrost.com/blog/post/sass-default-and-themeable-design-systems/
阅读评论

这是一篇来自 Brad Frost 的很棒的博文,他在其中向我们介绍了一个有趣的示例。假设我们正在制作一个主题,并且我们有一些像这样的 Sass

.c-text-input {
  background-color: $form-background-color;
  padding: 10px
}
继续阅读 →

负边距

🔗 https://www.quirksmode.org/blog/archives/2020/02/negative_margin.html
阅读评论

PPK 深入探讨了这个主题,他发现网络技术文档中对此的覆盖率令人遗憾地不足。 我们的条目根本没有提到它们,我打算修复这个问题。

同意这种情况

这是迄今为止负边距最常见的用例。您为容器提供填充,以便其内容具有一定的呼吸空间。但是,您希望标题跨越整个容器,忽略填充。负边距是解决方法。

继续阅读 →

我按下了⌘B。你不会相信接下来发生了什么

🔗 https://www.youtube.com/watch?v=kVD-sjtFoEI
阅读评论

Marcin Wichary 的这篇演讲——既热情洋溢又杰出——完全是关于 UI 设计、排版以及 Figma 团队为确保像从下拉菜单中选择字体这样简单的事情都能达到您的预期所付出的努力。

继续阅读 →

在 CSS 样式表中使用 a:visited

🔗 https://evertpot.com/visited-links/
阅读评论

Evert Pot

不幸的是,在设置新颜色(例如 a { color: #44F })时,“紫色已访问链接”功能也会被禁用。我认为这很可惜,因为在许多情况下,您会浏览链接列表并希望查看之前查看过的内容。

我今天遇到的 2 个例子是

• AWS Cloudwatch 日志
• Stackoverflow 搜索结果

我喜欢这些用例。我的看法是 :visited 可能总体上使用不足,但也没有太多。在这种情况下它很有用,用户可能会想:嗯,我之前见过这个吗?

我并不特别想在这个网站上使用它——因为我不确定如果您访问过任何特定链接,它是否对 UX 有影响,尤其是在像这里这样的博客式设置中。

无服务器的三个定律

🔗 https://burkeholland.github.io/posts/laws-of-serverless/
阅读评论

Burke Holland 认为,“构建应用程序而不考虑服务器”是描述无服务器的一个非常好的方法,但是……

在编写代码时,没有人真正考虑服务器。我的意思是,我怀疑任何开发人员都曾经举起双手说:“等等,等等,等等。等一下。在我们知道要在此处运行的服务器之前,我们不会在此处声明任何变量。”

Burke 认为,与其只用一个想法来概括所有内容,不如说有三个定律

  1. **最远抽象定律**(我不太关心我的代码在哪里运行,只要它运行即可。)
  2. **固有规模定律**(如果需要,我可以敲打这段代码,或者几乎不使用它。)
  3. **最低消耗定律**(我只为我使用的付费。)

在没有挤压效果的情况下为 CSS 宽度和高度设置动画

🔗 https://pqina.nl/blog/animating-width-and-height-without-the-squish-effect/
阅读评论

在网络上设置动画的第一条规则:不要为 width 和 height 设置动画。它迫使浏览器重新计算大量内容,并且速度很慢(或者像他们所说的那样“昂贵”)。如果可以避免,为任何 transform 属性设置动画的速度更快(并且“更便宜”)。

但是,transform 可能很棘手。看看为了使其真正高效,此菜单打开/关闭动画变得多么复杂。 Rik Schennink 在博客中讨论了另一种棘手的情况:border-radius。当您沿一个方向为元素的比例设置动画时,您会得到一个松软的效果,其中角不会保持其漂亮的半径。解决方案?9 切片缩放

此方法允许您缩放元素并拉伸图像 2、4、6 和 8,同时使用绝对定位将 1、3、7 和 9 连接到其相应的角。这样会导致缩放时角不会被拉伸。 

继续阅读 →

安装后几乎从不更新 JavaScript 库

🔗 https://blog.cloudflare.com/javascript-libraries-are-almost-never-updated/
阅读评论

Zack Bloom 在Cloudflare 博客上发表了一些评论,查看了对CDNJS的 jQuery 版本的请求。

我们看不到旧版本的下降,当发布新版本时,旧版本的数量接近新版本的增长量。事实上,3.4.1 的发布,尽管它很快就变得流行起来,但丝毫没有改变旧版本弃用的趋势。

有点道理。我们在CodePen上使 CDNJS 易于使用,用户可以在其中快速搜索、查找并将 jQuery 等库添加到 Pens 中。我非常怀疑大多数用户在发布新的 jQuery 时是否会急于返回他们旧的 Pens 来更新版本。

升级版本在大型网站上既困难又令人恐惧。我看到 Etsy 的某位员工在 Instagram 上发布了一张照片(照片是私人的),纪念他们即将从 8 年前的 jQuery 1.8.2 升级。

React 做了什么(以及没有做什么)

🔗 https://daveceddia.com/what-react-does/
阅读评论

像 React 这样的大名,必然会引起一些跨流混乱,就像我所说的那样。如何在 React 中居中 <div>?Dave Ceddia

React 完全不关心样式。将其视为生成基本的 HTML。React 会将元素放在页面上,但之后的所有内容都是 CSS 的工作:它们的外观、样子、位置以及它们是居中还是未居中。

“如何在 React 中居中 div”……不是 React 问题。这是一个 CSS 问题。您不需要在 Google 查询中使用“react”。一旦弄清楚,使用 React 将正确的 CSS 类名应用于您的组件

继续阅读 →

我如何思考解决问题

🔗 https://humanwhocodes.com/blog/2020/02/how-i-think-about-solving-problems/
阅读评论

Nicholas C. Zakas:

最终,我确定了一个问题出现时我会问自己的问题列表。我发现按顺序提出这些问题有助于我做出尽可能好的决定

1) 这真的是一个问题吗?
2) 是否需要解决该问题?
3) 是否需要立即解决该问题?
4) 是否需要由我来解决该问题?
5) 是否有更简单的问题可以替代解决?

我们之前讨论过成为高级开发人员需要什么,我想说这种思维方式也应该包含在该列表中。

让事情变得更好:重新定义 CSS 的技术可能性

🔗 https://aneventapart.com/news/post/making-things-better-aea-video
阅读评论

Robin 最近对常见的抱怨表示遗憾,即CSS 令人沮丧。人们对它是什么以及它做什么存在误解。关于它是什么类型的语言存在争议。甚至对在哪里编写它也有不同的看法。

Rachel Andrew 在新的演讲中,来自2019 年 An Event Apart 华盛顿特区,向我们回溯;回到我们过去遇到的 CSS 问题以及我们用来克服它们的“技巧”的根源。在过去的几年里,CSS 发生了很大的变化,虽然这些变化有时让人感到复杂和困惑,但它们旨在解决我们一直希望 CSS 做的事情。

继续阅读 →

Quick Hits

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

CSS-Tricks 由 DigitalOcean 提供支持。

随时了解 Web 开发动态

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

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

© 2024 . All rights reserved.