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

Links

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

kbar

🔗 https://kbar.vercel.app/
阅读评论

并非每天都会在网络上出现新的模式,但我认为cmd + k 会一直存在。这是一个键盘快捷键,通常会弹出搜索 UI,并允许您切换设置的开启或关闭,例如暗模式。现在很多应用程序都支持它——Slack、Notion、Linear 和 Sentry(我目前的工作)是我最近注意到的,但我相信还有很多其他应用程序也开始采用这种模式。

继续阅读 →

Jamstack Conf 2021

🔗 https://jamstackconf.com/
阅读评论

什么?Jamstack Conf! 它是最好的!了解这个热门生态系统正在发生的事情以及未来的发展方向。

何时?10月6日–7日,2021年

在哪里?虚拟/在线。

多少钱?免费!不过也有一些研讨会,每个座位 100 美元。

谁?你!哦,你的意思是演讲者?Netlify 的CEO Matt Biilmann 做开场演讲,我预计其中会有一些妙语(连续三年,我在这个演讲中都对一些东西感到惊讶)。哦,看,Ben Holmes 也在——还记得我前几天提到Slinkity吗?还有Alex Riviere——还记得他那个我用 AstroCSS-Trickz进行了改编,现在 Netlify 正在支持的版本吗?这些只是我认识的一些人。我同样也期待听到我不认识(但!)的人以及他们有趣的话题。

为什么?因为专注于当前重要技术的会议是最好的。并且因为您可以制作一个很酷的徽章。


感谢 Netlify 的支持!

哦,看起来Zach 前几天在博客中提到的那个有趣的图像情况是本次会议的标题。

我们可以有自定义媒体查询吗?

🔗 https://www.stefanjudis.com/notes/can-we-have-custom-media-queries-please/
阅读评论

Stefan Judis 的笔记指出,存在一个规范用于自定义媒体查询,但目前似乎没有动力。这种缺乏动力令人遗憾,因为几乎可以肯定,一旦准备好,遍布各地的前端开发人员就会开始使用它。我知道我会用,因为我现在大量使用自定义属性,而自定义属性的 DRY 特性正是我们使用自定义媒体查询可以获得的相同好处之一。

继续阅读 →

当 SVG 可见时触发 SVG 动画(SMIL)

🔗 https://www.zachleat.com/web/svg-animate/
阅读评论

当需求中写着“可见时”时,你的大脑应该直接想到IntersectionObserver。这正是Zach 在这里所做的事情,在动画滚动到视野中时启动它。

除了这个动画是一个 SVG SMIL 动画:一个<animate> 的情况。SMIL 动画有一些很酷的功能,比如可以在另一个动画结束时开始,这是 CSS 不太能做到的。事实证明,SMIL 也有一个 JavaScript API,因此可以按需以这种方式启动动画,同时尊重prefers-reduced-motion。

继续阅读 →

AWS Lambdas:简单、更简单、最简单

🔗 https://joeyanuff-33180.medium.com/aws-lambdas-easy-easier-easiest-823e71c02bd9
阅读评论

我想说,云函数是过去几年中最重要的转型技术之一。它们(通常)价格低廉,扩展性好,在其固有的隔离性中安全,并且通常用 JavaScript 编写——对于前端开发人员来说是舒适的领域。几乎每个云提供商都提供它们,但 AWS Lambda 是最早的,并且仍然是领导者。

但同样:围绕云函数的 DX 与函数本身背后的技术一样有趣。围绕它们涌现出了各种技术,使它们易于使用且相对透明。Emrah Samdan写道,这对客户和公司来说都是双赢的局面。另一个例子

继续阅读 →

我完全忽略了前端开发场景 6 个月。这很好。

🔗 https://rachsmith.com/i-completely-ignored-the-front-end-development-scene-for-6-months-it-was-fine/
阅读评论

你是否曾经担心前端 Web 开发发展如此之快,以至于如果你离开一段时间,回来后会迷路?Rachel Smith 曾经担心过

需要不断学习新事物的繁忙节奏并没有让我感到困扰,因为我 26 岁的时候很乐意在我的日常工作之外花很多时间进行编码。我真的很享受,所以必须不断提升技能才能维持职业生涯的印象并不是我的担忧。不过,我确实想知道,我该如何才能抽出足够的时间去生孩子,或者承担其他责任,这些责任会阻止我花很多时间去掌握语言并学习新的库和框架。

继续阅读 →

如果我非常努力地制作我的 Open Graph 图片,人们就会分享我的博客文章。

🔗 https://www.zachleat.com/web/automatic-opengraph/
阅读评论

Zach做了那样的事情,他的每篇博客文章都有一个特殊的 URL,其中包含社交图片卡片的设计,该卡片由无头浏览器(如 Puppeteer)进行截图,并用作真实的元 Open Graph 图片,这意味着它会显示在 Twitter、Facebook、iMessage、Slack、Discord 和任何其他支持该卡片外观的平台上。

继续阅读 →

作为前端开发人员刚开始时,我希望知道的一些关于 CSS 的知识

🔗 https://engineering.kablamo.com.au/posts/2021/my-first-css
阅读评论

Nathan Hardy 分享了事情“点击”的时刻

回顾这段时间,我认为有一些关键概念对于最终让所有事情都变得有意义并组合在一起至关重要。这些是

• 盒模型(例如box-sizing、height、width、margin、padding)
• 布局(例如display)
• 文档流和定位(例如position、top、left 等)

几年前我称之为我的顿悟时刻

对我来说,它是几个感觉像解锁真正力量的概念。正是这些概念的结合构成了我的“顿悟!”时刻。

• 每个页面元素都是一个盒子。
• 我可以控制这些盒子的尺寸和位置。
• 我可以给这些盒子添加背景图片。

人们也分享了他们自己的。 还有再次分享。

这确实是关键。

归根结底,CSS 就是绘制、堆叠和调整盒子的位置。

— Stephanie Eckles (@5t3ph) 2021年8月26日

你想要启用 CSS 选择器,而不是禁用它们

🔗 https://www.silvestar.codes/articles/you-want-a-single-enabling-selector-not-the-one-that-disables-the-rule-of-the-previous-one/
阅读评论

我认为这是Silvestar Bistrović 的很好的建议

启用选择器是我对执行工作而不禁用特定规则的选择器的称呼。

经典的例子是将margin 应用于所有内容,只是为了必须从最后一个元素中删除它,因为它在不需要的地方添加了空格。

继续阅读 →

CSS 伪逗号

🔗 https://codepen.io/ShadowShahriar/pen/LYyvVjo
阅读评论

@ShadowShahriar 创建了一个 CodePen 演示,它使用伪元素在以内联方式显示的列表项之间放置逗号,结果是一个自然外观的完整句子,并带有正确的标点符号。如果曾经存在过 CSS 技巧,这就是一个!

继续阅读 →

Quick Hits

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

CSS-Tricks 由DigitalOcean提供支持。

关注 Web 开发的最新动态

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

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

© 2024 . All rights reserved.