在Web应用程序上部署CSS逻辑属性

就用户界面而言，本地化是最有趣的领域之一:文本长度可能因语言而异，文本的默认对齐方式可能不同，阅读方向可以是镜像的或垂直的，以及许多其他不同的情况。简而言之，这是一个令人难以置信的多样性来源，这使得我们的界面和前端工作方式更强大、更可靠、更具挑战性。

对从右到左界面的需求

大多数语言，如法语或英语，都是从左向右阅读的(LTR)。但是，在这些情况下，有些语言(如波斯语、阿拉伯语和希伯来语)具有不同的阅读方向—从右向左(RTL)。

问题是怎么我们能让我们的界面适应这种巨大的变化吗？

CSS逻辑属性之前

在CSS逻辑属性之前，我们可以用不同的方法进行RTL改编:

• 只为RTL附加费/布局添加专用CSS文件；
• 仅追加同一CSS中需要修改的部分，例如[dir="rtl"]。浮动-左{浮动:右；}。

即使这些方法在起作用——我使用了第二种方法来创建支持人权网站的阿拉伯文版几年前——两者都相当次优:

• 您需要为第一个文件维护另一个文件；
• 第二个文件的CSS文件有点重，可能需要处理一些问题(特殊性、添加更多属性等等)。

当然，我们可以用Sass创建巨大的机器来生成几个构建，并使用UnCSS之类的工具来删除不需要的内容，但是说实话:这很无聊，而且会导致“不自然”的代码片段，就像前面的例子一样。

为什么CSS逻辑属性非常适合/有前途

这就是CSS逻辑属性模块进入游戏。这个CSS模块的主要思想是拥有一个逻辑抽象这使我们能够根据文本方向和书写模式(如书写模式,方向，以及文本方向，或者目录HTML中的属性)。这给了我们像水平从右到左或从左到右，垂直RTL，等等的可能性。

实践中的实施

它是如何工作的

有几个概念需要理解，雷切尔·安德鲁斯已经解释过了理解逻辑属性和值":

• 我们不再考虑左边的/正确但是开始/结束(同样的道理也适用于顶端/底部):
• 我们不再说宽度或者高度但是相反在一条直线上的和街区—相当经典。(你可能听说过违约在一条直线上的或者街区元素。