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

Links

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

“开发者体验”的诱饵和调包

🔗 https://infrequently.org/2018/09/the-developer-experience-bait-and-switch/
阅读评论

Alex Russell 描述了他对当前 JavaScript 状态的看法,以及我们有时如何将大量精力放在开发的易用性上,而牺牲了用户体验。例如,我们可能会选择一个庞大的框架来使开发更容易、更快,但这可能会对用户产生巨大的影响。

Alex 将其描述为“用开发者价值取代用户价值”。

“开发者体验”的诱饵和调包通过迎合听众作为开发者或管理者的狭隘利益来运作,声称在一个类别中占据主导地位,以便将其他人排除在对话之外。这种交换是通过暗示,通过使开发人员的工作变得更好,用户最终将同等地受益来实现的。未言明的协议是,开发人员与最终用户甚至管理者有着完全相同的目标和同样的强烈程度。事实并非如此。

不过,关键在于

JavaScript 是网络的 CO2。我们需要一些,但太多会使整个生态系统面临风险。排放最多的人最远离遭受后果的人——直到生态系统崩溃。除非我们控制住 JS 排放,否则网络将无法在计算走向的市场和形态因素中取得成功。

根据这个标准,我们投入“设计系统”的工作也可能落入这个陷阱。但在这方面,实现易用性也有一些道理:更一致的代码库可能对可访问性、UX 一致性等非常有利。

因此,虽然我同意 Alex 在此处的假设,但我并不完全确定我完全同意这个主题。

在其他事物之上放置事物

🔗 http://tellthemachines.com/stacking-contexts/
阅读评论

Isabel Brison 对z-index的艰难历程进行了通俗易懂的解读。表面上,z-index看起来很简单。它是一个数字,表示什么在什么之上……假设它是定位的……并且假设它与其他事物位于相同的堆叠上下文。

……这就是要点:堆叠上下文是由各种属性引起的,它们存在的主要原因是性能问题和浏览器易于实现。它们并不总是与 z-index 或排序相关;它们出现在任何需要将多个元素都放在同一层进行渲染的地方。

Safari 毁灭者 ☠️

🔗 https://gist.github.com/pwnsdx/ce64de2760996a6c432f06d612e33aea
阅读评论

安全研究员 Sabri 发布了一段代码,它将“强制重启任何 iOS 设备”。看到 HTML & CSS 拥有这种危险的能力很有趣。它本质上是一堆<div>,其规模非常大,然后设置在重复的 JPG 图像之上,每个<div>通过backdrop-filter模糊背景。它必须导致如此极端且无法处理的内存使用,以至于它会对浏览器以及整个操作系统造成严重破坏。

我试图自己测试它,并非常小心地不要执行它……但当然我做到了,它在我的 MacBook Pro 上崩溃了我的 Chrome 68。不是整个操作系统,但我不得不强制退出浏览器。再说一次,我想即使是while(true) {}也可以做到这一点!

gist 上的评论线程包含更多有趣的细节,例如它如何崩溃 iOS Safari 9+(包括新的 12 版!)以及PlayStation 3 原生浏览器上的奇怪行为。

推出 YOOtheme Pro 页面构建器

🔗 https://synd.co/2Lv9LSD
阅读评论

YOOtheme Pro 是由 YOOtheme 开发的一个强大的主题和页面构建器,它提供了在 WordPress 中构建网站的新体验。由于高级布局和直观的页面构建器,设计师将获得一种轻松而激动人心的设计和创建网站的方式,而开发人员将特别欣赏其可扩展性和简洁、语义化的代码。YOOtheme 作为领先的主题提供商已有 10 多年的历史,现在凭借 YOOtheme Pro,他们创造了下一个值得关注的 WordPress 市场页面构建器。

继续阅读 →

从 GitHub.com 前端移除 jQuery

🔗 https://githubengineering.com/removing-jquery-from-github-frontend/
阅读评论

以下是 GitHub 团队如何以及为何逐渐弃用其代码库中的 jQuery 的方法

我们最近完成了一个里程碑,我们能够将 jQuery 作为 GitHub.com 前端代码的依赖项删除。这标志着我们逐渐、多年来逐渐减少对 jQuery 的依赖的结束,直到我们能够完全移除该库。在这篇文章中,我们将解释我们最初开始依赖 jQuery 的一些历史,我们何时意识到它不再需要,并指出——我们能够使用标准浏览器 API 实现我们所需的一切,而不是用另一个库或框架替换它。

该团队探讨了如何使用eslint-plugin-jquery 等工具来阻止 GitHub 的开发人员使用 jQuery,但该团队还注意到他们决定完全删除某些设计行为以帮助他们实现这一目标

作为我们改进的 GitHub.com 前端功能构建方法的一部分,我们尽可能地专注于摆脱常规 HTML 基础,并且仅将 JavaScript 行为添加为渐进增强。因此,即使那些使用 JS 增强的 Web 表单和其他 UI 元素通常也可以在浏览器中禁用 JavaScript 的情况下使用。在某些情况下,我们能够完全删除某些旧版行为,而不是必须用原生 JS 重写它们。

