旧版兼容预设

¥Legacy Compat Preset

旧版兼容性工具的集合。

¥Collections of legacy compatibility utilities.

此预设不包含任何规则，它将后处理应用于从其他预设生成的 CSS。

¥This preset does not include any rules, it's applying postprocess to the generated CSS from other presets.

默认情况下，所有选项均未启用，你需要明确选择每个选项。

¥By default none of the options are enabled, you need to opt-in each of them explicitly.

源代码

¥Source Code

安装

¥Installation

pnpm

pnpm add -D @unocss/preset-legacy-compat

yarn

yarn add -D @unocss/preset-legacy-compat

npm

npm install -D @unocss/preset-legacy-compat

uno.config.ts

import presetLegacyCompat from '@unocss/preset-legacy-compat'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    // ...other presets
    presetLegacyCompat({
      // options
      commaStyleColorFunction: true,
      legacyColorSpace: true
    }),
  ],
})

选项

¥Options

commaStyleColorFunction

• 类型：boolean

  ¥Type: boolean

• 默认：false

  ¥Default: false

将颜色函数（rgb() 和 hsl()）从空格分隔转换为逗号分隔，以便更好地与旧版浏览器兼容。恢复 UnoCSS v0.57.0 之前的旧行为，该行为在 #3221 中更改为空格分隔以与 Tailwind CSS 保持一致。

¥Convert color functions (rgb() and hsl()) from space-separated to comma-separated, for better compatibility with legacy browsers. Bring back the old behavior before UnoCSS v0.57.0 that was changed to space-separated in #3221 to align with Tailwind CSS.

举些例子：

¥For examples:

• rgb(255 0 0) -> rgb(255, 0, 0)

• rgb(255 0 0 / 50%) -> rgba(255, 0, 0, 50%)

• hsl(0 100% 50% / 50%) -> hsla(0, 100%, 50%, 50%)

legacyColorSpace

• 类型：boolean

  ¥Type: boolean

• 默认：false

  ¥Default: false

从生成的样式中删除颜色空间关键字，例如 in oklch 和 in oklab。这对于确保与不支持这些现代颜色空间的旧版浏览器兼容很有用。

¥Removes color space keywords such as in oklch and in oklab from the generated styles. This is useful for ensuring compatibility with legacy browsers that do not support these modern color spaces.

要启用此功能，请将 legacyColorSpace 选项设置为 true。

¥To enable this feature, set the legacyColorSpace option to true.