deprecated reset

Modul Reset Next.CSS

Reset modul CSS adalah bagian dari kerangka kerja Next.CSS. Modul ini mengatur ulang gaya CSS default untuk proyek Next.CSS Anda. Anda dapat menggunakan di semua situs web modern dengan bundler modul, seperti Webpack, Rollup, Parcel.

Next.css di github

Cara menginstal

Anda dapat menginstal dengan manajer paket NPM atau benang .

npm i @nextcss/reset
yarn add @nextcss/reset

Cara menggunakan

Impor sederhana ke proyek Anda, modul ini hanya berisi aturan pemilih elemen.

 import '@nextcss/reset' ; 

Mengapa Anda harus menggunakan

Beberapa elemen HTML memiliki gaya default di browser dan beberapa elemen HTML yang ditata berbeda di setiap browser. Modul ini akan mengatur ulang gaya ini.

Fitur

• Setel ulang gaya elemen html paling umum
• Reset Garis Besar dan Ketuk Sorotan
• Setel ulang seret dan lepas
• Setel ulang untuk menyegarkan dan menggulir rantai
• Reset Pinch Zoom dan Sentuh Gerakan
• Atur ukuran kotak
• Set System Font Stack dengan ukuran font 14px dan ketinggian garis 1.4

Apa yang termasuk - tl; dr; dr;

Pada setiap elemen HTML: atur border-box sebagai box-sizing default, nonaktifkan fitur Drag and Drop dan atur ulang outline .

 * ,
: before ,
: after {
  box-sizing : border-box;
  -webkit-user-drag : none;
  outline : none;
}

Setel font-size default ke 14px , nonaktifkan Tap highlighting untuk perangkat seluler, aktifkan Smooth font rendering , nonaktifkan Text size increase algorithm untuk perangkat Apple.

 html {
  font-size : 14 px ;
  -webkit-tap-highlight-color : transparent;
  -webkit-font-smoothing : antialiased;
  -webkit-text-size-adjust : 100 % ;
}

Nonaktifkan pinch zoom dan touch gestures Lainnya, Nonaktifkan pull to refresh , rubber banding dan Fitur scroll chaining , atur max-width pada body Sebagai 100 viewport width , Reset margin Default, atur line-height default dan Systen Font Stack

 body {
  touch-action : pan-x pan-y;
  overscroll-behavior : none;
  max-width : 100 vw ;
  margin : 0 ;
  line-height : 1.4 ;
  font-family : ui-sans-serif , system-ui , -apple-system , BlinkMacSystemFont , 'Segoe UI' , Roboto , 'Helvetica Neue' ,
    Arial , 'Noto Sans' , sans-serif , 'Apple Color Emoji' , 'Segoe UI Emoji' , 'Segoe UI Symbol' , 'Noto Color Emoji' ;
}

Reset margin default dan properti font pada judul dan paragraf.

 h1 ,
h2 ,
h3 ,
h4 ,
h5 ,
h6 ,
p {
  margin : 0 ;
  font : inherit;
}

Perbaiki tag small yang dinamis

 small {
  font-size : 85 % ;
}

Reset color dan text-decoration pada tautan.

 a {
  color : inherit;
  text-decoration : none;
}

Reset button tag

 button {
  background-color : inherit;
  border : 0 ;
  color : inherit;
  padding : 0 ;
}

Batasi width gambar dan border ulang.

 img {
  max-width : 100 % ;
  height : auto;
  border : none;
}

Atur ulang border , shadow , font dan atur font-size ke 16px pada elemen input umum. Ukuran font 16px Hindari mengubah ukuran viewport pada perangkat Apple.

 input ,
textarea ,
select {
  font : inherit;
  font-size : 16 px ;
  border : 1 px solid;
  border-radius : 0 ;
  background-clip : padding-box;
}

fieldset {
  border : 1 px solid;
}

Reset margin , padding dan list-style pada daftar.

 ul ,
ol {
  margin : 0 ;
  padding : 0 ;
  list-style-type : none;
}

Setel ulang border aturan horizonal

 hr {
  border : none;
  border-bottom : 1 px solid;
}

Setel ulang table perbatasan dan table head font-weight

 table {
  border-spacing : 0 ;
  border-collapse : collapse;
}

th {
  font-weight : inherit;
}

Setel ulang border iframe

 iframe {
  border : 0 ;
}

Setel ulang margin dan padding pada elemen html umum

 menu {
  margin : 0 ;
  padding : 0 ;
}

form ,
figure ,
pre ,
blockquote ,
dl ,
dd {
  margin : 0 ;
}

Reset font pada tag adrress

 address {
  font : inherit;
}

Pembangunan produksi

Kami sangat menyarankan untuk menggunakan postcss dengan autoprefixer dan postcss-purgecss . Tumpukan ini akan memperluas aturan CSS dengan awalan spesifik browser, seperti -webkit dan akan menghapus gaya yang tidak digunakan dalam build produksi.

npm i -D postcss autoprefixer @fullhuman/postcss-purgecss

Konfigurasi postcss.config.js kami. Anda perlu mengkonfigurasi parameter content untuk proyek Anda.

 module . exports = {
  plugins :
    process . env . NODE_ENV === 'production'
      ? [
          'autoprefixer' ,
          [
            '@fullhuman/postcss-purgecss' ,
            {
              content : [ './{pages,components}/**/*.{js,jsx}' ] ,
              safelist : [ 'html' , 'body' ] ,
              defaultExtractor : ( content ) => content . match ( / [w-/:]+(?<!:) / g ) || [ ] ,
            } ,
          ] ,
        ]
      : [ 'autoprefixer' ] ,
} ; 

Lisensi

Lisensi MIT. Hak Cipta (C) 2021 Zsolt Tovis