การกำหนดรูปแบบพื้นฐาน CSS

      ในโพสต์นี้ จะขอนำเสนอการรีเซ็ต CSS ที่กำหนดเอง เพื่อให้การนำเสนอเนื้อหาบนเว็บของคุณรองรับกับทุกแอพพลิเคชั่น

/*
   1. ใช้แบบจำลองขนาดกล่องที่ใช้งานง่ายกว่า
*/

*, *::before, *::after {
  box-sizing: border-box;
}

/*
   2. ลบระยะขอบเริ่มต้น
*/
* {
  margin: 0;
}

/*
   3. อนุญาตความสูงตามเปอร์เซ็นต์ในแอปพลิเคชัน
*/
html, body {
  height: 100%;
}

/*
   ปรับแต่งตัวอักษร!
   4. เพิ่มความสูงของบรรทัดที่เข้าถึงได้
   5. ปรับปรุงการแสดงข้อความ
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/*
   6. ปรับปรุงค่าเริ่มต้นของสื่อ
*/
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/*
   7. ลบรูปแบบการพิมพ์ในตัวแบบฟอร์ม
*/
input, button, textarea, select {
  font: inherit;
}

/*
   8. หลีกเลี่ยงข้อความล้น
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/*
   9. สร้างบริบทการซ้อนรูท
*/
#root, #__next {
  isolation: isolate;
}