deprecated reset

next.css รีเซ็ตโมดูล

รีเซ็ตโมดูล CSS เป็นส่วนหนึ่งของ Framework Next.CSS โมดูลนี้รีเซ็ตรูปแบบ CSS เริ่มต้นสำหรับโครงการ NEXT.CSS ของคุณ คุณสามารถใช้ในเว็บไซต์สมัยใหม่ทั้งหมดด้วยโมดูล Bundlers เช่น Webpack, Rollup, พัสดุ

next.css บน gitHub

วิธีการติดตั้ง

คุณสามารถติดตั้งด้วย NPM หรือผู้จัดการแพ็คเกจ เส้นด้าย

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

วิธีใช้

นำเข้าอย่างง่าย ๆ ไปยังโครงการของคุณโมดูลนี้มีเพียงกฎการเลือกองค์ประกอบเท่านั้น

 import '@nextcss/reset' ; 

ทำไมคุณควรใช้

องค์ประกอบ HTML บางอย่างมีสไตล์เริ่มต้นในเบราว์เซอร์และองค์ประกอบ HTML บางอย่างที่มีสไตล์แตกต่างกันในแต่ละเบราว์เซอร์ โมดูลนี้จะรีเซ็ตรูปแบบนี้

คุณสมบัติ

• รีเซ็ตรูปแบบองค์ประกอบ HTML ที่พบบ่อยที่สุด
• รีเซ็ตโครงร่างและแตะไฮไลต์
• รีเซ็ตการลากและวาง
• รีเซ็ตดึงเพื่อรีเฟรชและเลื่อนการผูกมัด
• รีเซ็ตการซูมเล็กน้อยและท่าทางสัมผัส
• ตั้งค่าการปรับขนาดกล่อง
• ตั้งค่าสแต็กแบบอักษรด้วยขนาดตัวอักษร 14px และความสูงของเส้น 1.4

อะไรรวม - tl; dr;

ในทุกองค์ประกอบ HTML: ตั้งค่า border-box เป็น box-sizing คุณสมบัติ Drag and Drop และรีเซ็ต outline

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

ตั้งค่า font-size เริ่มต้นเป็น 14px ปิด Tap highlighting สำหรับอุปกรณ์มือถือเปิดใช้งาน Smooth font rendering ลด Text size increase algorithm สำหรับอุปกรณ์ Apple

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

ปิด pinch zoom และ touch gestures อื่น ๆ ปิด pull to refresh rubber banding และคุณสมบัติ scroll chaining ตั้งค่า max-width บน body เป็น 100 viewport width รีเซ็ต margin เริ่มต้นตั้งค่า line-height 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' ;
}

รีเซ็ตคุณสมบัติเริ่ม margin และคุณสมบัติ font บนหัวเรื่องและย่อหน้า

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

แก้ไขแท็ก small ไดนามิก

 small {
  font-size : 85 % ;
}

รีเซ็ต color และ text-decoration บนลิงก์

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

แท็ก button รีเซ็ต

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

จำกัด width ภาพและรีเซ็ต border

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

รีเซ็ต border , shadow , font และตั้งค่า font-size เป็น 16px ในองค์ประกอบอินพุตทั่วไป ขนาดตัวอักษร 16px หลีกเลี่ยงการปรับขนาด viewport บนอุปกรณ์ 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;
}

รีเซ็ต margin , padding และ list-style ในรายการ

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

รีเซ็ต border ของกฎขอบฟ้า

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

รีเซ็ตเส้นขอบ table และหัว font-weight หัว

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

th {
  font-weight : inherit;
}

รีเซ็ต border iframe

 iframe {
  border : 0 ;
}

รีเซ็ต margin และ padding ภายในองค์ประกอบ HTML ทั่วไป

 menu {
  margin : 0 ;
  padding : 0 ;
}

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

รีเซ็ต font บนแท็ก adrress

 address {
  font : inherit;
}

การผลิต

เราขอแนะนำอย่างยิ่งให้ใช้ postcss กับ autoprefixer และ postcss-purgecss สแต็กนี้จะขยายกฎ CSS ด้วยคำนำหน้าเฉพาะเบราว์เซอร์เช่น -webkit และจะลบสไตล์ที่ไม่ได้ใช้ในการสร้างการผลิต

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

postcss.config.js config คุณต้องกำหนดค่าพารามิเตอร์ content สำหรับโครงการของคุณ

 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' ] ,
} ; 

ใบอนุญาต

ใบอนุญาต MIT ลิขสิทธิ์ (c) 2021 Zsolt Tovis