Browser Style Reset

UnoCSS, global CSS'inizi doldurmamak ve maksimum esneklik için varsayılan olarak stil sıfırlama veya preflight sağlamaz. UnoCSS'i diğer CSS çerçeveleriyle birlikte kullanırsanız, muhtemelen sizin için zaten sıfırlama yapıyorlardır. UnoCSS'i tek başına kullanırsanız, Normalize.css gibi sıfırlama kütüphaneleri kullanabilirsiniz.

Ayrıca hızlıca almanız için küçük bir koleksiyon da sağlıyoruz:

Installation

pnpm

pnpm add @unocss/reset

yarn

yarn add @unocss/reset

npm

npm install @unocss/reset

bun

bun add @unocss/reset

Usage

Aşağıdaki sıfırlama stil sayfalarından birini main.js'nize ekleyebilirsiniz.

Normalize.css

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

import '@unocss/reset/normalize.css'

sanitize.css

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

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

Eric Meyer

Kaynak: 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'

Bu sıfırlama, UI çerçeveleriyle çakışmalardan kaçınmak için düğmeler için arka plan rengi geçersiz kılma hariç Tailwind sıfırlamasına dayanır. Bağlantılı soruna bakın.

Önce

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

Sonra

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