Пресет совместимости с устаревшими версиями

Коллекция утилит для обеспечения совместимости с устаревшими версиями.

Этот пресет не включает никаких правил, он применяет постобработку к сгенерированному CSS из других пресетов.

По умолчанию ни одна из опций не включена, вам нужно явно включить каждую из них.

Исходный код

Установка

pnpm

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

yarn

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

npm

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

bun

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

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

export default defineConfig({
  presets: [
    // ...другие пресеты
    presetLegacyCompat({
      // параметры
      commaStyleColorFunction: true,
      legacyColorSpace: true
    }),
  ],
})

Параметры

commaStyleColorFunction

• Тип: boolean
• По умолчанию: false

Преобразование цветовых функций (rgb() и hsl()) из разделенных пробелами в разделенные запятыми для лучшей совместимости с устаревшими браузерами. Возвращает старое поведение до UnoCSS v0.57.0, которое было изменено на разделенное пробелами в #3221 для соответствия Tailwind CSS.

Примеры:

• 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
• По умолчанию: false

Удаляет ключевые слова цветового пространства, такие как in oklch и in oklab из сгенерированных стилей. Это полезно для обеспечения совместимости с устаревшими браузерами, которые не поддерживают эти современные цветовые пространства.

Чтобы включить эту функцию, установите параметр legacyColorSpace в true.