Legacy Compat Preset

ชุดของ legacy compatibility utilities

preset นี้ไม่รวม rules ใดๆ มันใช้ postprocess กับ CSS ที่สร้างจาก presets อื่นๆ

โดยค่าเริ่มต้นไม่มีตัวเลือกใดถูกเปิดใช้งาน คุณต้องเลือกใช้แต่ละตัวอย่างชัดเจน

Source Code

การติดตั้ง

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: [
    // ...presets อื่นๆ
    presetLegacyCompat({
      // options
      commaStyleColorFunction: true,
      legacyColorSpace: true
    }),
  ],
})

Options

commaStyleColorFunction

• Type: boolean
• Default: false

แปลง color functions (rgb() และ hsl()) จาก space-separated เป็น comma-separated เพื่อความเข้ากันได้ที่ดีขึ้นกับ browsers เก่า นำพฤติกรรมเก่ากลับมาก่อน UnoCSS v0.57.0 ที่ถูกเปลี่ยนเป็น space-separated ใน #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

• Type: boolean
• Default: false

ลบ color space keywords เช่น in oklch และ in oklab ออกจาก styles ที่สร้างขึ้น นี่มีประโยชน์สำหรับการรับประกันความเข้ากันได้กับ browsers เก่าที่ไม่รองรับ color spaces สมัยใหม่เหล่านี้

เพื่อเปิดใช้งานคุณสมบัตินี้ ให้ตั้งค่าตัวเลือก legacyColorSpace เป็น true