css逻辑属性

有缸今天有耳朵
751 阅读4分钟

因为周会要做分享，赶鸭子上架，简单了解了一下。了解完发现可能没什么用。。。但是既然付出了时间成本，就顺便写下来吧，

物理属性

我们一般使用物理属性（left、right、top、bottom）来描述盒模型。但这些属性受制于书写模式，书写模式改变，物理属性也会改变。

  • 书写模式，也就是writting mode属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。此属性指定块流动方向，即块级容器堆叠的方向，以及行内内容在块级容器中的流动方向。
    水平流动方向也受脚本方向的影响。
    • 从右到左（ltr，英语及大多数语言）
    • 从左到右（rtl，希伯来语或阿拉伯语）

writting-mode.png

逻辑属性

逻辑属性，一般以*-start、*-end结尾的一类css属性。
CSS逻辑属性中没有方向性的概念，也不基于物理、方向和维度，不受书写模式的干扰。 逻辑属性定义了

逻辑属性使用抽象概念block和inline来描述元它们流的方向，这些词语的物理含义取决于书写模式。

  • Block dimension（块维度） 块轴垂直于一行内文本流，即水平书写模式下的垂直维度、垂直书写模式下的水平维度。

  • Inline dimension（行内维度） 行内轴平行于一行内的文本流，即水平书写模式下的水平维度、垂直书写模式下的垂直维度。

block&inline.png

之所以叫逻辑属性，因为其最终的渲染方向表现出逻辑判断。举例：如果文字的排列方向是从左向右的（ltr），那么此时margin-start就与margin-left表示的含义相同；如果文字排列的方向是从右向左的（rtl），那么此时margin-start就与margin-right表示的含义相同。

物理属性到逻辑属性的映射

  • 最常见的从左向右，从上到下

english.png

  • 从右向左

arabic.png

  • 从右向左，从上到下

japanese.png

在这里block和inline不再表示块元素或行内元素，而是代表了方向。在应用的时候根据文本流的方向判断block和inline轴的方向，以start或end代替top和bottom等物理方向的值。

  • 物理属性与逻辑属性重叠
div {
    padding-top: 120px;
    padding-block-start: 100px;
}

取后定义的值，在这里会生效的是100px。

和物理属性一样，逻辑属性也可以缩写

  • margin的缩写
{
    margin-inline-start: 4ch;
    margin-inline-end: 2ch;
}

{
    margin-inline: 4ch 2ch;
}
  • inset的缩写
{
    position: absolute;
    top: 10px;
    bottom: 10px;
}


{
    position: absolute;
    inset-block: 10px;
}

未来

CSS将会提供更多的逻辑属性，虽然在缩写上还有很大的不足，但是新的方案已经在解决中了。
草稿中有个临时方案，如果你想把一个盒子的样式都以逻辑属性设置，可以这样：

{
    margin: 1px 2px 3px 4px;
    margin: 1px 2px;
    margin: 2px;
}

{
    margin: logical 1px 2px 3px 4px;
    margin: logical 1px 2px;
    margin: logical 2px;
}

也就是给每个缩写前面都加个logical，这样子也不好看，也不好写。
所以还有其他提议对块和页面层级的物理和逻辑属性进行修改，但这会将逻辑属性泄露到仍旧应用了物理属性的部分。可以用flow-mode来设置整个文档采用哪种属性。

html {
  flow-mode: physical;
  /* or */
  flow-mode: logical;
  /* now all margin/padding/etc references are logical */
}

简单应用

除了可以适应（兼容）不同语言下的书写习惯，还可以实现卡片的翻转。 比如下面的例子：

demo.png 如果用平时的写法，得分别设置标题和段落的padding值。

.card-1 {
    h1 {
        padding: 30px 60px 0px 40px;
    }
    p {
        text-indent: 2em;
        padding: 0px 50px 40px 20px;
    }
}
.card-2 {
    writing-mode: vertical-rl;
    h1 {
        padding: 40px 30px 60px 0px;
    }
    p {
        text-indent: 2em;
        padding: 20px 0px 50px 40px;
    }
}

使用逻辑属性可以更简单，而且无论卡片的方向如何变，你也不需要去调整标题和段落的样式

h1 {
    padding-block: 30px 0px;
    padding-inline: 40px 60px;
    }
p {
    text-indent: 2em;
    padding-block: 0px 40px;
    padding-inline: 20px 50px;
}

总结：CSS逻辑属性，不仅可以让前端的布局在逻辑上更加严谨，而且能让开发者以更少的代码写出兼容性更好的页面。（😓没用的知识又增加了！我其实并没有见过这玩意的实际应用场景）

参考
web.dev/logical-pro…
css-tricks.com/late-to-log…
developer.mozilla.org/zh-CN/docs/… webdesign.tutsplus.com/tutorials/h…

avatar
文章
阅读
粉丝