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

Links

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

Flexbox 和绝对定位

🔗 https://www.chenhuijing.com/blog/flexbox-and-absolute-positioning/
阅读评论

陈慧静 指出,当你绝对定位一个弹性项目时,它不再是弹性布局的一部分。除了……它有点是。如果你将子元素设置为 position: absolute; 但不应用任何 top/right/bottom/left 属性,那么 flexbox 对齐方式将 仍然应用于它。

看到这个有点奇怪,但它也有一定的道理。当你将 position: absolute; 应用于某些东西(以及其他任何东西)时,它们会保持原位,直到你应用其他定位。看看这个 SVG 图标如何 正好位于这段文字的中间,并在调整大小后甚至与其一起流动,因为它除了不影响任何其他内容之外,没有任何特定的定位指令。

改善网站可访问性的 15 件事

🔗 https://websitesetup.org/web-accessibility-checklist/
阅读评论

这是布鲁斯 非常棒的清单。这里有很多可以直接操作的内容。将其发送给你的团队,并将其作为你们一起完成的事情。

这里有一个小问题促使我最终修复了……

继续阅读 →

CSS X

🔗 https://www.w3.org/blog/2020/03/css-x/
阅读评论

我的名字出现在伯特·博斯(原始 CSS 规范的合著者)的 一篇文章 中,所以我认为这是一个人生成就。伯特指出 CSS 已经发展,工作组对版本进行了处理,但工作组过去没有也不打算参与像 CSS3 这样的大型命名横幅发布。他认为这可以成为社区团结起来的事情。

大约每三年,一些人应该选择在该期间添加的几个有趣的新模块,并在标题“CSS 4”、“CSS 5”等下开始撰写关于它们的博文。“CSS X”被定义为这两个模块,加上先前版本中的内容以及一组松散定义的其他模块。

我喜欢这样。也许 新的社区小组 会搞定它。有人必须抓住牛角并宣布它,看看它是否能坚持下去。然后我们几年后再次这样做。

停止使用“下拉菜单”

🔗 https://adrianroselli.com/2020/03/stop-using-drop-down.html
阅读评论

Adrian Roselli 指出它可能实际上意味着

  • 一个 <select> 菜单
  • 一个 ARIA 列表框、组合框、菜单或公开小部件
  • 一个带有 <datalist> 的输入
  • 一个带有 autocomplete 的输入
  • 一个 <details><summary> 块
  • 一个手风琴
  • 弹出式导航

在我自己的使用中,我倾向于指“一种 UI 模式,你点击一个小东西,然后一个大东西就会打开。” 一个 aria-expanded 的情况,比如,你在 CodePen 上点击的用户头像,以展开用户特定的操作和导航。“菜单”对我来说感觉是对的,尽管我不确定这是否是一个很大的改进。

我明白了。下拉菜单实际上没有任何意义,这种歧义可能会损害对话和理解。

使用 HTML title 属性

🔗 https://developer.paciellogroup.com/blog/2010/11/using-the-html-title-attribute/
阅读评论

 史蒂夫·福克纳:

用户组服务不佳使用title属性。

• 手机用户。
• 仅键盘用户。
• 屏幕放大镜用户。
• 屏幕阅读器用户。
• 具有精细运动技能障碍的用户。
• 具有认知障碍的用户。

听起来在 2020 年,title 属性唯一有用的功能是标记 <iframe title="联系表单"></iframe>。

CSS 播客

🔗 https://pod.link/thecsspodcast
阅读评论

来自谷歌的 Adam 和 Una,一个关于 CSS 的播客。我相信我根据合同有义务链接到它!目前只发布 一集,一篇关于 盒子模型 的短文。

我上次写我喜欢的 播客 是 8 年前,现在大多数都消失了,除了像 This American Life 这样的热门播客。 ShopTalk Show 和 CodePen Radio 仍在蓬勃发展!如今我使用 Pocket Casts 作为播放器,我喜欢行业节目,例如

  • 前端欢乐时光
  • JS 派对
  • 语法
  • 返工

这是我订阅的所有节目的截图,但我发现如果幸运的话,我只有时间听大约 10% 的内容。

继续阅读 →

“特异性杂草”

🔗 https://notlaura.com/twitter-thread-as-blog-post-thoughts-on-how-we-write-css/
阅读评论

Lara Schenck:

[……] 使用 WordPress 子主题,你几乎肯定会陷入特异性杂草中,在没有自己编写的主题样式表中搜索,试图找出阻止你应用新样式的现有声明,然后找出你需要覆盖它的最低特异性,然后想“也许如果我自己写所有这些会更快”。

她的观点不是子主题(尽管我认为这是指向使用它们的方式的完美例子,因为你使用它们的方式都是覆盖已经存在的内容),而是对知识的期望。

[……] 除非你是一个“CSS 人员”,否则对特异性及其对代码库未来影响的理解是某种专门知识。是否应该期望每个编写 CSS 的人都了解这些细节?也许吧,但是随着我在各种开发方面变得越来越有经验,我开始认为这是一个不切实际的期望,因为作为开发人员,我们还有很多其他东西需要了解。

处理浏览器事件指南

🔗 https://sarahchima.com/blog/event-handlers/
阅读评论

在这篇文章中,Sarah Chima 向我们介绍了如何使用 JavaScript 处理浏览器事件,例如点击。这里有很多很棒的信息!如果 JavaScript 不是你的强项,我认为这是我读过一段时间以来关于事件处理的最佳解释。

继续阅读 →

两步前进,一步后退

🔗 https://jxnblk.com/blog/two-steps-forward/
阅读评论

Brent Jackson 说 CSS 实用程序库在某种程度上失败了

最终,你需要添加一些实用程序库未涵盖的一次性样式,而且并不总是有明确的方法来扩展你正在使用的内容。如果没有明确的方法来处理此类问题,开发人员往往会添加不一致的 hack 和追加样式。

我感觉 Tailwind 的人会不同意。我对这里没有特别的意见,我只是注意到与早期版本的 Basscss/Tachyons 相比,Tailwind 似乎拥有更狂热的粉丝群。

继续阅读 →

小心嵌套的 `display: grid; height: 100%;`

🔗 https://www.reddit.com/r/webdev/comments/f7edzb/careful_with_css_grid_display_grid_height_100/
阅读评论

你并不每天都能感觉到 CSS 在某些方面很慢。Reddit 用户 jgbbrd 发现嵌套所有具有 100% 高度的网格容器会导致几秒钟的渲染延迟。这可能不是你必须担心的问题,但仍然很有趣。来自评论

  • NSFW 标签的使用真有趣!
  • 使用 100vh 时不会出现此问题。

Quick Hits

# 2024 年 8 月 23 日
# 2024 年 8 月 21 日
# 2024 年 8 月 14 日
# 2024 年 8 月 14 日
更多快速提示 →
  • 更新
  • 1
  • ...
  • 41
  • 42
  • 43
  • ...
  • 219
  • 旧的

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发最新动态

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

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

© 2024 . All rights reserved.