您已经看到过这幅标志性图像。 也许这幅图像之所以如此标志性,是因为人们从中看到了他们想看到的东西。 如果你把它看作是对 CSS 愚蠢、奇怪或令人困惑的批评,你可以在图像中看到这一点。 如果你把它看作是 CSS 的强大和灵活,你也可以看到这一点。 这就是 Jim Neilsen 在这里所说的,对 Hidde de Vries 的演讲 作出回应。
这就是 CSS 的力量。 它为你提供了选择。 使用它们或不使用它们。
希望它明显溢出? 可以。 希望它砍掉溢出的内容? 可以。 希望它拉伸? 可以。 希望它省略号? 可以。 希望它换行或不换行? 可以。 希望缩放类型以适应? 可以。 如果你喜欢 CSS,这可能正是原因。
Mandy Michael 几年以前在 Twitter 上发布了一个关于这个话题的精彩帖子。
Brandon Smith 几年以前也写过关于这一切的内容。 我仍然很高兴 Eric Meyer 询问了这幅图像的原始创建者,Panic 的 Steve Frank,而 Steve 曾经 光顾这里 解释了真正的起源。
那是 2009 年,我花了似乎是几个小时的时间试图用 CSS 做一些事情,而我知道我已经可以用表格在几秒钟内完成。 我非常努力地想用 CSS 完成它,因为这就是你应该做的事情,但我对它并不精通(剧透预警:我现在仍然不太精通)。
我对溢出概念的理解现在略微好一点,但当时我无法理解的是,为什么有人认为默认行为应该是让文本直接从盒子里冒出来,而不是像我漂亮、明智的表格一直以来那样,直接把盒子放大。
无论如何,我只是经历了这一刻的纯粹沮丧,并且,我没有正确地解决问题,而是花了 5 分钟时间创建了一个刻薄的杯子,然后又开始使用表格。 因为这是我在危机时刻的标志性举动。
因此,这幅原始作品确实是源于沮丧,但它依然激发了人们对 CSS 的许多情书。 它也无疑在 CSS 恶名中赢得了自己的位置,与 Peter Griffin 难以处理百叶窗 并列,成为有史以来最具标志性的 CSS 图像之一。
但如果你想删除显式宽度并且仍然让盒子成为正方形? 那么它就变成了一种填充和 position:absolute 的极客技巧。
我认为新的
aspect-ratio
属性将有助于处理这个问题……