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

Links

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

Web Components 上的回调?

Go Make Things | https://gomakethings.com/callbacks-on-web-components/
阅读评论

来自 Chris Ferdinandi 的宝石,详细说明了如何使用自定义事件来连接 Web Components。 更重要的是,Chris 认真解释了为什么自定义事件比回调函数更适合。

对于典型的 JavaScript 库,您在实例化过程中传递回调。 […] 由于 Web Components 自行实例化,因此没有简单的方法可以做到这一点。

有一种方法可以使用回调函数,只是没有一种“简单”的方法来实现。

JavaScript 为开发人员提供了一种发出自定义事件的方法,开发人员可以使用 Element.addEventListener() 方法监听这些事件。

我们可以使用自定义事件让开发人员连接到我们编写的代码并运行更多代码以响应事件的发生。 它们提供了一种非常灵活的方法来扩展库或代码库的功能。

不要错过关于 取消自定义事件 的片段!

RTL 样式 101

RTL 样式 101 | https://rtlstyling.com/posts/rtl-styling
阅读评论

几周前,我非常激动地发布了我的第一篇 CSS-Tricks 文章:“字间距已损坏。 不过,忘了那个吧,重要的是这篇文章的主题:字间距已损坏,并且不能按 CSS 规范所说的那样工作。 简而言之,它不是均匀地间隔字符,而是在元素末尾留下了令人不快的空间。

继续阅读 →

`colspan` 和 `rowspan` 属性有何不同?

Mastodon | https://mas.to/@j9t/112926368766374917
阅读评论

是的,是的。 在功能上,它们是不同的。 但是,直到 Jens Oliver Meiert 发了一对快速投票,我才意识到那些古怪的阈值。

根据 HTML 标准

  1. 如果 当前单元格 具有 colspan 属性,则 解析该属性的值,并让 colspan 成为结果。
    如果解析该值失败,或者返回零,或者该属性不存在,则让 colspan 为 1。
    如果 colspan 大于 1000,则让它改为 1000。
  2. 如果 当前单元格 具有 rowspan 属性,则 解析该属性的值,并让 rowspan 成为结果。
    如果解析该值失败,或者该属性不存在,则让 rowspan 为 1。
    如果 rowspan 大于 65534,则让它改为 65534。

我提前看到了答案,我知道我会搞砸 `rowspan`。 显然,`1000` 个表格列足以跨越一次,而 `65534` 是限制我们一次可以跨越多少行的神奇数字。 为什么 `rowspan` 的最佳点比 `colspan` 大 6,4543 个跨度? 这些事情通常有很好的理由。

那个原因是什么,真是太可惜了,但我现在在口袋里放了一点小知识,可以用来在鸡尾酒会上闲聊。

Dialogues 博客

Dialogues | https://thehistoryoftheweb.com/dialogues/
阅读评论

“这不是一个网站。 甚至不是一个博客。 它是一次谈话。”

这就是想法! Jay Hoffman 和我很久以前就开始聊天,一直到他开始写关于 网络历史的系列文章。 和一个对网络有趣角落和缝隙充满知识的人交谈很容易。

无论如何,我一直期待着这些聊天。 有时,其中一个人可能因为某种原因不能参加。 当时,我们一直在讨论不同的博客方法,尤其热衷于整个 “数字花园” 概念。 我们不会种植一个,但这激发了我们把我们长期进行的对话转移到一个博客上——你知道,网络历史上最好的媒介之一。

继续阅读 →

font-size 困境

Sebastian Laube | https://sebastianlaube.de/en/blog/font-size-limbo
阅读评论

您可能还记得 Alvaro 建议 将 `font-size` 从默认的用户代理大小 `16px` 提高到 `1.25rem`。 Sebastian Laube 嘲讽了这一点:

我不会不加思索地采用 Alvaro 的建议,因为这样我会在智能手机上浪费很多空间,例如,许多用户可能会因字体过大而感到恼火。

我从某个视窗大小设置了 `1.2rem` 的字体大小。 但这也必须谨慎操作,因为这样就会出现灰色区域,在这些区域,媒体查询会突然回退到另一个区域……

我个人同意 Alvaro 的观点,默认的 `16px` 大小太小了。 这只是我个人的感觉,我离戴上真正的可口可乐瓶底才能看清屏幕上的东西已经不远了。