我认为所有这些都是好消息。这对 jQuery 有利,对开发者有利,对网络也有利。但它也表明,自 2006 年 jQuery 首次发布以来,浏览器已经发展到了何种程度。我想知道 12 年后浏览器将能够做什么。

为什么设计师在阅读时不想思考

🔗 https://www.subtraction.com/2018/08/06/why-designers-dont-want-to-think-when-they-read/
阅读评论

我们都见过诸如“修复您的注册流程并继续生活的 5 种方法”之类的文章。这样的文章并没有错或不好,它们只是肤浅且有点像垃圾食品和 BuzzFeed 风格。当然,设计师的实际工作是复杂、细致和困难的。但深入探讨所有这些内容的情况要少得多。

Khoi Vinh 一直在撰写这方面的内容,并指出了来自 Fabricio Teixeira 和 Caio Braga 的一些深刻的自省,他们是广受欢迎的UX Collective 的出版商。

很明显,设计话语的货币真正关注的是设计的“如何”,而不是设计的“为什么”。正如 Teixeira 和 Braga 所写

虽然设计师倾向于对神奇公式持怀疑态度——我们对自助大师、神奇饮食或奇迹般的职业建议持怀疑态度——但当涉及到设计时,我们对公式化解决方案的容忍度却出奇地高。

这是一个尖锐的批评,但在我看来,它也非常准确。

视觉化。直观。与众不同。

🔗 https://synd.co/2wqEmex
阅读评论

此团队管理工具非常适合任何行业部门和任何规模的团队。monday.com 将完美地服务于一个由两人组成的团队或一个遍布全球的数百人团队,并且它可以同时管理多个项目。

monday.com 促进轻松协作和透明度,它“快如猎豹”,它以多达 20 种不同的颜色显示状态,并且其状态板可以自定义以适合您的需求和工作流程。

它可以作为一种极好的替代方案,无需您强迫您的工作以满足项目管理工具或系统的需求。

开始免费试用

CSS 网格布局中百分比和无限高度的变化

🔗 https://blogs.igalia.com/mrego/2018/08/10/changes-on-css-grid-layout-in-percentages-and-indefinite-height/
阅读评论

这是 Manuel Rego Casasnovas 对一项非常具体的 CSS 更改进行的精彩的极客式深入探讨。以下是一些我们应该知道的术语

第一个问题是,什么是无限大小?简单来说,确定大小是可以不考虑元素内容即可计算的大小。无限大小则相反,为了计算它,您需要首先检查内容。

然后继续解释这一切是如何变得复杂的。简而言之,更改如下

对于无限高度网格容器,百分比行轨道和槽将根据内在高度解析,而不是分别被视为自动和零。

继续阅读 →

自定义单选按钮而不影响可访问性

🔗 https://blog.bitsrc.io/customise-radio-buttons-without-compromising-accessibility-b03061b5ba93
阅读评论

这是陈慧静的一篇漂亮的文章,她在文章中向我们介绍了她通过键盘使单选按钮可访问的过程。我特别喜欢她讨论的这部分内容,她讨论了我们可以用来隐藏单选按钮输入并将其替换为充当切换按钮的卡片选择的四种选项

当我们隐藏输入元素时,我们大多数人在键盘导航部分犯错。有几种方法可以使某些内容不可见或隐藏

  • clip-path: polygon(0 0)
  • display: none
  • opacity: 0
  • visibility: hidden

对于自定义单选按钮(或复选框),不建议使用选项 2 和 4,因为屏幕阅读器将无法读取默认的单选按钮元素。这也阻止我们在隐藏的输入上使用:focus 伪元素,因此它们不在考虑范围内。

这使我们只剩下选项 1 和选项 3。我有点喜欢选项 1,因为 clip-path 很有趣。Clip-path 创建一个剪辑区域,该区域定义元素的哪一部分可见。此剪辑区域可以是基本形状,也可以是引用剪辑路径元素的 url。

而且,当我们谈论样式和可访问性时,值得查看 Scott O’Hara 的可访问性导向的样式化表单组件存储库 和 Dave Rupert 的可访问组件的营养卡片。

CSS Houdini 的交互式介绍

🔗 http://houdini.glitch.me/
阅读评论

这是 Sam Richard 创建的一个很棒的解释性微型网站。

CSS Houdini 将允许作者利用实际的 CSS 引擎,最终允许我们扩展 CSS,并以 CSS 速度执行此操作。就像 Service Workers 是浏览器缓存的低级 JavaScript API 一样,Houdini 为浏览器的渲染引擎引入了低级 JavaScript API。

需要了解的重要一点是,Houdini 被分成了不同的部分,每个部分都将单独实现。我们在这里有一篇关于Paint API 简介以及其他一些相关文章。这里有一个 Dan Wilson 整理的非常酷的集合,包含了Houdini + 自定义属性。

Quick Hits

# 2024年8月23日
# 2024年8月21日
# 2024年8月14日
# 2024年8月14日
更多快速提示 →
  • 更新
  • 1
  • ...
  • 75
  • 76
  • 77
  • ...
  • 219
  • 旧文章

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发最新动态

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

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

© 2024 . All rights reserved.