docs: Update CSS Logical (#39768)

* docs: Update CSS Logical

* docs: more info

docs/react/compatible-style.en-US.md

@@ -0,0 +1,62 @@
+---
+order: 6.5
+title: CSS Compatible
+---
+
+Ant Design supports the last 2 versions of modern browsers. If you need to be compatible with legacy browsers, please perform downgrade processing according to actual needs:
+
+### Compatible adjustment
+
+Ant Design default using CSS-in-JS with `:where` Selector to reduce priority to avoid user additional adjust style cost when updating. If you want to support old browser, you can use `@ant-design/cssinjs` to adjust this behavior (Please note keep version align with antd):
+
+```tsx
+import React from 'react';
+import { StyleProvider } from '@ant-design/cssinjs';
+
+// Config `hashPriority` to `high` instead of default `low`
+// Which will remove `:where` wrapper
+export default () => (
+  <StyleProvider hashPriority="high">
+    <MyApp />
+  </StyleProvider>
+);
+```
+
+It will turn `:where` to class selector:
+
+```diff
+--  :where(.css-bAMboO).ant-btn {
+++  .css-bAMboO.ant-btn {
+      color: #fff;
+    }
+```
+
+Note: After turning off the `:where` downgrade, you may need to manually adjust the priority of some styles.
+
+### CSS Logical Properties
+
+To unify LTR and RTL styles, Ant Design uses CSS logical properties. For example, the original `margin-left` is replaced by `margin-inline-start`, so that it is the starting position spacing under both LTR and RTL. If you need to be compatible with older browsers, you can configure `transformers` through the `StyleProvider` of `@ant-design/cssinjs`:
+
+```tsx
+import React from 'react';
+import { StyleProvider, legacyLogicalPropertiesTransformer } from '@ant-design/cssinjs';
+
+// `transformers` provides a way to transform CSS properties
+export default () => (
+  <StyleProvider transformers={[legacyLogicalPropertiesTransformer]}>
+    <MyApp />
+  </StyleProvider>
+);
+```
+
+When toggled, styles will downgrade CSS logical properties:
+
+```diff
+.ant-modal-root {
+-- inset: 0;
+++ top: 0;
+++ right: 0;
+++ bottom: 0;
+++ left: 0;
+}
+```

docs/react/compatible-style.zh-CN.md

@@ -0,0 +1,62 @@
+---
+order: 6.5
+title: 样式兼容
+---
+
+Ant Design 支持最近 2 个版本的现代浏览器。如果你需要兼容旧版浏览器，请根据实际需求进行降级处理：
+
+### `:where` 选择器
+
+Ant Design 的 CSS-in-JS 默认通过 `:where` 选择器降低 CSS Selector 优先级，以减少用户升级时额外调整自定义样式成本。在某些场景下你如果需要支持的旧版浏览器，你可以使用 `@ant-design/cssinjs` 取消默认的降权操作（请注意版本保持与 antd 一致）：
+
+```tsx
+import React from 'react';
+import { StyleProvider } from '@ant-design/cssinjs';
+
+// `hashPriority` 默认为 `low`，配置为 `high` 后，
+// 会移除 `:where` 选择器封装
+export default () => (
+  <StyleProvider hashPriority="high">
+    <MyApp />
+  </StyleProvider>
+);
+```
+
+切换后，样式将从 `:where` 切换为类选择器：
+
+```diff
+--  :where(.css-bAMboO).ant-btn {
+++  .css-bAMboO.ant-btn {
+      color: #fff;
+    }
+```
+
+注意：关闭 `:where` 降权后，你可能需要手动调整一些样式的优先级。
+
+### CSS 逻辑属性
+
+为了统一 LTR 和 RTL 样式，Ant Design 使用了 CSS 逻辑属性。例如原 `margin-left` 使用 `margin-inline-start` 代替，使其在 LTR 和 RTL 下都为起始位置间距。如果你需要兼容旧版浏览器（如 360 浏览器、QQ 浏览器 等等），可以通过 `@ant-design/cssinjs` 的 `StyleProvider` 配置 `transformers` 将其转换：
+
+```tsx
+import React from 'react';
+import { StyleProvider, legacyLogicalPropertiesTransformer } from '@ant-design/cssinjs';
+
+// `transformers` 提供预处理功能将样式进行转换
+export default () => (
+  <StyleProvider transformers={[legacyLogicalPropertiesTransformer]}>
+    <MyApp />
+  </StyleProvider>
+);
+```
+
+切换后，样式将降级 CSS 逻辑属性：
+
+```diff
+.ant-modal-root {
+-- inset: 0;
+++ top: 0;
+++ right: 0;
+++ bottom: 0;
+++ left: 0;
+}
+```

docs/react/customize-theme.en-US.md

@@ -236,31 +236,9 @@ const theme = {
 };
 ```
 
-### Compatible adjustment
+### Legacy Browser Compatible
 
-Ant Design default using CSS-in-JS with `:where` Selector to reduce priority to avoid user additional adjust style cost when updating to v5. If you want to support old browser, you can use `@ant-design/cssinjs` to adjust this behavior (Please note keep version align with antd):
-
-```tsx
-import React from 'react';
-import { StyleProvider } from '@ant-design/cssinjs';
-
-export default () => (
-  <StyleProvider hashPriority="high">
-    <MyApp />
-  </StyleProvider>
-);
-```
-
-It will turn `:where` to class selector:
-
-```diff
---  :where(.css-bAMboO).ant-btn {
-++  .css-bAMboO.ant-btn {
-      color: #fff;
-    }
-```
-
-Note: After turning off the `:where` downgrade, you may need to manually adjust the priority of some styles.
+Please ref to [CSS Compatible](/docs/react/compatible-style).
 
 ### Server Side Render (SSR)
 

docs/react/customize-theme.zh-CN.md

@@ -236,32 +236,6 @@ const theme = {
 };
 ```
 
-### 兼容性调整
-
-Ant Design 的 CSS-in-JS 默认通过 `:where` 选择器降低 CSS Selector 优先级，以减少用户升级 v5 时额外调整自定义样式成本。在某些场景下你如果需要支持的旧版浏览器，你可以使用 `@ant-design/cssinjs` 取消默认的降权操作（请注意版本保持与 antd 一致）：
-
-```tsx
-import React from 'react';
-import { StyleProvider } from '@ant-design/cssinjs';
-
-export default () => (
-  <StyleProvider hashPriority="high">
-    <MyApp />
-  </StyleProvider>
-);
-```
-
-切换后，样式将从 `:where` 切换为类选择器：
-
-```diff
---  :where(.css-bAMboO).ant-btn {
-++  .css-bAMboO.ant-btn {
-      color: #fff;
-    }
-```
-
-注意：关闭 `:where` 降权后，你可能需要手动调整一些样式的优先级。
-
 ### 服务端渲染
 
 使用 `@ant-design/cssinjs` 将所需样式抽离：
@@ -299,6 +273,10 @@ export default () => {
 };
 ```
 
+### 兼容旧版浏览器
+
+请参考文档 [样式兼容](/docs/react/compatible-style-cn)。
+
 ### Shadow DOM 场景
 
 在 Shadow DOM 场景中，由于其添加 `<style />` 标签的方式与普通 DOM 不同，所以需要使用 `@ant-design/cssinjs` 的 `StyleProvider` 配置 `container` 属性用于设置插入位置：

package.json

@@ -110,7 +110,7 @@
   ],
   "dependencies": {
     "@ant-design/colors": "^6.0.0",
-    "@ant-design/cssinjs": "^1.0.0",
+    "@ant-design/cssinjs": "^1.3.0",
     "@ant-design/icons": "^4.7.0",
     "@ant-design/react-slick": "~1.0.0",
     "@babel/runtime": "^7.18.3",