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

Links

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

HTML 清理程序 API

🔗 https://wicg.github.io/sanitizer-api/
阅读评论

对(草案阶段)清理程序 API 的进展欢呼三声! 众所周知,你不能信任用户输入。 事实上,我参与过的每个应用程序都处理过试图在不应该执行的地方执行恶意代码的恶意行为者。

网页开发人员的工作是在用户输入再次用于页面(或存储或用于服务器端)之前清理它。 这通常使用我们自己的代码或帮助下载的库来完成。 我们可能会编写一个正则表达式来删除任何看起来像 HTML(或类似内容)的东西,这会带来错误的风险,以及恶意行为者找到绕过我们代码的方法。

与其使用用户空间库或我们自己与之共舞,不如让浏览器来做

// some function that turns a string into real nodes
const untrusted_input = to_node("<em onclick='alert(1);'>Hello!</em>");

const sanitizer = new Sanitizer();
sanitizer.sanitize(untrusted_input);  // <em>Hello!</em>

然后让它随着时间的推移继续成为浏览器责任。 正如草案报告 所说

浏览器对何时执行代码有相当不错的了解。 我们可以通过向浏览器教授如何以安全的方式从任意字符串渲染 HTML 来改进用户空间库,并且以更有可能随着浏览器自己的解析器实现的变化而维护和更新的方式来做到这一点。

这种事情是网络标准的最佳体现。 发现很多人都必须做的事情令人讨厌(而且/或者危险),并且介入以使其更安全、更快、更好。

Vite 生态系统

🔗 https://patak.dev/vite/ecosystem.html
阅读评论

Matias Capeletto 涵盖了 Vite 的广度,从它所站立的技术肩膀,到探索类似领域的同类,到它支持的其他技术,到现在主要使用它的框架,以及更多。 这样一篇厚厚的文章的存在证明了 Vite 的飞速崛起。

Vite 最大的优势之一是它周围的生态系统。 Vite 从框架中接管了责任(常见的 Web 模式、全局导入、HMR API、SSR 原语、构建优化),通过提供一个共同的基础,让其他维护者不必每次都重新发明轮子,从而促进在该领域的许多探索。 来自几个流行框架的维护者已选择 Vite 作为其推荐的构建工具,并且现在深度参与 Vite 核心开发,参与讨论并直接参与修复和功能开发。

Vite 的第一个提交是在 2020 年 4 月 19 日,天哪。

我认为 Matias 是对的。 当你从其他技术中接管责任并说我负责这一部分,这本来就是商品,你专注于让你与众不同的地方,这就是正确的公式。 就像一家好创业公司一样。

UI 基金

🔗 https://webdev.ac.cn/ui-fund/
阅读评论

Google 正在发放美元 用于 CSS 相关的项目,所以你最好知道它! Nicole Sullivan

我们所有定期从事 Web 工作的人都会从创建规范、工具、演示、教程和 polyfill 的人那里受益。 这些资源中的许多是副项目,免费提供和支持。 它们的存在是因为有人看到了需求,创造了一些东西来满足它,然后与生态系统中的其他人分享。

我们希望认可和帮助支持这项工作,并投资于 CSS 生态系统。

继续阅读 →

阴影调色板生成器

🔗 https://www.joshwcomeau.com/shadow-palette/
阅读评论

Josh 的 阴影调色板生成器 是一个很棒的工具。 前提 是,box-shadow 在几乎所有情况下,当存在多层阴影 并且稍微有点色调时,看起来都会更好。 它让我想起了渐变几乎总是在缓动 时看起来更好。 生成器会做到这一点,但还会生成三个级别的阴影,这样你就有了阴影的“高度”选项 - 此外,它会将其设置为自定义属性,以便它们更容易重复使用。 与 Open Props 的感觉相同。

继续阅读 →

将位置粘滞与 CSS 网格一起使用

阅读评论

关于使用 esbuild 的一些笔记

🔗 https://jvns.ca/blog/2021/11/15/esbuild-vue/
阅读评论

这是一篇来自 Julia Evans 的很棒的文章,关于如何与现代前端工具作斗争。 Julia 创建了许多 Vue 项目,并且通常根本不使用构建过程

 我通常有一个 index.html 文件,一个 script.js 文件,然后我使用 <script src="script.js"> ,仅此而已。

我认为这很棒,可能意味着这些项目将持续很长时间。 但是,我理解人们希望迁移到一些更现代的开发工具,即使是为了解锁整个 npm 生态系统。 基本上,Julia 想做的是

import Vue from 'vue';
继续阅读 →

翻转、反转和反向

🔗 https://yuanchuan.dev/flip-invert-reverse
阅读评论

SVG <path> 语法 是一个怪兽。 有各种各样的命令构成了一种小型语言,它非常强大,能够绘制任何东西。 但是,不要太害怕它,因为其中一些命令很容易理解。 它们读起来就像“把笔放在这里,向右画 2 个单位,向下画 3 个单位,向上画 1 个单位,完成。” Yuan Chuan 从这里开始,展示了

继续阅读 →

hhhelpers

🔗 https://fffuel.co/
阅读评论

我刚在谈论有多少很棒的小助手网站,现在我遇到了另一个很棒的小蜂巢。 Sébastien Noël 以 fffuel 的名义创建了许多很棒的网站,例如

  • ssshape:一个 SVG Blob 生成器
  • nnnoise:一个背景噪声纹理生成器
  • cccolor:一个多种格式的拾色器和色调/阴影生成器

还有更多。 可能应该去完整的 aaalphabet。

M1 Mac 上 Safari 的低帧率

🔗 https://jjj.blog/2021/11/low-framerate-in-safari-on-m1-mac/
阅读评论

John James Jacoby:

我最近注意到,在我的 M1 驱动的 2020 年 MacBook Air 上,Safari 中的动画非常卡顿,于是深入研究了原因。

原因

这不是一个错误。 这是一项 功能。

默认情况下,macOS Monterey 在电池供电时启用“低功耗模式”,并在使用电源适配器时禁用它。 似乎 Safari 被编程为将此设置解释为它应该减少它绘制到屏幕上的次数,以延长电池寿命。

在我的 MacBook Air 上,这意味着从 60fps 降至 30fps。

使用 CSS 的分数 SVG 星星

🔗 https://samuelkraft.com/blog/fractional-svg-stars-css
阅读评论

一些 ⭐️⭐️⭐️⭐️⭐️ 星级评定系统并不总是完全的星级。 假设你想支持评定某个东西 2.25 星。 为此,你可以部分“填充”星星的形状。 我喜欢这个想法,来自 Samuel Kraft。 棘手的部分是

最后一步是使覆盖 div 仅影响下面的星星 SVG,而不是背景。 我们可以通过使用 CSS mix-blend-mode 属性以及 color 值来实现这一点。

查看 Samuel 的帖子以获得交互式演示和更深入的信息,但我认为我应该自己尝试一下,以便了解这个想法

继续阅读 →

Quick Hits

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

CSS-Tricks 由 DigitalOcean 提供支持。

了解最新的 Web 开发

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

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

© 2024 . All rights reserved.