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

Links

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

Adobe Flash 的终结

🔗 https://twitter.com/mattmay/status/1344728355912880129
阅读评论

我来埋葬 Flash,而不是赞美它。 这样写道 Matt May 在这篇关于 Adobe Flash 的终结 的优秀帖子中。 不久前,网页设计师使用 Flash 来创建引人注目的视觉效果、动画和游戏。 但此后不久,它开始取代 HTML 和 CSS,这导致了大量可访问性问题。 大多数 Flash 网站无法通过键盘导航,屏幕阅读器根本无法解析它们。

继续阅读 →

Houdini.how

🔗 https://houdini.how/
阅读评论

不错的网站 来自谷歌(以及客座撰稿人),包含大量关于 Houdini 功能的有趣演示。 此外还有 Una 的文章。 这些都是 Paint API 演示。 从技术上讲,Houdini 是一个包含 七个东西 的组,它们都很酷,而 Paint API 只是其中之一。 Paint 很有趣,但当我们获得 Layout API 时,我认为事情会变得非常奇怪。

我认为,当你看到用如此少的代码实现如此有趣的东西(Una 的彩带)时,Houdini 的价值就更加清晰了。

继续阅读 →

CSS 中的居中

🔗 https://webdev.ac.cn/centering-in-css/
阅读评论


Adam Argyle 在 web.dev 上发表了一篇文章 深入探讨了这个问题。 他从你需要进行垂直居中和水平居中这一假设出发。 传统上,垂直居中对人们来说比较棘手,尤其是在内容高度未知的情况下。

我们有 一篇关于居中的完整指南,涵盖了各种情况,例如决策树。

Adam 详细介绍了处理这种情况的 五种 方法,甚至深入到居中未知的垂直和水平尺寸,以及一些其他约束,例如语言方向和多个元素。 我想,所有关于 CSS 中居中难度很大的愚蠢笑话都需要更新了。 也许他们应该嘲讽 CSS 中存在多少种很棒的居中方式。

继续阅读 →

适用于缓慢连接的 font-display 设置

🔗 https://calendar.perfplanet.com/2020/a-font-display-setting-for-slow-connections/
阅读评论

我真的很不喜欢 FOUT。 我喜欢它是一个选项,因为在网络上无法快速显示文本是不好的。 我知道 font-display: swap; 很受欢迎,因为它有利于性能,但 FOUT 让我很痛苦。 Matt Hobbs

如果这篇帖子里有一件事我希望读者记住,那就是 font-display: swap 是一个非常好的选择,适合网络连接快速的用户的。 但它的无限交换周期可能会让网络连接非常缓慢和不稳定的用户感到沮丧。 如果你有用户在这些条件下浏览你的网站(我相信你会遇到的),那么你可能需要考虑 font-display: fallback 甚至 font-display: optional。

看到了吗,我早就告诉过你。 我喜欢 font-display: optional; 完全停止 FOUT 的方式。 字体要么超级快地应用,要么根本不使用(但仍然异步下载)。 有可能,在下一个页面加载时,字体会被加载并缓存,然后就会被使用。

继续阅读 →

边距折叠规则

🔗 https://www.joshwcomeau.com/css/rules-of-margin-collapse/
阅读评论

Josh Comeau 介绍了 边距折叠的概念。

这个想法可能听起来很简单,但如果你已经编写了很长时间的 CSS,那么你几乎肯定会对边距不折叠或以奇怪且意想不到的方式折叠感到惊讶。 在现实世界的项目中,各种各样的情况都会使事情变得复杂。

继续阅读 →

自动社交分享图片

🔗 https://www.ryanfiller.com/blog/automatic-social-share-images/
阅读评论

在社交媒体上获得一个华丽的链接预览是一件非常容易的事。 在 URL 上添加一些特定的 <meta> 标签,你就可以得到一个带有图片、标题和描述的大型内容。 以下是 Twitter 上关于本网站文章的版本。

继续阅读 →

clipPath 与 mask

🔗 https://viewbox.club/tips/06.SVG_ClipPath_vs_Mask.html
阅读评论

这些东西非常相似,我很难区分它们。 这是 viewBox(多么酷的名字和 URL,我希望他们能一直保留下去)提供的一个简短的解释。

最重要的是,clipPath(SVG 中的元素,以及 CSS 中的 clip-path)是矢量的,当它被应用时,无论你裁剪什么,它要么 在里面,要么在外面。 使用 mask,你还可以进行 部分 透明度,这意味着你可以使用渐变来实现,例如,淡出你要遮蔽的内容。 因此我意识到 mask 更强大,因为它们可以完成 clip path 能做的一切,甚至更多。

继续阅读 →

用于覆盖元素的实用程序类

🔗 https://css-irl.info/a-utility-class-for-covering-elements/
阅读评论

对 Michelle Barker 在这里 表示衷心的感谢。

我发现自己需要在 CSS 中反复进行以下操作:用另一个元素完全覆盖一个元素。 每次的 CSS 都是一样的:第一个元素(需要被覆盖的元素)应用了 position: relative。 第二个元素有 position: absolute,并被定位,使得它的四条边都与第一个元素的边缘对齐。

继续阅读 →

三行 CSS 代码实现日历

🔗 https://calendartricks.com/a-calendar-in-three-lines-of-css/
阅读评论

这篇文章 没有署名,发布在一个比这个网站更奇怪的网站上,但我喜欢这里使用的技巧。 七列网格可以快速创建日历布局。 你可以自然地让日期(网格项)落在上面,除了使用 grid-column-start 将第一天踢到正确的第一列。

继续阅读 →

Fela 回顾

🔗 https://kittygiraudel.com/2020/11/23/retrospective-on-fela/
阅读评论

我真的很感谢对一项技术的真实世界演练。 不仅是这项技术 做什么,还有 为什么 选择它以及它 如何 为团队工作。 任何人都可以阅读文档,但你通过多年真实世界使用所积累的知识要宝贵得多。 Kitty Giraudel

我想认真反思一下使用 Fela 而不是任何其他你可能听说过的 CSS-in-JS 库的选择。

我以前从未听说过 Fela。 对我来说,最有趣的部分是“原子”输出。 看起来它将所有独特的 property: value 对的使用组合成一个独特的类,然后将所有必要的类应用于必要的 DOM 节点。 我相信这会导致一些相当糟糕的类输出。(我建议在事物上也加上合理命名的样式钩子,方便人类阅读。) 但我认为,生成的并应用于页面的 CSS 块最终会尽可能小,因为它不包含任何重复的内容。 这是任何配置良好的原子类工作流程的优势之一:CSS 很小。

Quick Hits

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

CSS-Tricks 由 DigitalOcean 提供支持。

关注网页开发的最新动态

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

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

© 2024 . All rights reserved.