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

Links

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

Diana Smith 的纯 CSS 艺术作品“蕾丝”

🔗 https://diana-adrianne.com/purecss-lace/
阅读评论

Diana 再次以她令人难以置信的 CSS 绘画作品惊艳众人。这幅最新的作品名为 蕾丝。过去的绘画作品包括 Francine、Vignes 和 Zigario。

2019 年 12 月更新:Ooooo 现在还有 purecss-pink。

继续阅读 →

位置、特权和高性能网站

🔗 https://blog.stephaniestimac.com/posts/10-30-2019-performance/
阅读评论

以下是 Stephanie Stimac 关于网站性能的精彩提醒。她写了她最近搬到网络不稳定的地区,以及在停电期间试图弄清楚发生了什么事时,这给她带来的麻烦。

假设所有客户都过着同样的生活,拥有同样的特权,都能访问快速的互联网和数据,这是确保你排斥某些客户并无法为其他客户提供相同服务水平的最快速方法。这很可能并非有意而为,偏见在某种程度上是我们所有人固有的。我之前从未想过基于位置的偏见,直到我在居住地由于网络条件差而经历了这种情况。

但是,如果你提供的服务或实用程序对社区中的很大一部分人至关重要,那么有必要退一步,从不同的角度评估你的用户体验。

Stephanie 还指出 NPR 的网站有一个纯文本版本,以便即使在最糟糕的网络连接情况下也能访问信息。CNN 也做了 类似的事情。

这难道不也超越了网络性能吗?从根本上说,这也是一个可访问性问题,并且是 构建无障碍网站有多难 的另一个例子。

使用平台

🔗 https://timkadlec.com/remembers/2019-10-21-using-the-platform/
阅读评论

Tim Kadlec:

在创建 Web 平台方面投入了如此多的精心设计和规划,以确保即使添加了新功能,也以不会破坏任何使用旧设备或浏览器的人的 Web 的方式添加。你能说任何现有的框架都能做到这一点吗?我并不是想贬低框架(就像孩子们说的那样)。构建实际的 Web 平台出于必要,需要对这类事情有更深层次的承诺。

平台(指使用内置于浏览器中的标准功能)可能无法满足你的所有需求(通常无法满足),使用这些功能将为你的构建带来长期弹性,而框架可能无法做到这一点。Web 会不断发展,并且很可能不会破坏东西。框架会不断发展,并且很可能会破坏东西。

有点像 MooTools 和 Smooshgate 的故事。

CSS 中的双向水平线

🔗 https://dev.to/hus_hmd/bidirectional-horizontal-rules-in-css-56f4
阅读评论

假设你有一个<blockquote></blockquote>,并且设计要求在左侧有一条粗边框。嗯,你可能不一定是指左侧,而是指文本开始的那一侧。

这正是 CSS 逻辑属性 所要解决的问题,Hussein Al Hammad 有一篇 不错的文章 介绍了一些用例,包括我上面提到的 blockquote 问题。

继续阅读 →

设计可访问的颜色系统

🔗 https://stripe.com/blog/accessible-color-systems
阅读评论

Stripe 团队探讨了他们如何改进其调色板,使其在所有产品和界面中对用户更易访问和易读。不仅如此,团队还构建了一个很棒且完全疯狂的应用程序,用于确定他们需要的理想颜色范围。

我们构建了一个 Web 界面,允许我们使用感知一致的颜色模型来可视化和操作我们的颜色系统。该工具在我们迭代颜色时为我们提供了即时反馈循环——我们可以看到每次更改的效果。

继续阅读 →

奠定基础

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

这是一本 Andrew Couldwell 的新书,全部关于设计系统,我期待阅读这本书,因为它看起来他的经验将提供许多有见地的想法和建议。

继续阅读 →

使用最少的 CSS 使表格响应式

🔗 https://uglyduck.ca/responsive-tables/
阅读评论

以下是 Bradley Taunt 提供的一个绝妙的 CSS 技巧,他展示了如何仅使用少量额外代码使表格在移动设备上正常工作。他将每个表格行样式化为看起来像这样的卡片

查看 CodePen 上 Bradley Taunt (@bradleytaunt) 编写的
响应式表格 #2.5:Flexbox
。
在 CodePen 上。

继续阅读 →

与 Brian Holt 🎣 一起获取完整的 Web 开发入门和 React 入门(含 Hook!)

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

嗨,我是来自 Frontend Masters 的 Marc——很高兴支持 CSS-Tricks ❤️!

你查看过 Brian Holt 的课程了吗?他最受欢迎的课程是“完整入门”课程,它让你了解 Web 开发以及整个 React 生态系统。

继续阅读 →

为什么渐进式 Web 应用是移动 Web 的未来

🔗 https://ymedialabs.com/progressive-web-apps
阅读评论

这是我读过的关于为什么渐进式 Web 应用很重要、它们如何工作以及它们对业务有什么影响的最佳文章之一

PWA 功能强大、有效、快速且类似于应用程序。

很难想象哪个移动 Web 属性无法通过 PWA 实现得到显著改善。它们还可以潜在地消除当今许多存在的“虚荣”原生应用程序的必要性。

我对这篇文章唯一的小小分歧是他们使用“移动 Web”一词。我知道对这个小问题过于吹毛求疵有点矫情,但读完之后我的看法是:务必记住,渐进式 Web 应用适用于所有人,包括桌面和移动用户。我认为必须重申的是,没有移动 Web。我们的目标是 比原生更好。

超越华丽外观的奖项

🔗 http://danmall.me/articles/commarts-interactive-2020/
阅读评论

Dan Mall 正在评审 Communication Arts Interactive 2020 奖项。这类活动通常是庆祝华丽、短暂、一次性的设计。这些东西很棒,但 Dan 心中还有更多想法

我很乐意奖励那些展示了最高级别颜色对比度创意使用且在辅助设备上运行良好的作品。我很乐意奖励那些在 JavaScript 失败时仍然有用的作品。我很乐意奖励那些除了完美的执行和艺术指导外,还展现了聪明才智和策略的作品。我很乐意奖励那些满足业务和用户需求的作品。

Quick Hits

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

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发最新动态

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

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

© 2024 . All rights reserved.