CSS เชิงป้องกัน (Defensive CSS)

<p>ชุดรวมสไนเป็ตสำหรับป้องกันไม่ให้เกิดปัญหา CSS บางอย่าง<br /> - การตัดบรรทัดของ Flexbox → flex-wrap: wrap;<br /> - เพิ่มพื้นที่ว่าง → margin-right: 1rem;<br /> - เนื้อหายาวที่ไม่ควรตัดบรรทัด → text-overflow: ellipsis; white-space:nowrap; overflow: hidden;<br /> - ป้องกันภาพยืด/บิดเบี้ยว → object-fit: cover;<br /> - ล็อกการเลื่อนต่อเนื่อง → overscroll-behavior-y: contain; <br /> - กำหนดค่า fallback ให้ตัวแปร CSS → max-width: calc(100% - var(--actions-width, 70px));<br /> - ความสูงคงที่ → ใช้ min-height แทน height <br /> - ความกว้างคงที่ → ใช้ min-width แทน width <br /> - ปิดการทำซ้ำของพื้นหลัง → background-repeat: no-repeat;<br /> - ใช้ vertical media query → เวลาใช้สิ่งอย่าง position:sticky ให้ใช้เฉพาะเมื่อสูงเกินค่าที่กำหนด @media (min-height:600px) {}<br /> - ตอนจัดเรียงไอเท็มใน Flexbox ให้ใช้ gap: 1rem; แทน justify-content: space-between;<br /> - วางข้อความสีขาวบนภาพและรองรับกรณีโหลดภาพไม่สำเร็จ → ใช้ background-color: grey; <br /> - ระวังการใช้ค่าคงที่บน CSS Grid → ควรใช้ media query เสมอ <br /> - แสดง scrollbar เฉพาะเมื่อจำเป็น → overflow-y: auto; <br /> - ป้องกันเลย์เอาต์เปลี่ยนเมื่อ scrollbar ปรากฏ → scrollbar-gutter: stable; <br /> - กำหนดขนาดขั้นต่ำของคอนเทนต์ใน Flexbox → min-width: 0; (ค่าเริ่มต้นคือ auto จึงทำให้เกิด overflow)<br /> - กำหนดขนาดขั้นต่ำของคอนเทนต์ใน CSS Grid → ใช้ minmax() <br /> - เมื่อใช้ CSS Grid ระหว่าง Auto Fit vs. Auto Fill → ในกรณีส่วนใหญ่ auto-fill ดีกว่า <br /> - กำหนดความกว้างสูงสุดของภาพ → max-width: 100% <br /> - เมื่อใช้ postition: sticky กับลูกของ grid container ให้ใช้ align-self: start <br /> - การกำหนด group selector อาจใช้ไม่ได้ในบางเบราว์เซอร์ ดังนั้นควรแยกเขียนแต่ละตัว</p>