Trong một thời gian dài, truy vấn phương tiện là cách duy nhất để làm cho các thiết kế giao diện người dùng phản hồi nhanh trên các kích thước màn hình khác nhau. Nhưng ngay cả điều đó cũng có những hạn chế của nó. Một trong những vấn đề lớn nhất khi sử dụng truy vấn phương tiện là bạn chỉ có thể tạo kiểu cho một phần tử để đáp ứng với những thay đổi về kích thước màn hình, chứ không phải phần tử vùng chứa gần nhất của nó.
Các truy vấn vùng chứa đã được giới thiệu để giải quyết vấn đề này. Chúng cũng đã tăng lên với sự phổ biến của các khung như React và Vue.js hoạt động bằng cách tạo các “thành phần” giao diện người dùng mô-đun. Tìm hiểu cách sử dụng truy vấn vùng chứa để tạo các phần tử đáp ứng trong CSS của bạn.
Mã được sử dụng trong bài viết này có sẵn trong này kho lưu trữ GitHub và miễn phí cho bạn sử dụng theo giấy phép MIT.
Tại sao bạn nên sử dụng truy vấn bộ chứa CSS?
Để hiểu tầm quan trọng của truy vấn vùng chứa, hãy sử dụng một ví dụ giúp nắm bắt khái niệm dễ dàng hơn. Nhưng trước tiên, bạn cần sao chép mã khởi động từ đây kho lưu trữ GitHub.
Khi bạn đã sao chép thành công repo, hãy chạy mã. Bạn sẽ tìm thấy một trang web tương tự như hình ảnh sau:
Ở đây bạn có bố cục dạng lưới bao gồm hai cột: phần chính và thanh bên. Phần chính trông ổn, nhưng thanh bên (nhỏ hơn nhiều so với nội dung chính) trông hơi nhỏ.
Bố cục đáp ứng. Khi bạn thu nhỏ trình duyệt, bạn có thể thấy rằng thẻ biến thành một cột dọc:
Nói cách khác, khi nội dung bắt đầu trở nên không thể đọc được, bố cục sẽ chuyển thành một cột dọc nơi hình ảnh được xếp chồng lên trên nội dung. Hiệu ứng này xuất hiện do các truy vấn phương tiện, đây là cách duy nhất bạn có thể xác định kích thước của các phần tử dựa trên toàn bộ kích thước màn hình của bạn.
Trong trường hợp này, bất cứ khi nào màn hình của bạn nhỏ hơn 800px, bạn xếp chồng mọi thứ lên nhau bằng cách sử dụng căn chỉnh Flexbox. Trên màn hình lớn hơn, chúng tôi đặt nội dung cạnh nhau:
@media(max-width: 800px) {
.card {
flex-direction: column;
}
.card-header {
width: 100%;
}
}
Trong thời gian dài nhất, truy vấn phương tiện là một trong những nguyên tắc thiết kế web chính để tạo bố cục đáp ứng bằng CSS (và nó đủ tốt cho hầu hết mọi thứ). Nhưng bạn nhất định gặp phải các tình huống trong đó các truy vấn phương tiện sẽ không đủ hoặc ít nhất sẽ không phải là một giải pháp thuận tiện.
Một trong những tình huống đó là khi bạn có một thanh bên (như chúng tôi làm trong ví dụ trên). Trong những trường hợp bạn có thanh bên, bạn phải chọn trực tiếp thẻ thanh bên và cố gắng làm cho nó nhỏ hơn:
.sidebar .card {
}@media(max-width: 800px) {
}
Nó có thể khá phức tạp nếu bạn đang làm việc với nhiều phần tử vì bạn phải chọn thủ công tất cả các phần tử và thay đổi kích thước của chúng. Bạn sẽ kết thúc với nhiều mã hơn và độ phức tạp cao hơn.
Đây là nơi các truy vấn vùng chứa có thể hữu ích. Thay vì buộc phải sử dụng chế độ xem của bạn làm kích thước, bạn có thể sử dụng bất kỳ thành phần nào trên trang của mình làm vùng chứa. Sau đó, vùng chứa đó có thể có chiều rộng riêng để bạn dựa vào các truy vấn phương tiện của mình.
Cách tạo truy vấn vùng chứa
Để tạo truy vấn vùng chứa, bạn phải bắt đầu bằng cách nhắm mục tiêu phần tử bạn muốn sử dụng làm vùng chứa (trong trường hợp này là phần chính và thanh bên). Bên trong khối, bạn cần đặt loại container ĐẾN kích thước nội tuyến:
main, .sidebar {
container-type: inline-size
}
Khi bạn lưu tệp CSS của mình, sẽ không có gì thay đổi trên trang. Nhưng giờ đây, bạn có thể sử dụng truy vấn vùng chứa để thay đổi kích thước và định kiểu lại các thẻ được lồng trong phần chính và phần thanh bên. Trong truy vấn vùng chứa sau đây, bạn đang thay đổi thẻ thành cột dọc trên màn hình rộng từ 500px trở xuống:
@container(max-width: 500px) {
.card {
flex-direction: column;
}
.card-header {
width: 100%;
}
}
Điều này sẽ hoạt động như một truy vấn phương tiện bình thường. Nhưng thay vì đo kích thước màn hình, bạn đang đo kích thước vùng chứa (phần chính và phần thanh bên). Vì vậy, bây giờ khi vùng chứa của bạn từ 500px trở lên, bạn sử dụng chế độ xem ngang. Nếu không, bạn sử dụng dọc (mặc định cho flexbox).
Từ hình ảnh trên, bạn có thể thấy rằng thanh bên có dạng dọc vì nó nhỏ hơn 500px. Trong khi đó, nội dung chính vẫn giữ bố cục ngang vì nó lớn hơn 500px. Nếu bạn thu nhỏ trình duyệt của mình xuống, thanh bên và nội dung chính của bạn sẽ sử dụng căn chỉnh theo chiều dọc khi chúng đạt 500px trở xuống.
Truy vấn vùng chứa cực kỳ mạnh mẽ vì nó cho phép bạn thay đổi kích thước mọi thứ dựa trên vùng chứa thay vì toàn bộ chiều rộng của trình duyệt. Điều này đặc biệt hữu ích khi xử lý các thành phần (chẳng hạn như trong React hoặc Vue).
Với các truy vấn vùng chứa, bạn có thể dễ dàng thay đổi kích thước các thành phần giao diện người dùng của mình dựa trên vùng chứa của chúng, cho phép bạn tạo các thành phần hoàn toàn độc lập.
Đặt tên vùng chứa
Khi bạn tạo một @thùng đựng hàng truy vấn, trước tiên nó sẽ tìm vùng chứa của phần tử bạn đang nhắm mục tiêu trong truy vấn. Trong trường hợp của chúng tôi, đây sẽ là vùng chứa chính và vùng chứa thanh bên.
Và ngay cả khi các thẻ nằm trong một thùng chứa khác, nó sẽ bỏ qua các thùng chứa khác và chỉ chọn thùng chứa gần nhất với chính nó. Đây là một phần của khái niệm CSS rộng hơn được gọi là bộ chọn CSS.
Trong ví dụ sau, chúng ta đã biến phần tử body thành một thùng chứa:
body {
container-type: inline-size;
}
Bây giờ chúng ta có ba vùng chứa riêng biệt: phần thân, phần chính và phần phụ. Theo mặc định, các thẻ chúng tôi đang nhắm mục tiêu trong truy vấn vùng chứa gần với phần chính hoặc thanh bên hơn là phần nội dung. Vì vậy, nó sử dụng các phần chính và thanh bên làm vùng chứa cho truy vấn vùng chứa.
Để ghi đè hành vi này, bạn cần làm hai việc. Trước tiên, bạn cần đặt tên vùng chứa cho phần tử cơ thể của mình:
body {
container-type: inline-size;
container-name: body;
}
Sau đó, khi tạo truy vấn vùng chứa, bạn cần chỉ định tên vùng chứa sau @thùng đựng hàng.
@container body (max-width: 1000px){
}
Điều này hữu ích nếu bạn muốn sử dụng một phần tử cụ thể làm vùng chứa thay vì vùng chứa gần nhất với phần tử bạn đang nhắm mục tiêu. Nói cách khác, bạn có thể chọn bất kỳ vùng chứa cụ thể nào và tinh chỉnh bố cục của mình.
đơn vị container
Một tính năng tuyệt vời khác về vùng chứa là bạn có thể sử dụng các đơn vị vùng chứa. Các đơn vị này hoạt động giống như các đơn vị khung nhìn (tất cả chúng đều là cùng một loại đơn vị). Tuy nhiên, các đơn vị container sử dụng cqw (để cài đặt chiều rộng) Và cqh (để thiết lập chiều cao). Các đơn vị này xác định chiều rộng và chiều cao chính xác của vùng chứa của bạn.
Truy vấn bộ chứa CSS cho phép bạn sử dụng các phần tử cụ thể làm điểm tham chiếu cho truy vấn phương tiện của mình. Kỹ thuật này khá thuận tiện để tạo các phần tử mô-đun, độc lập có thể đứng độc lập bất kể chúng nằm trong vùng chứa nào. Tuy nhiên, truy vấn vùng chứa sử dụng các nguyên tắc giống như truy vấn phương tiện và đây là điều bạn nên nắm vững nếu muốn trở thành một nhà phát triển CSS một phần trăm hàng đầu.