Truy vấn vùng chứa CSS vẫn đang thu hút sự chú ý và nhiều người trong chúng ta đang bắt đầu làm quen với chúng, ngay cả khi đó là những thử nghiệm nhỏ hoặc không. Họ đã có tuyệt vời, nhưng không hoàn toàn đầy đủ, hỗ trợ trình duyệt - đủ để biện minh cho việc sử dụng chúng trong một số dự án, nhưng có thể không đến mức chúng ta có thể muốn bắt đầu thay thế truy vấn phương tiện truyền thông từ các dự án trước đây với các truy vấn kích thước vùng chứa mới sáng bóng.
Họ chắc chắn là tiện dụng mặc dù! Trên thực tế, tôi đã từng gặp phải một vài tình huống mà tôi thực sự muốn liên hệ với họ nhưng không thể vượt qua các yêu cầu hỗ trợ. Nếu tôi có thể sử dụng chúng, nó sẽ trông như thế nào trong những tình huống đó.
Tất cả các bản demo sau sẽ được xem tốt nhất trong Chrome hoặc Safari tại thời điểm viết bài này. Firefox có kế hoạch hỗ trợ tàu trong Phiên bản 109.
Trường hợp 1: Lưới thẻ
Bạn loại đã phải mong đợi điều này, phải không? Đó là một khuôn mẫu phổ biến đến nỗi dường như tất cả chúng ta đều gặp phải nó vào một lúc nào đó. Nhưng thực tế là các truy vấn kích thước vùng chứa sẽ giúp tôi tiết kiệm thời gian rất nhiều với kết quả tốt hơn nếu tôi có thể sử dụng chúng trên các truy vấn phương tiện tiêu chuẩn.
Giả sử bạn được giao nhiệm vụ xây dựng lưới thẻ này với yêu cầu mỗi thẻ cần giữ tỷ lệ khung hình 1:1:
Nó khó khăn hơn vẻ ngoài của nó! Vấn đề là việc định cỡ nội dung của một thành phần trên chiều rộng của khung nhìn khiến bạn không thể biết được cách thành phần đó phản hồi lại khung nhìn — cũng như cách mà bất kỳ vùng chứa tổ tiên nào khác phản hồi lại nó. Ví dụ: nếu bạn muốn giảm kích thước phông chữ của tiêu đề thẻ khi thẻ đạt đến một kích thước nội tuyến nhất định thì không có cách nào đáng tin cậy để làm điều đó.
Bạn có thể đặt kích thước phông chữ trong vw đơn vị, tôi cho là vậy, nhưng thành phần này vẫn được gắn với chiều rộng khung nhìn của trình duyệt. Và điều đó có thể gây ra sự cố khi lưới thẻ được sử dụng khác trong các ngữ cảnh có thể không có cùng điểm dừng.
Trong dự án thế giới thực của mình, tôi đã sử dụng một cách tiếp cận JavaScript sẽ:
- Lắng nghe một sự kiện thay đổi kích thước.
- Tính chiều rộng của mỗi tấm thẻ.
- Thêm kích thước phông chữ nội tuyến vào mỗi thẻ dựa trên chiều rộng của nó.
- Tạo kiểu cho mọi thứ bên trong bằng cách sử dụng
emcác đơn vị.
Có vẻ như rất nhiều công việc, phải không? Nhưng đó là một giải pháp ổn định để có được tỷ lệ cần thiết trên các kích thước màn hình khác nhau trong các ngữ cảnh khác nhau.
Các truy vấn vùng chứa sẽ tốt hơn rất nhiều vì chúng cung cấp cho chúng tôi đơn vị truy vấn vùng chứa, chẳng hạn như cqw đơn vị. Bạn có thể đã nhận được nó, nhưng 1cqw bằng 1% chiều rộng của container. Chúng tôi cũng có cqi đơn vị đo chiều rộng nội tuyến của vùng chứa và cqb cho chiều rộng khối của vùng chứa. Vì vậy, nếu chúng ta có một hộp chứa thẻ 500px rộng, một 50cqw giá trị tính toán để 250px.
Nếu tôi có thể sử dụng các truy vấn vùng chứa trong lưới thẻ của mình, thì tôi đã có thể thiết lập .card thành phần như một thùng chứa:
.card {
container: card / size;
}Sau đó, tôi có thể đã đặt một trình bao bọc bên trong với padding quy mô đó 10% của .cardchiều rộng của bằng cách sử dụng cqw đơn vị:
.card__inner {
padding: 10cqw;
} Đó là một cách hay để chia tỷ lệ khoảng cách giữa các cạnh của thẻ và nội dung của nó một cách nhất quán bất kể thẻ được sử dụng ở đâu ở bất kỳ độ rộng khung nhìn nhất định nào. Không yêu cầu truy vấn phương tiện truyền thông!
Một ý tưởng khác? Sử dụng cqw đơn vị cho kích thước phông chữ của nội dung bên trong, sau đó áp dụng phần đệm trong em các đơn vị:
.card__inner {
font-size: 5cqw;
padding: 2em;
} 5cqw là một giá trị tùy ý - chỉ là một giá trị mà tôi đã giải quyết. Phần đệm đó vẫn bằng 10cqw kể từ khi em đơn vị so với .card__inner cỡ chữ!
Bạn đã nắm bắt điều đó chưa? Các 2em là tương đối với 5cqw kích thước phông chữ được thiết lập trên cùng một container. Các thùng chứa hoạt động khác với những gì chúng ta đã từng sử dụng, như em đơn vị có liên quan đến cùng một phần tử font-size value. Nhưng điều tôi nhanh chóng nhận thấy là các đơn vị truy vấn vùng chứa liên quan đến cha mẹ gần nhất cũng là một vùng chứa.
Ví dụ, 5cqw không mở rộng quy mô dựa trên .card chiều rộng của phần tử trong ví dụ này:
.card {
container: card / size;
container-name: card;
font-size: 5cqw;
}Thay vào đó, nó chia tỷ lệ cho bất kỳ cha mẹ gần nhất nào được định nghĩa là vùng chứa. Đó là lý do tại sao tôi thiết lập một .card__inner vỏ bánh.
Trường hợp 2: Bố trí xen kẽ
Tôi cần một thành phần thẻ khác trong một dự án khác. Lần này, tôi cần thẻ để chuyển từ bố cục ngang sang bố cục dọc… rồi quay lại bố cục ngang và quay lại dọc khi màn hình nhỏ hơn.
Tôi đã làm một công việc bẩn thỉu là làm cho thành phần này chuyển sang chế độ dọc ở hai phạm vi khung nhìn cụ thể đó (hãy hét lên với cú pháp phạm vi truy vấn phương tiện mới!), nhưng một lần nữa, vấn đề là sau đó nó bị khóa đối với các truy vấn phương tiện được đặt trên nó, cha mẹ của nó và bất kỳ thứ gì khác có thể đáp ứng với chiều rộng của khung nhìn. Chúng tôi muốn một cái gì đó hoạt động trong mọi điều kiện mà không phải lo lắng về việc nội dung sẽ bị hỏng ở đâu!
Các truy vấn vùng chứa sẽ giúp việc này trở nên dễ dàng, nhờ vào @container qui định:
.info-card {
container-type: inline-size;
container-name: info-card;
}
@container info-card (max-width: 500px) {
.info-card__inner {
flex-direction: column;
}
}Một truy vấn, tính trôi chảy vô hạn:
Nhưng cố lên! Có một cái gì đó bạn có thể muốn coi chừng. Cụ thể, có thể khó sử dụng truy vấn vùng chứa như thế này trong hệ thống thiết kế dựa trên chỗ dựa. Ví dụ, điều này .info-card thành phần có thể chứa các thành phần con dựa vào đạo cụ để thay đổi diện mạo của chúng.
Tại sao đó là một vấn đề lớn? Bố cục dọc của thẻ có thể yêu cầu kiểu thay thế nhưng bạn không thể thay đổi các đạo cụ JavaScript bằng CSS. Như vậy, bạn có nguy cơ sao chép các kiểu được yêu cầu. Tôi thực sự đã chạm vào điều này và làm thế nào để làm việc xung quanh nó trong một bài viết khác. Nếu bạn cần sử dụng các truy vấn vùng chứa cho một số lượng đáng kể kiểu dáng của mình, thì bạn có thể cần đặt toàn bộ hệ thống thiết kế của mình xung quanh chúng thay vì cố gắng đưa chúng vào một hệ thống thiết kế hiện có nặng về các truy vấn phương tiện.
Trường hợp 3: SVG đột quỵ
Đây là một mẫu cực kỳ phổ biến khác mà tôi đã sử dụng gần đây khi truy vấn kích thước vùng chứa sẽ dẫn đến một sản phẩm bóng bẩy hơn. Giả sử bạn có một biểu tượng bị khóa với tiêu đề:
Heading
Việc chia tỷ lệ biểu tượng theo kích thước của tiêu đề khá đơn giản, ngay cả khi không có truy vấn phương tiện. Tuy nhiên, vấn đề là SVG's stroke-width có thể trở nên quá mỏng để được chú ý rõ ràng ở kích thước nhỏ hơn và có thể thu hút quá nhiều sự chú ý với nét siêu dày ở kích thước lớn hơn.
Tôi đã phải tạo và áp dụng các lớp cho từng cá thể biểu tượng để xác định kích thước và độ rộng nét vẽ của nó. Tôi đoán là không sao nếu biểu tượng nằm cạnh tiêu đề được tạo kiểu với kích thước phông chữ cố định, nhưng nó không tuyệt lắm khi làm việc với kiểu linh hoạt thay đổi liên tục.
Kích thước phông chữ của tiêu đề có thể dựa trên chiều rộng của chế độ xem, do đó, biểu tượng SVG cần điều chỉnh cho phù hợp khi nét vẽ của nó hoạt động ở bất kỳ kích thước nào. Bạn có thể tạo độ rộng nét so với tiêu đề font-size bằng cách đặt nó trong em các đơn vị. Nhưng nếu bạn có một tập hợp kích thước nét vẽ cụ thể mà bạn cần phải tuân theo, thì điều này sẽ không hiệu quả vì nếu không thì nó sẽ chia tỷ lệ tuyến tính — không có cách nào để điều chỉnh nó theo một kích thước cụ thể. stroke-width giá trị tại các điểm nhất định mà không cần dùng đến các truy vấn phương tiện trên chiều rộng khung nhìn.
Nhưng đây là những gì tôi sẽ làm nếu tôi có nhiều truy vấn vùng chứa vào thời điểm đó:
.icon {
container: icon / size;
width: 1em;
height: 1em;
}
.icon svg {
width: 100%;
height: 100%;
fill: none;
stroke: #ccc;
stroke-width: 0.8;
}
@container icon (max-width: 70px) {
.icon svg {
stroke-width: 1.5;
}
}
@container icon (max-width: 35px) {
.icon svg {
stroke-width: 3;
}
}So sánh các triển khai và xem cách phiên bản truy vấn vùng chứa nắm bắt nét vẽ của SVG theo chiều rộng cụ thể mà tôi muốn dựa trên chiều rộng của vùng chứa.
Tiền thưởng: Các loại truy vấn kích thước vùng chứa khác
OK, vì vậy tôi chưa thực sự gặp phải vấn đề này trong một dự án thực sự. Nhưng khi tôi đang tìm hiểu thông tin về các truy vấn vùng chứa, tôi nhận thấy rằng có những thứ bổ sung mà chúng tôi có thể truy vấn trên vùng chứa có liên quan đến kích thước hoặc kích thước vật lý của vùng chứa.
Hầu hết các ví dụ tôi đã thấy truy vấn width, max-widthvà min-width, height, block-sizevà inline-size như tôi đã làm trong suốt bài viết này.
@container info-card (max-width: 500px) {
.info-card__inner {
flex-direction: column;
}
}Nhưng MDN vạch ra hai điều nữa chúng ta có thể truy vấn chống lại. Một là orientation điều này hoàn toàn hợp lý vì chúng tôi luôn sử dụng nó trong các truy vấn phương tiện. Nó không khác với các truy vấn vùng chứa:
@media screen (orientation: landscape) {
.info-card__inner {
/* Style away! */
}
}
@container info-card (orientation: landscape) {
.info-card__inner {
/* Style away! */
}
} Cái khác? Của nó aspect-ratio, tin hay không:
@container info-card (aspect-ratio: 3/2) {
.info-card__inner {
/* Style away! */
}
} Đây là bản trình diễn có thể chỉnh sửa để thử với cả hai ví dụ:
Tôi chưa thực sự tìm thấy một trường hợp sử dụng tốt cho một trong hai điều này. Nếu bạn có bất kỳ ý tưởng nào hoặc cảm thấy nó có thể giúp bạn trong các dự án của mình, hãy cho tôi biết trong phần nhận xét!
