mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
docs: add more compatibility info about style (#50517)
This commit is contained in:
afc163
GitHub
parent
c2c161f2cd
commit
4bac8efbf2
@ -57,6 +57,8 @@
|
||||
|
||||
## 🖥 兼容环境
|
||||
|
||||
支持范围：https://browsersl.ist/#q=defaults
|
||||
|
||||
- 现代浏览器。
|
||||
- 支持服务端渲染。
|
||||
- [Electron](https://www.electronjs.org/)
|
||||
|
||||
@ -5,37 +5,24 @@ order: 1
|
||||
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:
|
||||
### Default Style Compatibility
|
||||
|
||||
## StyleProvider
|
||||
Ant Design supports the [last 2 versions of modern browsers](https://browsersl.ist/#q=defaults). If you need to be compatible with legacy browsers, please perform downgrade processing according to actual needs:
|
||||
|
||||
Please ref [`@ant-design/cssinjs`](https://github.com/ant-design/cssinjs#styleprovider).
|
||||
| Feature | antd version | Compatibility | Minimum Chrome Version | Compatibility workaround |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| [:where Selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:where) | `>=5.0.0` | [caniuse](https://caniuse.com/?search=%3Awhere) | Chrome 88 | `<StyleProvider hashPriority="high">` |
|
||||
| [CSS Logical Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties) | `>=5.0.0` | [caniuse](https://caniuse.com/css-logical-props) | Chrome 89 | `<StyleProvider transformers={[legacyLogicalPropertiesTransformer]}>` |
|
||||
|
||||
## `layer` Downgrade
|
||||
If you need to support older browsers, please use [StyleProvider](https://github.com/ant-design/cssinjs#styleprovider) for degradation handling according to your actual requirements.
|
||||
|
||||
Ant Design supports configuring `layer` for unified downgrade since `5.17.0`. After the downgrade, the style of antd will always be lower than the default CSS selector priority, so that users can override the style (please be sure to check the browser compatibility of `@layer`):
|
||||
## `:where` in selector
|
||||
|
||||
```tsx
|
||||
import { StyleProvider } from '@ant-design/cssinjs';
|
||||
|
||||
export default () => (
|
||||
<StyleProvider layer>
|
||||
<MyApp />
|
||||
</StyleProvider>
|
||||
);
|
||||
```
|
||||
|
||||
antd styles will be encapsulated in `@layer` to lower the priority:
|
||||
|
||||
```diff
|
||||
++ @layer antd {
|
||||
:where(.css-bAMboO).ant-btn {
|
||||
color: #fff;
|
||||
}
|
||||
++ }
|
||||
```
|
||||
|
||||
## Compatible adjustment
|
||||
- antd version: `>=5.0.0`
|
||||
- MDN: [:where](https://developer.mozilla.org/en-US/docs/Web/CSS/:where)
|
||||
- Browser Compatibility: [caniuse](https://caniuse.com/?search=%3Awhere)
|
||||
- Minimum Chrome Version Supported: 88
|
||||
- Default Enabled: Yes
|
||||
|
||||
The CSS-in-JS feature of Ant Design uses the ":where" selector by default to lower the CSS selector specificity, reducing the additional cost of adjusting custom styles when upgrading for users. However, the compatibility of the ":where" syntax is relatively poor in older browsers ([compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/:where#browser_compatibility)). In certain scenarios, if you need to support older browsers, you can use `@ant-design/cssinjs` to disable the default lowering of specificity (please ensure version consistency with antd).
|
||||
|
||||
@ -77,6 +64,12 @@ Raise priority through plugin:
|
||||
|
||||
## CSS Logical Properties
|
||||
|
||||
- antd version: `>=5.0.0`
|
||||
- MDN：[CSS Logical Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties)
|
||||
- Browser Compatibility: [caniuse](https://caniuse.com/css-logical-props)
|
||||
- Minimum Chrome Version Supported: 89
|
||||
- Default Enabled: Yes
|
||||
|
||||
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
|
||||
@ -102,6 +95,36 @@ When toggled, styles will downgrade CSS logical properties:
|
||||
}
|
||||
```
|
||||
|
||||
## `@layer`
|
||||
|
||||
- antd version: `>=5.17.0`
|
||||
- MDN：[CSS @layer](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer)
|
||||
- Browser Compatibility: [caniuse](https://caniuse.com/css-at-rule-layer)
|
||||
- Minimum Chrome Version Supported: 99
|
||||
- Default Enabled: No
|
||||
|
||||
Ant Design supports configuring `@layer` for unified css priority downgrade since `5.17.0`. After the downgrade, the style of antd will always be lower than the default CSS selector priority, so that users can override the style (please be sure to check the browser compatibility of `@layer`):
|
||||
|
||||
```tsx
|
||||
import { StyleProvider } from '@ant-design/cssinjs';
|
||||
|
||||
export default () => (
|
||||
<StyleProvider layer>
|
||||
<MyApp />
|
||||
</StyleProvider>
|
||||
);
|
||||
```
|
||||
|
||||
antd styles will be encapsulated in `@layer` to lower the priority:
|
||||
|
||||
```diff
|
||||
++ @layer antd {
|
||||
:where(.css-bAMboO).ant-btn {
|
||||
color: #fff;
|
||||
}
|
||||
++ }
|
||||
```
|
||||
|
||||
## Rem Adaptation
|
||||
|
||||
In responsive web development, there is a need for a convenient and flexible way to achieve page adaptation and responsive design. The `px2remTransformer` transformer can quickly and accurately convert pixel units in style sheets to rem units relative to the root element (HTML tag), enabling the implementation of adaptive and responsive layouts.
|
||||
|
||||
@ -5,38 +5,25 @@ order: 1
|
||||
title: 样式兼容
|
||||
---
|
||||
|
||||
Ant Design 支持最近 2 个版本的现代浏览器。如果你需要兼容旧版浏览器，请根据实际需求进行降级处理：
|
||||
## 默认样式兼容性说明
|
||||
|
||||
## StyleProvider
|
||||
Ant Design 5.x 支持[最近 2 个版本的现代浏览器](https://browsersl.ist/#q=defaults)。默认情况下，我们使用了一些现代 CSS 特性来提高样式的可维护性和可扩展性，这些特性在旧版浏览器中可能不被支持，好在我们可以通过一些降级兼容方案来解决。
|
||||
|
||||
查看 [`@ant-design/cssinjs`](https://github.com/ant-design/cssinjs#styleprovider).
|
||||
| 特性 | antd 版本 | 兼容性 | 最低 Chrome 版本 | 降级兼容方案 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| [:where 选择器](https://developer.mozilla.org/en-US/docs/Web/CSS/:where) | `>=5.0.0` | [caniuse](https://caniuse.com/?search=%3Awhere) | Chrome 88 | `<StyleProvider hashPriority="high">` |
|
||||
| [CSS 逻辑属性](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties) | `>=5.0.0` | [caniuse](https://caniuse.com/css-logical-props) | Chrome 89 | `<StyleProvider transformers={[legacyLogicalPropertiesTransformer]}>` |
|
||||
|
||||
## `layer` 降权
|
||||
|
||||
Ant Design 从 `5.17.0` 起支持配置 `layer` 进行统一降权。经过降权后，antd 的样式将始终低于默认的 CSS 选择器优先级，以便于用户进行样式覆盖（请务必注意检查 `@layer` 浏览器兼容性）：
|
||||
|
||||
```tsx
|
||||
import { StyleProvider } from '@ant-design/cssinjs';
|
||||
|
||||
export default () => (
|
||||
<StyleProvider layer>
|
||||
<MyApp />
|
||||
</StyleProvider>
|
||||
);
|
||||
```
|
||||
|
||||
antd 的样式会被封装在 `@layer` 中，以降低优先级：
|
||||
|
||||
```diff
|
||||
++ @layer antd {
|
||||
:where(.css-bAMboO).ant-btn {
|
||||
color: #fff;
|
||||
}
|
||||
++ }
|
||||
```
|
||||
如果你需要兼容旧版浏览器，请根据实际需求使用 [StyleProvider](https://github.com/ant-design/cssinjs#styleprovider) 降级处理。
|
||||
|
||||
## `:where` 选择器
|
||||
|
||||
- 支持版本：`>=5.0.0`
|
||||
- MDN 文档：[:where](https://developer.mozilla.org/en-US/docs/Web/CSS/:where)
|
||||
- 浏览器兼容性：[caniuse](https://caniuse.com/?search=%3Awhere)
|
||||
- Chrome 最低支持版本：88
|
||||
- 默认启用：是
|
||||
|
||||
Ant Design 的 CSS-in-JS 默认通过 `:where` 选择器降低 CSS Selector 优先级，以减少用户升级时额外调整自定义样式的成本，不过 `:where` 语法的[兼容性](https://developer.mozilla.org/en-US/docs/Web/CSS/:where#browser_compatibility)在低版本浏览器比较差。在某些场景下你如果需要支持旧版浏览器，你可以使用 `@ant-design/cssinjs` 取消默认的降权操作（请注意版本保持与 antd 一致）：
|
||||
|
||||
```tsx
|
||||
@ -77,9 +64,15 @@ export default () => (
|
||||
|
||||
## CSS 逻辑属性
|
||||
|
||||
- 支持版本：`>=5.0.0`
|
||||
- MDN 文档：[:where](https://developer.mozilla.org/en-US/docs/Web/CSS/:where)
|
||||
- 浏览器兼容性：[caniuse](https://caniuse.com/css-logical-props)
|
||||
- Chrome 最低支持版本：89
|
||||
- 默认启用：是
|
||||
|
||||
为了统一 LTR 和 RTL 样式，Ant Design 使用了 CSS 逻辑属性。例如原 `margin-left` 使用 `margin-inline-start` 代替，使其在 LTR 和 RTL 下都为起始位置间距。如果你需要兼容旧版浏览器（如 360 浏览器、QQ 浏览器 等等），可以通过 `@ant-design/cssinjs` 的 `StyleProvider` 配置 `transformers` 将其转换：
|
||||
|
||||
```tsx
|
||||
```tsx | pure
|
||||
import { legacyLogicalPropertiesTransformer, StyleProvider } from '@ant-design/cssinjs';
|
||||
|
||||
// `transformers` 提供预处理功能将样式进行转换
|
||||
@ -102,11 +95,41 @@ export default () => (
|
||||
}
|
||||
```
|
||||
|
||||
## `@layer` 样式优先级降权
|
||||
|
||||
- 支持版本：`>=5.17.0`
|
||||
- MDN 文档：[@layer](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer)
|
||||
- 浏览器兼容性：[caniuse](https://caniuse.com/?search=%40layer)
|
||||
- Chrome 最低支持版本：99
|
||||
- 默认启用：否
|
||||
|
||||
Ant Design 从 `5.17.0` 起支持配置 `layer` 进行统一降权。经过降权后，antd 的样式将始终低于默认的 CSS 选择器优先级，以便于用户进行样式覆盖（请务必注意检查 `@layer` 浏览器兼容性）：
|
||||
|
||||
```tsx | pure
|
||||
import { StyleProvider } from '@ant-design/cssinjs';
|
||||
|
||||
export default () => (
|
||||
<StyleProvider layer>
|
||||
<MyApp />
|
||||
</StyleProvider>
|
||||
);
|
||||
```
|
||||
|
||||
antd 的样式会被封装在 `@layer` 中，以降低优先级：
|
||||
|
||||
```diff
|
||||
++ @layer antd {
|
||||
:where(.css-bAMboO).ant-btn {
|
||||
color: #fff;
|
||||
}
|
||||
++ }
|
||||
```
|
||||
|
||||
## rem 适配
|
||||
|
||||
在响应式网页开发中，需要一种方便且灵活的方式来实现页面的适配和响应式设计。`px2remTransformer` 转换器可以快速而准确地将样式表中的像素单位转换为相对于根元素（HTML 标签）的 rem 单位，实现页面的自适应和响应式布局。
|
||||
|
||||
```tsx
|
||||
```tsx | pure
|
||||
import { px2remTransformer, StyleProvider } from '@ant-design/cssinjs';
|
||||
|
||||
const px2rem = px2remTransformer({
|
||||
|
||||
Loading…
Reference in New Issue
Block a user