继续阅读 →

科技领域的心理健康播客采访

科技领域的心理健康播客 | https://schalkneethling.substack.com/p/vulnerability-and-breaking-the-facade
阅读评论

心理健康总是很难谈论,尤其是在一个我认为经常奖励自大胜过脆弱性的行业。 即使在我 写过关于我自己的慢性抑郁症 以及 探索过关于它的 UX 案例研究 之后,我仍然发现它很难谈论。

但这正是 Schalk Venter 和 Schalk Neethling 在他们的 科技领域的心理健康播客 上所进行的那种讨论。 他们邀请我参加节目,我们深入探讨了当你感觉不好时如何尽力做好工作。 我们深入探讨了这个问题,以至于我们没有意识到两个小时的时间就过去了,而且 采访 被分成了两部分,第二部分 今天发布。

继续阅读 →

现在是讨论“CSS5”的时候了

Smashing Magazine | https://www.smashingmagazine.com/2024/08/time-to-talk-about-css5/
阅读评论

您是否曾经搜索过 CSS 信息,然后发现了一篇文章——也许是在这个网站上的一两篇文章——看起来很有希望,直到您意识到它是在恐龙漫游地球时发布的? 这些信息很好,但也许不能很好地反映现代最佳实践?

我曾经想过很多次。 而且 Chris 也是这样想的。 但是 Brecht De Ruyte 也这样认为,而且他实际上正在做一些事情,还有其他组成 W3C CSS-Next 社区组 的人。 我与他一起为 Smashing Magazine 撰写了 这篇文章,并且很高兴看到“版本控制”CSS 投入了多少讨论、思考和意图。

继续阅读 →

让我们创建一个更简单、更易访问的网络

Christian Heilmann | https://christianheilmann.com/2024/08/05/talk-notes-lets-make-a-simpler-more-accessible-web/
阅读评论

Christian Heilmann 在 Typo3 开发者日 上做了这个演讲。 我之所以链接它,是因为它触动了我心中已经存在的痛点。 网络开发日益复杂,与进入网络开发领域的人数减少呈反比。

我喜欢 Christian 如何比较两个假设的开发堆栈。

继续阅读 →

关于(超)链接的(超)链接

Heydon Pickering | https://heydonworks.com/article/the-anchor-element/
阅读评论

Heydon 关于在锚元素中超链接超文本的优点

有时, <a> 被称为超链接,或者简称为 链接。 但它既不是其中之一,说它是其中之一的人在技术上是错误的(最糟糕的那种错误)。

[…]

一个 <a> 是一个交互式元素(好吧,如果它有一个 href,那就是)。 交互式元素内的文本有时被称为 标签 ,因为它应该告诉您元素的作用。 由于锚点会将您带到网络上的某个位置,因此文本应告诉您您将要去哪里或您可以在那里做什么。

[…]

世界各地的网络开发人员和内容编辑都犯了一个错误,那就是 没有将描述链接的文本真正放在链接内。 考虑到这是编写 超文本 时最主要的事情,这一点非常令人遗憾。

继续阅读 →

与 Dave Rupert 的 Smashing Hour

Smashing Magazine | https://youtu.be/-hXmRkM7dsQ
阅读评论

Smashing Magazine 邀请我与“叔叔”Dave Rupert 坐下来,讨论 Web Components,当然,还要了解 Dave 在微软的新职位,以及 ShopTalk 的联合主持人这些天都在做什么。

继续阅读 →

Quick Hits

看,2024 年 CSS 现状调查 已开放并接受提交。

# 2024 年 8 月 21 日

来自 Jens Oliver Meiert 的免费电子书,将以最好的方式让你厌烦:死记硬背 HTML & CSS

# 2024 年 8 月 14 日

被 Google 杀死 被称为“墓地”,但我也认为它是一份实验履历。

# 2024 年 8 月 14 日

Heydon 发出了提醒,`<address>` 不是用于,你知道,邮件地址。

# 2024 年 8 月 12 日
更多快速提示 →
  • 1
  • 2
  • 3
  • ...
  • 219
  • 旧的

CSS-Tricks 由 DigitalOcean 提供支持。

随时了解网络开发动态

使用我们精心制作的时事通讯

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

© 2024 . All rights reserved.