阅读gui-challenges项目遇到的问题3(settings)：居中定位和书写方向，这样写不是多此一举吗？

Question

阅读gui-challenges项目遇到的问题3(settings)：居中定位和书写方向，这样写不是多此一举吗？

首先在:root上定义了两个变量

:root {
  --isLTR: 1;
 --isRTL: -1;
}
:root:dir(rtl) {
  --isLTR: -1;
 --isRTL: 1;
}

要把这个input[type:checkbox]的为元素:befere定位到它的中间

该项目的做法是

• 先根据当前书写方式了判断是left:50%，还是right: 50%;

• 然后在使用transform和css变量来进行移动

当书写方向是从左往右的时候，left:50%，此时--isRTL:-1，水平向左移动本身宽度的一半;
当书写方向是从右往左的时候，right:50%，此时--isRTL:1，水平向右移动本身宽度的一半。

我们直接

position:relative;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);

一样可以实现居中，不需要考虑书写方向。项目中为什么要这么写呢？

Answer 1

我知道了。
作者这里虽然写的是

left: 50%;

但其实它想写的是

inset-inline-start: 50%;

使用带有逻辑的声明，此时就需要isLTR变量了。因为在ltr时是left:50%;，而在rtl时是right:50%，相对应translateX(-50%), translateX(50%)