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

Links

来自网络的我们正在阅读并有一些想法的东西。 还有我们应该知道的链接吗? 让我们知道!

monica.css

🔗 https://meowni.ca/posts/monica-dot-css/
阅读评论

Monica Dinculescu:

我不想拥有世界上所有可能的填充、边距、颜色和弹性盒配置。 我只想要那些我知道自己在每个项目中都会使用到的配置。 因此,这里就是 monica.css:我自己的 CSS 框架,我把它复制粘贴到每个 CSS 文件的开头,然后从那里开始。

我喜欢人们创建自己的 CSS 启动器。 我喜欢 Sanitize,但即使这样对于我打交道的大多数东西来说也感觉有点过头了。 如果我为自己做一个,我可能会从 Monica 中偷一些东西。 我肯定会从 body中删除边距,因为我发现自己经常写那行代码。 我可能会从Andy 的中偷一些 [class]的东西。 我的 center类可能只是 text-align,我会给自己一些其他的居中类,用于我最喜欢的居中方式: display: grid; place-items: center;。

我喜欢每个人都 同意使用 box-sizing。

相同的 HTML,不同的 CSS

🔗 https://ishadeed.com/article/same-html-different-css/
阅读评论

Ahmad Shadeed 阐述了卡片组件的概念,该组件具有一组固定的语义 HTML,上面有一些 BEMy 类。 其中包含标题、作者、图像和标签。 然后,他重新设计了卡片,将其变成五种完全不同的设计,而无需触碰任何 HTML,只修改 CSS。

如果对你来说这是一个顿悟的时刻,那太棒了! 值得知道的是,这个确切的概念基本上激发了整整一代的前端开发人员,这在很大程度上要归功于 CSS Zen Garden 的概念,整个网站是一组固定的 HTML,只有 CSS 更改才孕育了一些不可思议的创造力。

当然,在进行重新设计工作时,我们通常会接触到 HTML,但这仍然是一个有趣的练习,它说明了 CSS 的强大功能。 我想知道,JavaScript 驱动的组件是否能够在今天带来这种敬畏,因为它们具有类似的抽象能力:对组件进行更改,并查看对整个网站的影响。 只是,这个想法不再植根于约束,而是没有任何约束。

使用 @media (hover: hover)解决粘性悬停状态

🔗 https://medium.com/@mezoistvan/finally-a-css-only-solution-to-hover-on-touchscreens-c498af39c31c
阅读评论

Mezo Istvan 在 Medium¹上的博客文章中很好地 阐述了这个问题及其解决方案。

如果您点击具有 :hover状态但未离开页面的东西,那么在移动设备上, :hover状态可能会“粘住”。 您会在 跳转链接(用作选项卡或触发页面内功能的按钮)等东西上看到这种情况。

继续阅读 →

责怪实现,而不是技术

🔗 https://timkadlec.com/2012/10/blame-the-implementation-not-the-technique/
阅读评论

我不确定从 Tim Kadlec 在 2012 年写这篇文章之后,我们在这方面做得更好多少。

如果你之前听过这个故事,就阻止我。

“响应式设计对性能不利。”
“用户代理检测不好。 不要对网络进行细分。”
“混合应用程序不如原生应用程序好用。”
“不应该使用 CSS 预处理器,因为它们会生成臃肿的 CSS。”

… 自己去看看,到底是不是工具本身应该受到责怪。

我相信,一定存在某种心理学概念可以解释为什么我们将责任从违规事物转移到我们认为的导致问题的原因上。

继续阅读 →

倾听您的网页

🔗 https://gist.github.com/tomhicks/6cb5e827723c4eaef638bf9f7686d2d8
阅读评论

来自 Tom Hicks 的 一个巧妙的想法,将 MutationObserver(它可以“观察”对元素的更改,例如当它们的属性、文本或子元素发生更改时)和 Web Audio API 结合起来以创建声音。 将此代码放到您想监听 DOM 更改以听到其操作的网页的控制台中。

继续阅读 →

现代 CSS-in-JS 库的看不见的性能成本

🔗 https://calendar.perfplanet.com/2019/the-unseen-performance-costs-of-css-in-js-in-react-apps/
阅读评论

这篇文章充满了 Aggelos Arvanitakis 的大量数据。 但我只想关注他最后的建议。

