CSS phòng thủ (Defensive CSS)

Bộ sưu tập các snippet giúp tránh phát sinh những vấn đề CSS cụ thể

• Xuống dòng trong Flexbox → flex-wrap: wrap;

• Tạo khoảng trống → margin-right: 1rem;

• Nội dung dài không được phép xuống dòng → text-overflow: ellipsis; white-space:nowrap; overflow: hidden;

• Ngăn ảnh bị kéo giãn/méo → object-fit: cover;

• Khóa chuỗi cuộn → overscroll-behavior-y: contain;

• Đặt giá trị dự phòng cho biến CSS → max-width: calc(100% - var(--actions-width, 70px));

• Chiều cao cố định → dùng min-height thay vì height

• Chiều rộng cố định → dùng min-width thay vì width

• Tắt lặp nền → background-repeat: no-repeat;

• 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) {}

• Khi sắp xếp item bằng Flexbox, dùng gap: 1rem; thay cho justify-content: space-between;

• 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;

• Cẩn thận khi dùng giá trị cố định trên CSS Grid → luôn dùng media query

• Chỉ hiển thị thanh cuộn khi cần → overflow-y: auto;

• Loại bỏ thay đổi bố cục khi thanh cuộn xuất hiện → scrollbar-gutter: stable;

• 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 )

• Chỉ định kích thước nội dung tối thiểu trong CSS Grid → dùng minmax()

• Khi dùng CSS Grid, Auto Fit vs. Auto Fill → trong đa số trường hợp auto-fill tốt hơn

• Đặt chiều rộng tối đa cho ảnh → max-width: 100%

• Khi dùng postition: sticky cho phần tử con của grid container, áp dụng align-self: start

• 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