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

ชุดรวมสไนเป็ตสำหรับป้องกันไม่ให้เกิดปัญหา CSS บางอย่าง

• การตัดบรรทัดของ Flexbox → flex-wrap: wrap;

• เพิ่มพื้นที่ว่าง → margin-right: 1rem;

• เนื้อหายาวที่ไม่ควรตัดบรรทัด → text-overflow: ellipsis; white-space:nowrap; overflow: hidden;

• ป้องกันภาพยืด/บิดเบี้ยว → object-fit: cover;

• ล็อกการเลื่อนต่อเนื่อง → overscroll-behavior-y: contain;

• กำหนดค่า fallback ให้ตัวแปร CSS → max-width: calc(100% - var(--actions-width, 70px));

• ความสูงคงที่ → ใช้ min-height แทน height

• ความกว้างคงที่ → ใช้ min-width แทน width

• ปิดการทำซ้ำของพื้นหลัง → background-repeat: no-repeat;

• ใช้ vertical media query → เวลาใช้สิ่งอย่าง position:sticky ให้ใช้เฉพาะเมื่อสูงเกินค่าที่กำหนด @media (min-height:600px) {}

• ตอนจัดเรียงไอเท็มใน Flexbox ให้ใช้ gap: 1rem; แทน justify-content: space-between;

• วางข้อความสีขาวบนภาพและรองรับกรณีโหลดภาพไม่สำเร็จ → ใช้ background-color: grey;

• ระวังการใช้ค่าคงที่บน CSS Grid → ควรใช้ media query เสมอ

• แสดง scrollbar เฉพาะเมื่อจำเป็น → overflow-y: auto;

• ป้องกันเลย์เอาต์เปลี่ยนเมื่อ scrollbar ปรากฏ → scrollbar-gutter: stable;

• กำหนดขนาดขั้นต่ำของคอนเทนต์ใน Flexbox → min-width: 0; (ค่าเริ่มต้นคือ auto จึงทำให้เกิด overflow)

• กำหนดขนาดขั้นต่ำของคอนเทนต์ใน CSS Grid → ใช้ minmax()

• เมื่อใช้ CSS Grid ระหว่าง Auto Fit vs. Auto Fill → ในกรณีส่วนใหญ่ auto-fill ดีกว่า

• กำหนดความกว้างสูงสุดของภาพ → max-width: 100%

• เมื่อใช้ postition: sticky กับลูกของ grid container ให้ใช้ align-self: start

• การกำหนด group selector อาจใช้ไม่ได้ในบางเบราว์เซอร์ ดังนั้นควรแยกเขียนแต่ละตัว