变量顺序

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 $200 免费信用额度!

Roman Komarov 的一个迷人的小型技术演示,它允许完全在 CSS 中进行可点击的表格排序。它结合了内联 CSS 自定义属性、order 属性和 calc()

此演示引发了关于可访问性的许多讨论,其关键是重新排序仅在视觉上完成,而不是在源代码中完成。这意味着直接与源代码交互的人(屏幕阅读器)可能会被误导,认为他们已经对表格进行了排序,而实际上并没有。Rachel Andrew 指出,这实际上是 规范本身 告诉您不要做的事情之一

作者必须仅将 order 用于内容的视觉重新排序,而不是逻辑重新排序。使用 order 进行逻辑重新排序的样式表是非符合标准的。

作为精美的 CSS 技巧鉴赏家,我赞赏这个想法。在生产环境中,仍然是 JavaScript 的工作。关于那个 order 属性?它总是使用起来不好吗?Amelia Bellamy-Royds 有 一篇介绍了一个相当不错的用例的文章。Adrian Roselli 的 HTML 源代码顺序与 CSS 显示顺序 涵盖了这一难题。

直接链接 →