color-scheme
- Có tình huống website đã hỗ trợ chế độ tối nhưng thanh cuộn vẫn sáng trắng nổi bật
- Khi đặt thuộc tính
color-scheme thành dark light, bạn báo cho trình duyệt biết rằng trang có thể xử lý cả chế độ tối và chế độ sáng, đồng thời thanh cuộn cũng sẽ tối đi
- Có thể áp dụng
color-scheme cho tài liệu bằng thẻ meta, giúp trình duyệt biết được tùy chọn của người dùng trước khi CSS được tải
- Khi dùng cùng tính năng media
prefers-color-scheme, bạn có thể kiểm soát hoàn toàn những phần cần thay đổi theo tùy chọn của người dùng
- Có thể dùng bộ chọn
:has() để áp dụng thuộc tính color-scheme cho phần tử gốc khi body có lớp dark
text-wrap
- Có trường hợp tiêu đề hoặc chú thích bị ngắt dòng kỳ lạ, khiến dòng cuối chỉ còn một từ
- Dùng giá trị
balance cho thuộc tính text-wrap sẽ giúp tiêu đề trên website cân đối hơn
- Tính năng này không phụ thuộc vào trình duyệt, hoạt động tốt trong các thiết lập hiện đại và vẫn suy giảm một cách ổn định trên các thiết lập cũ hơn
Scroll-margin
- Khi dùng liên kết neo trên trang web, phần tử đích có thể bị che khuất do header cố định
- Có thể giải quyết vấn đề này bằng thuộc tính CSS
scroll-margin, đặt giá trị scroll-margin-top theo chiều cao của header cố định
- Có thể dùng bộ chọn
:is để áp dụng cùng một xử lý cho nhiều phần tử như h2, h3, h4, đồng thời dùng các đơn vị như ex hoặc lh để thiết lập khoảng cách động
4 bình luận
Đây đúng là mẹo cực hay, cảm ơn bạn.
Thanh cuộn hay đấy
Thanh cuộn màu trắng khá nổi bật. Tôi cũng đã áp dụng ngay dark/light cho GeekNews. Hóa ra có một cách khá dễ.
So với Naver thì khác biệt rất lớn. GeekNews đã làm được điều mà ngay cả Naver cũng không(?) làm được...!