CSS phòng thủ (Defensive CSS)

<p>Bộ sưu tập các snippet giúp tránh phát sinh những vấn đề CSS cụ thể<br /> - Xuống dòng trong Flexbox → flex-wrap: wrap;<br /> - Tạo khoảng trống → margin-right: 1rem;<br /> - Nội dung dài không được phép xuống dòng → text-overflow: ellipsis; white-space:nowrap; overflow: hidden;<br /> - Ngăn ảnh bị kéo giãn/méo → object-fit: cover;<br /> - Khóa chuỗi cuộn → overscroll-behavior-y: contain; <br /> - Đặt giá trị dự phòng cho biến CSS → max-width: calc(100% - var(--actions-width, 70px));<br /> - Chiều cao cố định → dùng min-height thay vì height <br /> - Chiều rộng cố định → dùng min-width thay vì width <br /> - Tắt lặp nền → background-repeat: no-repeat;<br /> - Tận dụng media query theo chiều dọc → khi dùng những thứ như position:sticky thì chỉ áp dụng từ một chiều cao nhất định trở lên @media (min-height:600px) {}<br /> - Khi sắp xếp item bằng Flexbox, dùng gap: 1rem; thay cho justify-content: space-between;<br /> - Khi đặt chữ trắng lên ảnh, cần xử lý trường hợp ảnh tải lỗi → dùng background-color: grey; <br /> - Cẩn thận khi dùng giá trị cố định trên CSS Grid → luôn dùng media query <br /> - Chỉ hiển thị thanh cuộn khi cần → overflow-y: auto; <br /> - Loại bỏ thay đổi bố cục khi thanh cuộn xuất hiện → scrollbar-gutter: stable; <br /> - Chỉ định kích thước nội dung tối thiểu trong Flexbox → min-width: 0; (mặc định là auto nên có thể gây overflow )<br /> - Chỉ định kích thước nội dung tối thiểu trong CSS Grid → dùng minmax() <br /> - Khi dùng CSS Grid, Auto Fit vs. Auto Fill → trong đa số trường hợp auto-fill tốt hơn <br /> - Đặt chiều rộng tối đa cho ảnh → max-width: 100% <br /> - Khi dùng postition: sticky cho phần tử con của grid container, áp dụng align-self: start <br /> - Bộ chọn nhóm có thể không hoạt động trên một số trình duyệt khác, nên tách riêng từng cái</p>