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

Links

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

什么是代码?

🔗 http://www.bloomberg.com/graphics/2015-paul-ford-what-is-code/
阅读评论

保罗·福特的一篇史诗般的作品。我只会挑出一句有趣的引用,因为为什么不呢。

根据研究公司 IDC 的数据,地球上有 1100 万名专业软件开发人员。(另外还有 700 万名业余爱好者。)这大约相当于大洛杉矶都市区的总人口。想象一下,整个洛杉矶都在编程。东好莱坞将是 Mac 程序员的聚集地,西好莱坞将是移动程序员的聚集地,比佛利山将是金融程序员的聚集地,而整个橙县将是 Windows 程序员的聚集地。

你觉得前端开发人员会占据哪个地方?我不知道是日落大道上的 Chick-fil-a 后面的棚屋,还是整个城镇的一半。

将 CSS 断点导入 JavaScript

🔗 https://www.lullabot.com/blog/article/importing-css-breakpoints-javascript
阅读评论

假设你需要让你的 JavaScript 在 CSS 媒体查询断点发生变化时执行某些操作。这就是 matchMedia 的作用,但它的支持度不如媒体查询,而且需要你在 CSS 和 JS 中维护这些断点。

人们一直在为这个问题寻找解决方案。甚至就在 CSS-Tricks 上,比如 Enquire.js,以及一个 基于动画的技术,可以避免调整大小事件,甚至 利用 Sass。

迈克·赫歇尔的解决方案是在 body 元素上更改 :before 内容,并在窗口调整大小时获取该值。当 CSS 断点命中时,该值将发生变化,允许你在 JavaScript 中做出反应。

三个想法:1)如果你正在绑定调整大小事件,可能需要 去抖动。2)如果你不能或不想去抖动,请在执行任何其他操作之前测试值是否实际发生了变化。3)对断点采用良好的 命名策略。

Level 4 CSS 选择器

🔗 http://www.sitepoint.com/future-generation-css-selectors-level-4/
阅读评论

路易斯·拉扎里斯对选择器的未来进行了一次展望(其中大多数目前支持度不高)。其中一些我已经见过并玩过(例如 :valid),而另一些则是全新的(例如 :focus-within,它选择一个处于焦点的输入,以及其父元素)。

超级加速页面加载

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

在学习关于我们应该在性能方面考虑什么以及如何构建和响应请求时,沉浸在杰克·阿奇博尔德的 怪异 魅力 中 11 分钟。

使用纯 CSS 实现加法器和逻辑门

🔗 http://silon.slaks.net/
阅读评论

由 Schabse Laks 进行的实验

Silon 是一个关于 CSS 选择器真正能力的实验。大多数人不会想到 CSS 选择器能够表达任意的布尔逻辑。但是,由于兄弟选择器(AND)、逗号选择器(OR)和 :not() 选择器,这实际上是完全可能的。

对我来说,语法看起来比它编译成的 CSS 更复杂,但嘿,我有点像一个 CSS 人。

反对 CSS in JS

🔗 http://keithjgrant.com/posts/against-css-in-js.html
阅读评论

基思·格兰特关于 HTML 和 JavaScript 之间连接的思考

这种耦合是真实的,也是不可避免的。我们必须将事件监听器绑定到页面上的元素。我们必须从 JavaScript 中更新页面上的元素。我们的代码必须与 DOM 元素进行双向实时交互。

因此

… React 的座右铭是停止假装 DOM 和控制它的 JavaScript 是独立的关注点。

但是

CSS 和 JavaScript 之间的关系不像 HTML 和 JavaScript 之间的关系。对于 HTML 来说,标记和相应组件代码之间的真正关注点分离是不可能的(因为它们实际上是同一个关注点)。对于 CSS 来说,这种分离是可能的。而且,实际上,这些关注点是独特的,因此分离对于干净的代码组织至关重要。

视窗单位 vs 百分比单位

🔗 http://bitsofco.de/2015/viewport-vs-percentage-units/
阅读评论

Ire Aderinokun 提醒我们,100vw 有时比可视区域更宽(因为滚动条)。vh 单位也是如此,但很少有网站有水平滚动条。

但最好的一点是关于调整图像大小,无论屏幕尺寸如何,都会有一个你可以滚动的位置,这样你就可以看到整个图像。

网络!它有什么用?

🔗 https://adactio.com/journal/9016
阅读评论

我最喜欢杰里米·基思最近文章中的部分是第三和第四句话

我只是无法为任何特定的操作系统构建东西,无论是台式机还是移动设备。我会考虑构建内容的潜在生命周期,最后会问自己“为什么还要费心?”

网络也以这种方式适合我的性格。我喜欢从事长期项目。不断努力改进,并通过时间和纯粹的磨损来取得成功。

5 分钟物理学

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

上个月,我观看了大卫·德桑德罗在 Code Genius 上的现场演讲,感谢它现在可以在线观看。在五分钟内,他展示了如何轻松地在 JavaScript 中实现物理学,以一种自然的感觉方式移动事物。这本质上是大卫的 Flickity 库背后的原理,他在几个月前 在这里介绍。

演示在 CodePen 上。

重新审视 :Visited

🔗 http://joelcalifa.com/blog/revisiting-visited/
阅读评论

Joel Califa

一个没有已读/未读功能的电子邮件客户端是不可接受的,那么为什么我们对没有 :visited 样式的网站感到满意呢?

我不知道我是否对此有那么强烈的感受。我认为这是一个上下文问题,类似于 何时使用 _blank。如果有一组链接是列表式的,并且可以想象用户会从知道他们访问过哪些链接中获益,那么请务必添加 :visited 样式。但大多数情况下,可能并没有那么重要。

我喜欢 localStorage 的技巧,因为它允许更多自定义样式!

Quick Hits

# 2024 年 8 月 23 日
# 2024 年 8 月 21 日
# 2024 年 8 月 14 日
# 2024 年 8 月 14 日
更多快速提示 →
  • 更新
  • 1
  • ...
  • 142
  • 143
  • 144
  • ...
  • 219
  • 更早

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发最新动态

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

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

© 2024 . All rights reserved.