旧版兼容预设

¥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 { defineConfig } from 'unocss'
import presetLegacyCompat from '@unocss/preset-legacy-compat'

export default defineConfig({
  presets: [
    // ...other presets
    presetLegacyCompat({
      // options
      commaStyleColorFunction: 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%)