Browser Style Reset

UnoCSS predvolene neposkytuje resetovanie štýlov ani preflight, aby nevyplňoval vaše globálne CSS a tiež pre maximálnu flexibilitu. Ak používate UnoCSS spolu s inými CSS frameworkmi, pravdepodobne už robia resetovanie za vás. Ak používate UnoCSS samostatne, môžete použiť knižnice na resetovanie, ako je Normalize.css.

Poskytujeme aj malú kolekciu, aby ste ich mohli rýchlo použiť:

Inštalácia

pnpm

pnpm add @unocss/reset

yarn

yarn add @unocss/reset

npm

npm install @unocss/reset

bun

bun add @unocss/reset

Použitie

Môžete pridať jeden z nasledujúcich resetovacích stylesheetov do vášho main.js.

Normalize.css

Zdroj: https://github.com/csstools/normalize.css

import '@unocss/reset/normalize.css'

sanitize.css

Zdroj: https://github.com/csstools/sanitize.css

import '@unocss/reset/sanitize/sanitize.css'
import '@unocss/reset/sanitize/assets.css'

Eric Meyer

Zdroj: https://meyerweb.com/eric/tools/css/reset/index.html

import '@unocss/reset/eric-meyer.css'

Tailwind

import '@unocss/reset/tailwind.css'

Tailwind compat

import '@unocss/reset/tailwind-compat.css'

Tento reset je založený na Tailwind reset, bez prepísania farby pozadia pre tlačidlá, aby sa predišlo konfliktom s UI frameworkmi. Pozrite prepojený issue.

Pred

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

Po

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  /*background-color: transparent; !* 2 *!*/
  background-image: none; /* 2 */
}