Adobe Flash 的终结
阅读评论
我来埋葬 Flash,而不是赞美它。
这样写道 Matt May 在这篇关于 Adobe Flash 的终结 的优秀帖子中。 不久前,网页设计师使用 Flash 来创建引人注目的视觉效果、动画和游戏。 但此后不久,它开始取代 HTML 和 CSS,这导致了大量可访问性问题。 大多数 Flash 网站无法通过键盘导航,屏幕阅读器根本无法解析它们。
我们正在阅读来自网络的内容,并有一些想法。 有我们应该知道的链接吗? 告诉我们!
我来埋葬 Flash,而不是赞美它。
这样写道 Matt May 在这篇关于 Adobe Flash 的终结 的优秀帖子中。 不久前,网页设计师使用 Flash 来创建引人注目的视觉效果、动画和游戏。 但此后不久,它开始取代 HTML 和 CSS,这导致了大量可访问性问题。 大多数 Flash 网站无法通过键盘导航,屏幕阅读器根本无法解析它们。
Adam Argyle 在 web.dev 上发表了一篇文章 深入探讨了这个问题。 他从你需要进行垂直居中和水平居中这一假设出发。 传统上,垂直居中对人们来说比较棘手,尤其是在内容高度未知的情况下。
我们有 一篇关于居中的完整指南,涵盖了各种情况,例如决策树。
Adam 详细介绍了处理这种情况的 五种 方法,甚至深入到居中未知的垂直和水平尺寸,以及一些其他约束,例如语言方向和多个元素。 我想,所有关于 CSS 中居中难度很大的愚蠢笑话都需要更新了。 也许他们应该嘲讽 CSS 中存在多少种很棒的居中方式。
我真的很不喜欢 FOUT。 我喜欢它是一个选项,因为在网络上无法快速显示文本是不好的。 我知道 font-display: swap;
很受欢迎,因为它有利于性能,但 FOUT 让我很痛苦。 Matt Hobbs
如果这篇帖子里有一件事我希望读者记住,那就是
font-display: swap
是一个非常好的选择,适合网络连接快速的用户的。 但它的无限交换周期可能会让网络连接非常缓慢和不稳定的用户感到沮丧。 如果你有用户在这些条件下浏览你的网站(我相信你会遇到的),那么你可能需要考虑font-display: fallback
甚至font-display: optional
。
看到了吗,我早就告诉过你。 我喜欢 font-display: optional;
完全停止 FOUT 的方式。 字体要么超级快地应用,要么根本不使用(但仍然异步下载)。 有可能,在下一个页面加载时,字体会被加载并缓存,然后就会被使用。
Josh Comeau 介绍了 边距折叠的概念。
这个想法可能听起来很简单,但如果你已经编写了很长时间的 CSS,那么你几乎肯定会对边距不折叠或以奇怪且意想不到的方式折叠感到惊讶。 在现实世界的项目中,各种各样的情况都会使事情变得复杂。
这些东西非常相似,我很难区分它们。 这是 viewBox(多么酷的名字和 URL,我希望他们能一直保留下去)提供的一个简短的解释。
最重要的是,clipPath
(SVG 中的元素,以及 CSS 中的 clip-path
)是矢量的,当它被应用时,无论你裁剪什么,它要么 在里面,要么在外面。 使用 mask,你还可以进行 部分 透明度,这意味着你可以使用渐变来实现,例如,淡出你要遮蔽的内容。 因此我意识到 mask 更强大,因为它们可以完成 clip path 能做的一切,甚至更多。
对 Michelle Barker 在这里 表示衷心的感谢。
我发现自己需要在 CSS 中反复进行以下操作:用另一个元素完全覆盖一个元素。 每次的 CSS 都是一样的:第一个元素(需要被覆盖的元素)应用了
position: relative
。 第二个元素有position: absolute
,并被定位,使得它的四条边都与第一个元素的边缘对齐。
这篇文章 没有署名,发布在一个比这个网站更奇怪的网站上,但我喜欢这里使用的技巧。 七列网格可以快速创建日历布局。 你可以自然地让日期(网格项)落在上面,除了使用 grid-column-start
将第一天踢到正确的第一列。
我真的很感谢对一项技术的真实世界演练。 不仅是这项技术 做什么,还有 为什么 选择它以及它 如何 为团队工作。 任何人都可以阅读文档,但你通过多年真实世界使用所积累的知识要宝贵得多。 Kitty Giraudel
我想认真反思一下使用 Fela 而不是任何其他你可能听说过的 CSS-in-JS 库的选择。
我以前从未听说过 Fela。 对我来说,最有趣的部分是“原子”输出。 看起来它将所有独特的 property: value
对的使用组合成一个独特的类,然后将所有必要的类应用于必要的 DOM 节点。 我相信这会导致一些相当糟糕的类输出。(我建议在事物上也加上合理命名的样式钩子,方便人类阅读。) 但我认为,生成的并应用于页面的 CSS 块最终会尽可能小,因为它不包含任何重复的内容。 这是任何配置良好的原子类工作流程的优势之一:CSS 很小。