Một vài tips về CSS
Bài đăng này đã không được cập nhật trong 5 năm
1. Image rendering:
Thuộc tính này khá hữu ích trong việc hiển thị mã QR và các thumbnails, giúp tăng chất lượng ảnh của chúng.
img.QRcode {
image-rendering: pixelated;
}
2. Check empty:
Ẩn phần tử khi không có nội dung bên trong. Trả về khoảng trắng thay cho phần nội dung bị khuyết.
element:empty {
display: none;
}
3. Tạo độ cong cho text:
p {
shape-outside: polygon(0 0, 0 200px, 300px 600px);
}
Thuộc tính này giúp phần content bao quanh bên ngoài sẽ có hình dạng cong.
4. Plain SVG như background:
element {
background-image: url('data:image/svg+xml;utf8,<svg>...</svg>');
}
Use <svg> như một css background mà không cần convert sang base64.
5. Vô hiệu hoá các tương tác:
[data-untouchable] {
pointer-events: none;
}
Vô hiệu hoá tất cả các tương tác của người dùng, thậm chí cả các sự kiện css chỉ bằng một thuộc tính.
6. Kiểm tra nếu input có giá trị:
.Note {
opacity: 0;
transition: opacity 200ms ease-out;
}
input:not(:placeholder-shown) + .Note {
opacity: 1;
}
Pseudo class này sẽ cho phép kiểm tra xem input có giá trị nào không.
7. Lặp lại gradients:
.RepeatLinear {
background:
repeating-linear-gradient(
45deg,
lime,
lime 10px,
pink 10px,
pink 20px
);
}
.RepeatRadial {
background:
repeating-conic-gradient(
circle at 0 0,
tomato,
limegreen 50px
);
}
Có thể sử dụng lặp lại gradient thay vì bị rối loạn với mixins.
8. Float dựa theo hướng:
img {
float: inline-start; /* ...or inline-end */
}
Float một phần tử dựa theo hướng một văn bản (right-to-left hoặc left-to-right).
9. Target mặc định đến một phần tử trong form:
input:default {
opacity: 0.2;
}
Target đến phần input mặc định được selected. Xem ví dụ
10. Import css khi cần:
@import url('portrait.css') screen and (orientation: portrait); Có thể import css theo cách trên như khi sử dụng trong thẻ <link>.
11. Ngăn việc over-scroll:
.ScollingContent {
overscroll-behavior: contain;
}
Ngăn việc over-scroll khi scroll đến điểm cuối của phần tử.
Link bài viết tham khảo tại đây.
All rights reserved