I18n多语言适配时如何在locale为'fn'时修改CSS的float属性值

这里提供两种常用的实现方式，你可以根据项目兼容要求选择：

方案1：根类名样式覆盖（兼容性最好） #

通过给页面根节点挂载 locale 专属类名，针对性覆盖样式即可：

1. 切换多语言时执行逻辑，给 <html> 根标签动态增删对应类：

// 原生JS示例，框架环境可以直接绑定根元素class属性
if (I18n.locale === 'fn') {
  document.documentElement.classList.add('lang-fn')
} else {
  document.documentElement.classList.remove('lang-fn')
}

2. 新增覆盖样式，原有样式无需改动：

/* 原有样式保留 */
.vgt-compact td:before {
  /* 原有其他属性 */
  float: right;
}

/* fn locale 下的专属样式 */
:root.lang-fn .vgt-compact td:before {
  float: left;
}

方案2：CSS逻辑属性适配（更适合多语言RTL/LTR场景） #

如果你的项目不需要兼容非常旧的浏览器，可以用CSS逻辑属性实现自动适配，不用写两套样式：

1. 直接修改原有CSS的float属性为逻辑属性：

.vgt-compact td:before {
  /* 原有其他属性 */
  /* LTR场景下inline-end等效right，RTL场景下等效left */
  float: inline-end;
}

2. 切换多语言时同步修改根节点的文本方向属性即可：

// fn 语言如果是右到左书写方向就设为rtl，否则根据实际需求调整
document.documentElement.dir = I18n.locale === 'fn' ? 'rtl' : 'ltr'

注意：CSS逻辑属性兼容Chrome 87+、Firefox 66+、Safari 15.4+，低版本浏览器环境建议使用方案1。

内容的提问来源于stack exchange，提问作者ZahraEsfandiary