Michelle Barker với bài đăng trên blog sorta yêu thích của tôi: ngắn gọn, thiết thực và để lại cho bạn nhiều thứ có giá trị cho thời gian của bạn. Nơi đây, cô ấy tham gia vào các phím tắt thuộc tính logic trong CSS, đặc biệt là những thứ chỉ đặt độ dài trên một trục, chỉ nói trục khối (dọc) hoặc chỉ trục nội tuyến (ngang).
Tôi nói "khối" và "nội tuyến" bởi vì liên quan đến các thuộc tính logic, trục x cũng có thể hoạt động giống như một trục tung tùy thuộc vào dòng điện writing-mode.
Vì vậy, nơi chúng tôi luôn có padding, marginvà border shorthands có thể hỗ trợ cú pháp đa giá trị, không có cú pháp nào trong số chúng cho phép chúng ta khai báo độ dài trên một trục cụ thể mà không đặt độ dài trên trục khác.
Ví dụ:
/* This gives us margin on the inline axis */
margin: 0 3rem;… Nhưng chúng tôi phải thiết lập trục khác để đạt được điều đó. Tuy nhiên, với các thuộc tính lôgic, chúng tôi có các phím tắt bổ sung cho mỗi trục có nghĩa là chúng tôi có thể gợi ý margin-inline viết tắt để làm việc cụ thể trên trục nội tuyến:
margin-inline: 3rem;Michelle đề cập đến tính chất logic yêu thích của tôi khi vượt qua. Đã bao nhiêu lần bạn định vị thứ gì đó theo loại giai điệu này:
.position-me {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}Chúng tôi có thể đưa bốn dòng đó vào với inset: 0. Hoặc chúng tôi có thể nhắm mục tiêu khối và trục nội tuyến trực tiếp với inset-block và inset-inline, Tương ứng.
Trong khi chúng tôi đang nói chuyện với nhau, tôi luôn muốn cảnh báo về "Tình cờ" đặt lại CSS. Chỉ là một trong những những lỗi CSS phổ biến mà tôi mắc phải.
