proto.lib

Container Queries — Component tự thích ứng theo kích thước cha

CSS Container Queries cho phép một component đổi layout dựa trên kích thước của phần tử cha chứa nó (container), chứ không phải kích thước viewport — nên cùng một component vừa vặn cả trong sidebar hẹp lẫn lưới toàn màn hình mà không cần biết gì về trang bao quanh.

ApplicationTrung bình2026-08-26
Container Queries — Component tự thích ứng theo kích thước cha

Tags

#css#container-queries#responsive-design#component#cqw#layout

Tài liệu tham khảo

Mở rộng

Animation gốc là một file HTML tự chứa, có thể nhúng lại ở bất kỳ trang nào khác. Mở file gốc

Liên quan

ApplicationTrung bình

content-visibility: auto — bỏ qua render ngoài viewport

content-visibility: auto kết hợp contain-intrinsic-size cho phép trình duyệt bỏ qua layout và paint của phần tử ngoài viewport để trang dài render nhanh hơn; cái giá là scrollbar có thể nhảy nếu không khai báo kích thước dự phòng, và nó ảnh hưởng tới tìm-trong-trang (Ctrl+F).

#content-visibility#contain-intrinsic-size#rendering-performance#css
ApplicationTrung bình

Scroll-Driven Animations: hoạt ảnh gắn theo tiến trình cuộn bằng CSS

scroll-timeline và view-timeline cho phép animation-timeline gắn tiến trình animation trực tiếp vào vị trí cuộn thay vì nghe sự kiện scroll bằng JS; vì tính toán nằm trên compositor thread nên không bị jank do main thread bận, có progress bar đọc sách và reveal-on-scroll là ví dụ điển hình.

#css#scroll-timeline#view-timeline#animation
ApplicationTrung bình

Theming bằng CSS Custom Properties: một stylesheet, nhiều theme

Custom properties (biến CSS) khai báo token màu sắc trên :root rồi override lại theo [data-theme] hoặc prefers-color-scheme, tránh phải nhân bản cả stylesheet cho mỗi theme; color-mix() sinh biến thể (hover, disabled) từ một token gốc, còn @property khai báo kiểu dữ liệu cho token để nó có thể animate mượt thay vì nhảy khựng.

#css#custom-properties#theming#dark-mode