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

Links

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

CSS 实用程序类和“关注点分离”

🔗 https://adamwathan.me/css-utility-classes-and-separation-of-concerns/
阅读评论

Adam Wathan 带领我们踏上了一段探索处理 HTML 和 CSS 不同方法的旅程。这是一篇非常棒的文章,我相信它会引起很多人的共鸣,无论你是否同意他的最终结论。

继续阅读 →

“将 PNG 的透明度与 JPG 的压缩结合起来”

🔗 https://codepen.io/shshaw/full/LVKEdv
阅读评论

JPG 不支持 Alpha 透明度。支持 Alpha 透明度的 PNG 压缩效果远不如 JPG。SVG 有蒙版和剪切路径,我们可以利用这些优势。

继续阅读 →

​编码挑战的首选网站

🔗 http://synd.co/2uAJi29
阅读评论

Coderbyte 是一个旨在帮助你练习编程和提高算法技能的 Web 应用程序。我们提供一系列编码挑战和 Web 开发课程,可以帮助你为即将到来的求职面试或一般的技术评估做好准备。我们所有的编码挑战都可以在我们的在线编辑器中直接完成,如果你在过程中需要帮助,可以查看数千个用户提交的代码解决方案。

查看所有编码挑战

abovethefold.fyi

🔗 http://abovethefold.fyi/
阅读评论

Rob Lafratta 发布的一个带有信息(以及参考文章)的新颖网站。

移除丑陋的 :focus 环(并保留它)

🔗 https://medium.com/hackernoon/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2
阅读评论

David Gilbertson

移除焦点轮廓就像从学校移除轮椅坡道一样,因为它与美观不符。

因此,David 展示了如何在检测到用户正在使用 Tab 键时移除它,然后显示它。本质上,当检测到 Tab 键操作时,你会向 body 添加“user-is-tabbing”类,并使用该类在不存在时移除焦点样式(以及处理边缘情况)。

信任的演变

🔗 http://ncase.me/trust/
阅读评论

Nicky Case 的游戏在这个世界上是宝贵的财富。最重要的是,它们玩起来有趣且引人入胜。它们还使游戏成为教育棘手、复杂和重要问题的载体。仅通过阅读很难了解这些问题。它们也是设计方面的典范:明确的行动号召、清晰的入门引导、有意义的交互和动画以及良好的文案。

最新的这个也不例外。

我们在 New Relic 如何解决 CSS 版本冲突

🔗 https://blog.newrelic.com/2017/07/27/css-versioning-conflicts/
阅读评论

起初,标题让我以为是 Git 冲突,但事实并非如此。它指的是组件选择器的命名空间。最终,他们决定使用 Webpack 加载程序(似乎不是开源的)在每个类前面加上一个表示版本的哈希字符串。我想这必须在 HTML 和 CSS 中都发生才能匹配。许多人以某种方式着陆在样式范围限定上以解决他们的问题。

这让我想到另一个范围较小的问题。假设你有一个标题的备用版本,你要发送给 5% 的用户。它有不同的 HTML 和 CSS。从服务器向用户发送不同的 HTML 非常容易。但是 CSS 往往会被捆绑,为少量 CSS 创建一个完全不同的 CSS 捆绑包似乎有点不切实际。一种解决方案:向新标题添加一个额外的属性,并使用人为提升的特异性发送新的 CSS 以避免所有旧的 CSS。然后,当你上线时,从两者中删除新属性。

.header[new] {
}

IntersectionObserver 进入 Firefox

🔗 https://hacks.mozilla.ac.cn/2017/08/intersection-observer-comes-to-firefox/
阅读评论

Dan Callahan 对 IntersectionObserver 为什么如此有用做了精彩的介绍

无限滚动、延迟加载和在线广告有什么共同点?

它们需要了解页面上元素的可见性并对其做出反应!

不幸的是,传统上在 Web 上了解元素是否可见一直很困难。大多数解决方案监听滚动和调整大小事件,然后使用 getBoundingClientRect() 等 DOM API 手动计算元素相对于视口的位置。这通常有效,但效率低下,并且没有考虑元素可见性可能发生变化的其他方式,例如页面上更高位置的大图像最终加载完成,这会将所有其他内容向下推。

API 非常简单。

Chrome 60

🔗 https://www.youtube.com/watch?v=vE7JTf2_-ws
阅读评论

Chrome 的最新版本 60 对我们前端开发人员来说是一件大事。以下是 Pete LePage 在这段视频中概述的所有功能中最让我感兴趣的两件事

  • 绘制时间 API 使我们能够准确了解渲染有用内容到 DOM 需要多长时间
  • font-display CSS 属性现在允许我们控制字体在加载时的渲染方式
  • Lighthouse 现在已内置到 DevTools 中(审核面板)
  • 对象剩余和扩展属性 支持

5 分钟内打造极致上传体验

🔗 http://synd.co/2uzmS0e
阅读评论

Filestack 是一种 Web 服务,可完全处理应用程序的文件上传。

让我们一起想象一个小型的 Web 应用程序。该 Web 应用程序允许用户为他们想要的任何内容撰写评论。他们为评论命名,撰写评论内容,上传照片,然后发布。将名称和文本保存到数据库相当容易,因此这个小应用程序中最棘手的一部分是处理这些照片上传。以下只是一些注意事项

  • 你需要设计一个 UI。鼓励用户选择和上传照片的区域是什么样子?当他们准备好上传照片并进行交互时会发生什么?你可能需要设计这种体验。
  • 你可能希望支持拖放,那将如何工作?
  • 你可能希望显示上传进度。这只是良好的用户体验。
  • 如今许多人将文件保存在 Dropbox 或其他云服务中,你可以从那里上传吗?
  • 多个文件怎么办?可能需要为一个评论上传三到四张图片!
  • 你会限制大小吗?应用程序应该自动处理,对吧?

这当然不是一份完整的列表,但我认为你可以看到其中每一部分都是大量的设计和开发工作。好吧,这就是工作,对吧?的确如此,但工作更重要的是明智地利用你的时间和金钱来使你的应用程序取得成功。在我看来,明智的做法是认真考虑使用 Filestack 为你提供绝佳的上传体验,同时你将时间花在你的产品愿景上,而不是已经解决的问题上。

继续阅读 →

Quick Hits

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

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发最新动态

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

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

© 2024 . All rights reserved.