使用流相关的简写增强逻辑布局

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 提供适合您旅程各个阶段的云产品。立即开始使用 价值 200 美元的免费信用额度!

承认:我从未在非英语网站上工作过。我曾在其他团队翻译的网站上工作过,但我并没有参与其中。但是,我会花很多时间思考块级元素和内联级元素。自从 逻辑属性 开始出现以来,已经过去几年了,它们绝对已经开始侵入我的 CSS 肌肉记忆。

如果您像我一样,使用像英语一样的从上到下、从左到右的语言工作,您只需在脑海中将顶部和底部映射到 block(您可能已经这样做了),将左侧和右侧映射到 inline。因此,您不再使用 height,而是使用 block-size。不再使用 border-right,而是使用 border-inline-end。不再使用 padding: 0 1em,而是使用 padding-inline: 1em。不再使用 margin-top,而是使用 margin-block-start

我在 另一篇文章 中绘制了这些内容。

一个问题是浏览器支持有点奇怪。例如,margin-block-end 将在任何逻辑属性起作用的地方起作用,但如果您想设置起始和结束(如 margin: 1rem 0),因此您想使用 margin-block,那么这在某些浏览器中不起作用(尚未)。这有一定的道理,因为 margin-block 没有与任何非逻辑 CSS 属性的“直接映射”。还有很多其他的细微问题,让我对在所有地方使用它们感到有点犹豫。

尽管如此,我可能还是会越来越多地使用它们,即使我仍然主要在英语网站上工作,我喜欢这样一种想法:如果我始终如一地使用它们,那么将我所处理的任何网站翻译成非从左到右和从上到下的语言会更容易得多。更不用说,我喜欢将事物视为块和内联的思维模型。

我试图链接到 Adam Argyle 和 Oriol Brufau 的 文章,所以让我用它的一个引用来结束,说明为什么仅使用非逻辑属性对一种“语言风格”有意义。

在英语中,字母和单词从左到右流动,而段落从上到下堆叠。在传统中文中,字母和单词从上到下流动,而段落从右到左堆叠。仅在这两种情况下,如果我们编写 CSS,将“margin top”放置在段落上,我们只在适当间隔一种语言风格。如果页面从英语翻译成传统中文,边距在新的垂直书写模式下可能毫无意义。

直接链接 →