**调查一下,零运行时 CSS-in-JS 库是否可以用于您的项目**。 有时,我们倾向于更喜欢在 JS 中编写 CSS,因为这提供了 DX(开发人员体验),而无需访问扩展的 JS API。 如果您的应用程序不需要支持主题,并且没有大量且复杂地使用 css 属性,那么零运行时 CSS-in-JS 库可能是一个不错的选择。

“零运行时”意味着您以 CSS-in-JS 语法编写样式,但生成的是 .css文件,就像其他任何 CSS 预处理器一样。 这将工具变成了一个完全不同的类别。 它只是一种开发工具,而不是用户在使用网站时会付出代价的工具。

继续阅读 →

适合您和您 Web 开发机构的无头 CMS

🔗 https://synd.co/2O4Rek2
阅读评论

Storyblok 是一款无头但基于组件的 CMS,内置了实时预览功能。 您可以使用它来构建快速可靠的网站,并使用您最喜欢的技术为原生应用程序提供动力。

让我们从基本知识开始,并了解 无头 CMS 是什么

无头内容管理系统是一个仅后端的 CMS,从头开始构建为内容存储库,通过 RESTful 或 GraphQL API 使内容可访问,以便在任何设备上显示。

在 Storyblok 中,您可以从大量已经 存在的教程中选择,这些教程将帮助您入门。 进入免费计划并开始建模您的内容。 每个空间都可以有无限数量的您可以定义的内容类型和组件。

Storyblok 还为您提供更多内置工具,例如 免费的图像优化服务,以加快您的网站性能和整体进度。

作为一家 Web 开发机构,您还可以注册 合作伙伴计划。 这将允许您和您的团队拥有无限数量的免费员工。 您可以创建任意数量的开发空间用于演示和概念验证。 最棒的是,您不仅可以免费获得这些用户和空间,还可以为每个客户在 Storyblok 上的订阅获得每月收入分成。

亲身体验 Storyblok

2020 年技术栈

🔗 https://medium.com/better-programming/2020-001-full-stack-pronounced-dead-355d7f78e733
阅读评论

在 有史以来最具点击诱导性的文章中,Joe Honton 很好地谈论了 Web 开发不断变化的格局。 “全栈”也许 已经过了它的鼎盛时期,成为一个有用的术语,但由于前端开发现在涉及到堆栈的许多部分,因此它不再是一个特别有用的术语。 Joe 本人做了很多工作来推广它,因此它确实感觉来自他本人特别有意义。

此外,需要了解的范围非常广泛,我们不可能什么都知道,因此为了完成工作,我们会利用我们所知道的知识,并将自己安置在跨职能团队中。

由于一个人无法处理所有事情,因此 2020 年技术栈必须由团队负责。 这不是一群个人,而是一个真正的团队。 这意味着当一个人落后时,另一个人会补上差距。 当一个人拥有更高超的技能时,团队中就会有机制来指导其他人。 当团队的知识库存在差距时,他们会寻找并聘用一个比他们所有人都更聪明的人加入团队。

因此,“2020 年技术栈”本质上是“了解事物并参与团队合作”,而不是任何特定技术的组合。 也就是说,Joe 对 技术有自己的看法,包括 以某种奇怪的 GraphQL 语法编写 HTML,我以前从未见过。

走向响应式元素

🔗 https://bkardell.com/blog/TowardResponsive.html?1
阅读评论

来自 Brian Kardell 的 热门消息,关于我们一直在称之为“容器查询”的东西,这是 CSS 中最受期待的功能。

至少在我要称之为“组件的响应式设计”的一部分,似乎存在一些普遍的共识,那就是将问题颠倒过来会更好。

这里的颠倒听起来像是,与其像媒体查询那样做,不如在属性级别做。

继续阅读 →

Neumorphism.io

🔗 https://neumorphism.io/
阅读评论

我之前有点 嘲笑 拟态设计。 我实际上并不太在意。 我只是觉得它只适用于某些扁平色的背景,主要是非常浅的颜色,不知何故,这感觉很奇怪地有限制。(不行,可以,可以,不行 🤷‍♂️)。

无论如何,我认为 Adam Giebl(可能是 Adam Gieblio?)的这个 “生成器”非常酷。

Quick Hits

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

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发最新动态

订阅我们的精心制作的时事通讯

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律信息
  • 获得免费积分!
CSS-Tricks
  • 为我们撰稿!
  • 与我们合作广告
  • 联系我们
社交媒体
  • RSS 订阅
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.