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

Links

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

用于有用速记的逻辑属性

🔗 https://css-irl.info/logical-properties-for-useful-shorthands/
阅读评论

Michelle Barker 写了一篇我最喜欢的博客文章:简短、实用,留给您宝贵的知识。在这里,她深入探讨了 CSS 中的逻辑属性速记,特别是那些只在一个轴上设置长度的速记,比如只设置块(垂直)轴或只设置内联(水平)轴的长度。

我说“块”和“内联”,因为就逻辑属性而言,x 轴可以像垂直轴一样工作,具体取决于当前的 writing-mode。

因此,虽然我们一直都有 padding、margin 和 border 速记,它们可以支持多值语法,但它们都不允许我们声明特定轴上的长度,而不必在另一个轴上也设置长度。

继续阅读 →

赞美阴影

🔗 https://www.robinrendle.com/essays/in-praise-of-shadows/
阅读评论

我们亲爱的朋友 Robin 有一篇名为 赞美阴影 的新文章。现在,在你跳到那里寻找有关 CSS 盒子阴影、文字阴影和阴影过滤器的知识之前……这不是那样的。这是一篇关于摄影的文章,以及 Robin 从相机中处理阴影中学到的东西。

那么,为什么要分享这篇文章?因为他在一个专门的文章页面中写了这篇文章,这太酷了。如果你打开它的 DevTools,你会学到很多关于 CSS 的知识。

继续阅读 →

网络的集体名词

🔗 https://collective-nouns.dev
阅读评论

Melanie Sumner 有一个非常具体的 网络相关名词集合,用于描述一组或一组事物。你知道,一群鱼叫 school,一群牛叫 herd 吗?同样的事情,但用于有趣的网络术语。

继续阅读 →

兔字体

🔗 https://fonts.bunny.net
阅读评论

兔字体 自称是“旨在将隐私带回互联网的隐私优先的网络字体平台”。根据其常见问题解答

兔字体采用零跟踪和无日志政策,帮助您完全符合 GDPR 要求,并将用户的个人数据交到他们自己手中。

我的脑海里马上就想到 Google Fonts。兔字体甚至声称他们是 Google Fonts 的直接替代品。它提供相同的开源字体,并保留 Google Fonts 使用的相同 API 结构。

继续阅读 →

text-overflow: ellipsis 被认为是有害的

🔗 https://yatil.net/blog/text-overflow-ellipsis-harmful
阅读评论

Eric Eggert:

这项技术有一些合法的用例。例如,您可能有一个带有标题和描述的表格。为了保留更多标题的空间,您可以将描述限制为小视窗上的一行,并在该项目的详细信息页面上重复描述。

但是,我经常看到它被用于按钮甚至表单标签,以使它们看起来更漂亮(?)或在垂直方向上对齐它们。但是,一旦您更改视窗或调整文本大小,文本的末尾就会消失。

我认为“…… 如果在某些情况下使用”应该加在那里,但这确实会让博客文章的标题更吸引人。正如埃里克所说,文本截断确实有一些合法的用例。可能只有几个,但它们确实是合法的。

继续阅读 →

我已经加入 IndieWeb 了吗?

🔗 https://www.miriamsuzanne.com/2022/06/04/indiweb/
阅读评论

我无法对 Miriam Suzanne 的话进行足够的点赞,她谈到了实施 Webmentions 时遇到的技术障碍。

第一轮需要多个在线服务以及我的静态网站的 HTML 和 JS 更改,只是为了验证我的 indieweb 身份。然后还需要对网站进行更多更改,以及更多在线服务来帮助获取任何提及(到目前为止,什么也没看到,但这可能是预料之中的)。似乎测试设置的唯一方法是公开发布所有这些更改,然后请求其他开发者向您发送提及。

[…]

我是一名经验丰富的 Web 开发人员,我可以解决这个问题。但是这些步骤并不简单,而且我大多数朋友都不是 Web 开发人员。因此,对我来说,这感觉就像一个想法的原型——一个概念证明。

这确实是一个概念证明。而且它已经存在相当一段时间了。IndieWeb 的理念是拥有自己的数据,并将你的网站作为社交中心,这正合我的胃口——可能也合你的胃口,因为你是前端开发者。

继续阅读 →

美化 GitHub 个人资料

🔗 https://github.com/rzashakeri/beautify-github-profile
阅读评论

不久前,Nick Sypteras 向我们展示了如何 为 GitHub 仓库制作自定义徽章。好吧,Reza Shakeri 创建了 美化 GitHub 个人资料 ,它是一个包含各种徽章的超大仓库,包含许多示例,并提供指向可以用来创建这些徽章的仓库的直接链接。

不仅如此!如果你正在寻找某种可嵌入的 widget,这里有从 GitHub 仓库统计信息和贡献可视化到嵌入式 PageSpeed Insights 和 Spotify 播放列表的各种 widget。基本上,这是一个获取灵感的好地方。

继续阅读 →

自定义网络上的彩色字体

🔗 https://webkit.org/blog/12662/customizing-color-fonts-on-the-web/
阅读评论

Myles C. Maxfield 在 WebKit 博客上发布了一篇 关于彩色字体的简洁操作说明。这紧随其后的是 Ollie 前几天在 CSS-Tricks 上发布的文章,虽然它们涵盖了许多共同点,但 WebKit 文章中有一些很好的内容,使这两篇文章都值得一读。

继续阅读 →

首次了解 CSS object-view-box 属性

🔗 https://ishadeed.com/article/css-object-view-box/
阅读评论

Ahmad Shadeed——一如既往地表现出色——对 object-view-box 属性进行了早期介绍,他将其描述为一种在浏览器中使用 CSS 剪裁图像的原生方法。

用例?好吧,Ahmad 马上就展示了如何使用该属性来完成以前需要 (1) 在图像周围使用隐藏溢出的包装元素(图像在该元素内部进行大小调整和定位)或 (2) background-image 方法才能完成的操作。

继续阅读 →

Ahmad Shadeed:CSS fit-content 的用例

🔗 https://ishadeed.com/snippet/fit-content/
阅读评论

Ahmad Shadeed 涵盖了 CSS fit-content 大小关键字。它很有用!只是它并不经常出现。我发现自己更多地使用 min-content,比如在设置 grid-template-row 的高度时。

fit-content 关键字实际上与 min-content 和 max-content 密切相关——它只是遵循了一个小小的启发式方法,Ahmad 将其很好地用流程图的形式进行了说明。

继续阅读 →

Quick Hits

# 2024 年 8 月 21 日
# 2024 年 8 月 14 日
# 2024 年 8 月 14 日
# 2024 年 8 月 12 日
更多快速提示 →
  • 较新
  • 1
  • ...
  • 3
  • 4
  • 5
  • ...
  • 219
  • 较旧

CSS-Tricks 由 DigitalOcean 提供支持。

随时了解 Web 开发

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

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

© 2024 . All rights reserved.