2024.05.29
CSS Container Queries: Để responsive 1 website hoàn hảo
Ho Long
Thiết kế web hiện đại đòi hỏi sự linh hoạt và đáp ứng nhanh chóng với các kích thước màn hình và thiết bị khác nhau. Đó là lúc CSS Container Queries xuất hiện như một sự lựa chọn mới. Thông thường chúng ta thường sử dụng media queries để điều chỉnh các thành phần […]
Thiết kế web hiện đại đòi hỏi sự linh hoạt và đáp ứng nhanh chóng với các kích thước màn hình và thiết bị khác nhau. Đó là lúc CSS Container Queries xuất hiện như một sự lựa chọn mới. Thông thường chúng ta thường sử dụng media queries để điều chỉnh các thành phần dựa trên kích thước của cửa sổ trình duyệt. Tuy nhiên, media queries không phải lúc nào cũng đủ để giải quyết các thách thức trong thiết kế giao diện người dùng.
Tìm hiểu CSS Container Queries: Thế nào để responsive hoàn hảo
CSS Container Queries cho phép developer áp dụng các kiểu dựa trên kích thước của một phần tử chứa (container) thay vì kích thước của cửa sổ trình duyệt. Điều này mang lại khả năng kiểm soát linh hoạt hơn đối với thiết kế và bố cục của các thành phần bên trong một container cụ thể. Từ đó giúp cải thiện tính linh hoạt và khả năng đáp ứng của giao diện.
- Thiết kế linh hoạt: CSS Container cho phép thay đổi kiểu dáng của các thành phần dựa trên kích thước của container chứa chúng, chứ không phải kích thước của toàn bộ cửa sổ trình duyệt. Điều này rất hữu ích khi bạn có các thành phần trong các bố cục phức tạp.
- Bảo trì dễ dàng hơn: Với CSS Container ta có thể viết các quy tắc css cụ thể cho từng container, giúp css dễ hiểu và dễ bảo trì hơn. Từ đó làm giảm sự phụ thuộc vào các media queries phức tạp.
- Tăng tính module hoá: Có thể sử dụng lại trong các ngữ cảnh khác nhau mà không cần phải điều chỉnh css.
Ví dụ áp dụng CSS Container Queries: Thay đổi bố cục dựa trên kích thước Container
Giả sử bạn có một thẻ article chưa một tiêu đề và một đoạn văn bản. Bạn muốn thay đổi bố cục của thẻ này khi kích thước của nó thay đổi. Dưới đây là cách bạn có thể làm điều này với CSS Container Queries.
<div class="container">
<article>
<h2>Đây là tiêu đề bài viết</h2>
<p>Đây là nội dung bài viết ...</p>
</article>
</div>.container {
container: layout / inline-size;
padding: 16px;
}
article {
display: flex;
gap: 16px;
align-items: center;
}
@container layout (width < 600px) {
.container article {
flex-direction: column;
}
.container article h2 {
flex: 1;
}
.container article p {
flex: 2;
}
}- Responsive
Trong ví dụ này, khi kích thước của container nhỏ hơn 600px, bố cục của bài viết sẽ thay đổi từ dạng hàng sang cột, với tiêu đề và nội dung nằm cùng một cột.
Ví dụ áp dụng CSS Container Queries: Thay đổi kiểu chữ dựa trên kích thước Container
Trong một ví dụ khác, bạn có thể muốn thay đổi kiểu chữ của các đoạn văn bản dựa trên kích thước của container chứa chúng.
<div class="text-container">
<p>Đây là đoạn văn bản ...</p>
</div>
<div class="text-container-small">
<p>Đây là đoạn văn bản small ...</p>
</div>
.text-container {
container: text / inline-size;
padding: 16px;
margin: 16px;
background-color: #f0f0f0;
}
.text-container-small {
container: text-small / inline-size;
padding: 16px;
margin: 16px;
background-color: #c1c1c1;
}
@container text (width < 800px) {
.text-container {
background-color: red;
}
.text-container p {
font-size: 2.25rem
}
}
@container text (width >= 800px) {
.text-container {
background-color: blue;
}
.text-container p {
font-size: 3.25rem
}
}
@container text-small (width < 800px) {
.text-container-small {
background-color: red;
}
.text-container-small p {
font-size: 1.25rem
}
}
@container text-small (width >= 800px) {
.text-container-small {
background-color: blue;
}
.text-container-small p {
font-size: 2.25rem
}
}- Responsive
Lưu ý nhỏ: Bạn có thể thấy css có set thay đổi background-color khi width của container nhỏ hoặc lớn hơn 800. Nhưng việc đặt css cho chính container đó khi responsive là không được, chỉ có các thành phần con thì mới được.
Ví dụ áp dụng CSS Container Queries: Một trường hợp thực thế hơn
Tạo một danh sách article và thực hiện responsive cho danh sách này.
<div class="container">
<div class="side-bar"></div>
<div class="main">
<div class="list-article">
<div class="article">
<div class="image">
<img
src="..."
alt="image">
</div>
<div class="info">
<div class="title">
<h2>Khám phá Platform engineering – 7 điều cần biết khi áp dụng Platform engineering vào
doanh nghiệp của bạn</h2>
</div>
<div class="description">
<p>Mục đích của bài viết này là giải thích platform engineering là gì, các vấn đề kinh doanh
mà workflows này giải quyết và làm cách nào để biết liệu tổ chức của bạn đã sẵn sàng
triển khai nó chưa. Nếu bạn làm việc trong DevOps hoặc có hứng thú với việc áp dụng
DevOps thì hãy cùng nhau chia sẻ về chủ đề này nhé!</p>
</div>
<div class="author">
<p>Hồ Ngọc Bảo Long</p>
</div>
<div class="date">
<p>2023.09.15</p>
</div>
</div>
</div>
.
.
.
</div>
</div>
<div class="side-bar"></div>
</div>.container p, .container h2 {
margin: 0;
}
.container {
display: grid;
grid-template-columns: 300px minmax(0, 1fr) 300px;
height: 100vh;
gap: 20px;
}
.side-bar {
background-color: #f0f0f0;
width: 100%;
}
.list-article {
display: flex;
flex-direction: column;
gap: 20px;
}
.article {
display: flex;
align-items: center;
flex-direction: column;
gap: 20px;
padding: 20px;
border: 1px solid #f0f0f0;
border-radius: 12px;
}
.info {
display: flex;
flex-direction: column;
gap: 10px;
}
.image {
flex: 0 0 200px;
aspect-ratio: 1/1;
width: 100%;
overflow: hidden;
}
.image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
}
.container {
@media screen and (min-width: 1228px) {
.main .article {
flex-direction: row;
}
}
@media screen and (max-width: 1028px) {
grid-template-columns: 300px minmax(0, 1fr);
.side-bar:nth-child(3) {
display: none;
}
.main .article {
flex-direction: row;
}
}
@media screen and (max-width: 828px) {
grid-template-columns: minmax(0, 1fr);
.side-bar:nth-child(1) {
display: none;
}
.main .article {
flex-direction: row;
}
}
@media screen and (max-width: 528px) {
.main .article {
flex-direction: column;
}
}
}- Responsive áp dụng media screen
Để làm responsive như thông thường chúng ta thường hay đặt @media screen thì từng khung hình chúng ta lại phải set css lại theo đúng ý mình.
Trường hợp áp dụng CSS Container Queries:
Ở đây, chúng ta chỉ cần set độ dài của container main đó <= 528px thì css sẽ được áp dụng, mặc kệ độ dài màn hình screen có là bao nhiêu đi chăng nữa.
.main {
container: main / inline-size;
}
@container main (width <= 528px) {
.main .article {
flex-direction: column;
gap: 10px;
}
}
.container {
@media screen and (max-width: 1028px) {
grid-template-columns: 300px minmax(0, 1fr);
.side-bar:nth-child(3) {
display: none;
}
}
@media screen and (max-width: 728px) {
grid-template-columns: minmax(0, 1fr);
.side-bar:nth-child(1) {
display: none;
}
}
}Kết luận
CSS Container Queries mang đến một cách tiếp cận mới cho thiết kế web linh hoạt, giúp giải quyết các hạn chế của media queries truyền thống. Bằng cách cho phép các kiểu CSS thay đổi dựa trên kích thước của các container cụ thể, chúng ta có thể tạo ra các thiết kế giao diện người dùng linh hoạt hơn, dễ bảo trì hơn và module hóa hơn.
Container Queries vẫn đang trong quá trình hoàn thiện và chưa được hỗ trợ hoàn toàn trên tất cả các trình duyệt, nhưng với sự phát triển liên tục của công nghệ web, chúng sẽ sớm trở thành một công cụ quan trọng trong bộ công cụ của mỗi nhà phát triển web. Hãy bắt đầu thử nghiệm với Container Queries ngay hôm nay để trải nghiệm những lợi ích mà chúng mang lại cho dự án của bạn!
