Chiều rộng vùng chứa CSS

Tôi chưa bao giờ hào hứng với một tính năng CSS như bây giờ trong sáu năm qua, tôi đã trải qua với tư cách là nhà phát triển giao diện người dùng. Nguyên mẫu của các truy vấn vùng chứa hiện có sẵn sau một lá cờ trong Chrome Canary. Nhờ nỗ lực của những người thông minh như Miriam Suzanne và những người khác

Nội dung chính Show

• Sự cố với các truy vấn phương tiện CSS
• Các truy vấn bộ chứa CSS sẽ giúp chúng ta như thế nào?
• Cách truy vấn vùng chứa hoạt động
• Các trường hợp sử dụng cho truy vấn vùng chứa CSS
• Truy vấn vùng chứa và lưới CSS .o-grid__item { container-type: inline-size; } .c-article { /* The default style */ } @container (min-width: 400px) { .c-article { /* The styles that will make the article horizontal** ** instead of a card style. */ } } 6
• Thanh bên và Chính
• phân trang
• thẻ hồ sơ
• Yếu tố biểu mẫu
• thành phần thử nghiệm
• Có dễ gỡ lỗi các truy vấn vùng chứa trong DevTools không?
• Có thể cung cấp một dự phòng?
• Sự kết luận
• Chiều rộng của vùng chứa trong CSS là bao nhiêu?
• Làm cách nào để tạo chiều rộng div 100%?
• tối đa là bao nhiêu
• Chiều rộng container tốt nhất là gì?

Tôi nhớ đã thấy rất nhiều câu chuyện cười về việc hỗ trợ các truy vấn bộ chứa CSS, nhưng cuối cùng thì chúng cũng xuất hiện. Trong bài viết này, tôi sẽ hướng dẫn bạn lý do tại sao chúng ta cần truy vấn vùng chứa, cách chúng giúp cuộc sống của bạn dễ dàng hơn và quan trọng nhất là bạn sẽ đạt được các thành phần và bố cục mạnh mẽ hơn

Nếu bạn cũng hào hứng như tôi, hãy cùng tìm hiểu. Bạn đã sẵn sàng chưa?

Sự cố với các truy vấn phương tiện CSS

Một trang web bao gồm các phần và thành phần khác nhau và chúng tôi làm cho chúng phản hồi nhanh bằng cách sử dụng các truy vấn phương tiện CSS. Không có gì sai với điều đó, nhưng nó có những hạn chế. Ví dụ: chúng ta có thể sử dụng truy vấn phương tiện để hiển thị phiên bản tối thiểu của một thành phần trên thiết bị di động so với máy tính để bàn

Thông thường, thiết kế web đáp ứng không quan trọng về chế độ xem hoặc kích thước màn hình. Đó là về kích thước thùng chứa. Xem xét ví dụ sau

Chúng tôi có một bố cục rất điển hình với một thành phần thẻ. Nó có hai biến thể

• Xếp chồng lên nhau (xem bên)
• Chiều ngang (xem chính)

Có nhiều cách để thực hiện điều đó trong CSS, nhưng cách phổ biến nhất là như sau. Chúng ta cần tạo một thành phần cơ sở, sau đó tạo các biến thể của nó

.c-article {
  /* The default, stacked version */
}

.c-article > * + * {
  margin-top: 1rem;
}

/* The horizontal version */
@media (min-width: 46rem) {
  .c-article--horizontal {
    display: flex;
    flex-wrap: wrap;
  }

  .c-article > * + * {
    margin-top: 0;
  }

  .c-article__thumb {
    margin-right: 1rem;
  }
}

Lưu ý rằng chúng tôi đã tạo lớp

 class="o-grid">
   class="o-grid__item">
     class="c-article">
      
    
  

Điều này không tệ, nhưng bằng cách nào đó nó khiến tôi cảm thấy hơi hạn chế. Tôi muốn thành phần đáp ứng chiều rộng gốc của nó, không phải chế độ xem của trình duyệt hoặc kích thước màn hình

Hãy xem xét rằng chúng tôi muốn sử dụng

 class="o-grid">
   class="o-grid__item">
     class="c-article">
      
    
  
 class="o-grid__item">
 class="c-article">

Đây là một vấn đề và chúng ta có thể giải quyết nó bằng các truy vấn bộ chứa CSS (Cuối cùng thì cũng được). Trước khi đi sâu vào chúng, hãy để tôi cung cấp cho bạn một cái nhìn thoáng qua về kết quả mà chúng tôi muốn

Chúng ta cần nói với thành phần rằng nếu chiều rộng cha trực tiếp của nó lớn hơn 400px, thì nó cần chuyển sang kiểu ngang. Đây là cách CSS sẽ trông như thế nào

 class="o-grid">
   class="o-grid__item">
     class="c-article">
      
    
  
 class="o-grid__item">
 class="c-article">

.o-grid__item {
  container-type: inline-size;
}

.c-article {
  /* The default style */
}

@container (min-width: 400px) {
  .c-article {
    /* The styles that will make the article horizontal**
        ** instead of a card style. */
  }
}

Các truy vấn bộ chứa CSS sẽ giúp chúng ta như thế nào?

Cảnh báo. các truy vấn vùng chứa CSS hiện chỉ được hỗ trợ trong Chrome Canary dưới cờ thử nghiệm

Với các truy vấn vùng chứa CSS, chúng ta có thể giải quyết vấn đề trên và tạo thành phần linh hoạt. Điều đó có nghĩa là, chúng ta có thể ném thành phần vào cha hẹp và nó sẽ biến thành phiên bản xếp chồng lên nhau hoặc ném nó vào cha rộng và nó sẽ biến thành phiên bản nằm ngang. Một lần nữa, Tất cả chúng không phụ thuộc vào chiều rộng của khung nhìn

Đây là cách tôi tưởng tượng nó

Đường viền màu tím đại diện cho chiều rộng gốc. Lưu ý khi nó trở nên lớn hơn, thành phần sẽ thích nghi với điều đó. Đó không phải là tuyệt vời?

Cách truy vấn vùng chứa hoạt động

Giờ đây, chúng tôi có thể thử nghiệm với các truy vấn vùng chứa Chrome canary. Để kích hoạt nó, hãy truy cập

 class="o-grid">
   class="o-grid__item">
     class="c-article">
      
    
  
   class="o-grid__item">
     class="c-article">
      
    
  

Bước đầu tiên là thêm thuộc tính

 class="o-grid">
   class="o-grid__item">
     class="c-article">
      
    
  
   class="o-grid__item">
     class="c-article">
      
    
  

 class="o-grid">
   class="o-grid__item">
     class="c-article">
      
    
  
   class="o-grid__item">
     class="c-article">
      
    
  

Giá trị

.o-grid__item {
  container-type: inline-size;
}

.c-article {
  /* The default style */
}

@container (min-width: 400px) {
  .c-article {
    /* The styles that will make the article horizontal**
        ** instead of a card style. */
  }
}

 class="o-grid">
   class="o-grid__item">
     class="c-article">
      
    
  
   class="o-grid__item">
     class="c-article">
      
    
  
  

 class="o-grid">
   class="o-grid__item">
     class="c-article">
      
    
  
   class="o-grid__item">
     class="c-article">
      
    
  

Đây là bước đầu tiên. Chúng tôi đã định nghĩa phần tử

.o-grid__item {
  container-type: inline-size;
}

.c-article {
  /* The default style */
}

@container (min-width: 400px) {
  .c-article {
    /* The styles that will make the article horizontal**
        ** instead of a card style. */
  }
}

.o-grid__item {
  container-type: inline-size;
}

.c-article {
  /* The default style */
}

@container (min-width: 400px) {
  .c-article {
    /* The styles that will make the article horizontal**
        ** instead of a card style. */
  }
}

Bước tiếp theo là thêm các kiểu mà chúng tôi muốn để truy vấn vùng chứa hoạt động

 class="o-grid">
   class="o-grid__item">
     class="c-article">
      
    
  
   class="o-grid__item">
     class="c-article">
      
    
  

.o-grid__item {
  container-type: inline-size;
}

.c-article {
  /* The default style */
}

@container (min-width: 400px) {
  .c-article {
    /* The styles that will make the article horizontal**
        ** instead of a card style. */
  }
}

.o-grid__item {
  container-type: inline-size;
}

.c-article {
  /* The default style */
}

@container (min-width: 400px) {
  .c-article {
    /* The styles that will make the article horizontal**
        ** instead of a card style. */
  }
}

.o-grid__item {
  container-type: inline-size;
}

.c-article {
  /* The default style */
}

@container (min-width: 400px) {
  .c-article {
    /* The styles that will make the article horizontal**
        ** instead of a card style. */
  }
}

Các phong cách chúng tôi có trong đó là

1. Mặc định, giao diện giống thẻ
2. Một thẻ ngang với một hình thu nhỏ nhỏ
3. Thẻ ngang có hình thu nhỏ lớn
4. Nếu cha mẹ quá lớn, phong cách sẽ giống như một anh hùng để chỉ ra rằng đó là một bài báo nổi bật

Hãy tìm hiểu các trường hợp sử dụng cho các truy vấn vùng chứa CSS

Các trường hợp sử dụng cho truy vấn vùng chứa CSS

Truy vấn vùng chứa và lưới CSS .o-grid__item { container-type: inline-size; } .c-article { /* The default style */ } @container (min-width: 400px) { .c-article { /* The styles that will make the article horizontal** ** instead of a card style. */ } } 6

Đối với một số trường hợp, sử dụng

.o-grid__item {
  container-type: inline-size;
}

.c-article {
  /* The default style */
}

@container (min-width: 400px) {
  .c-article {
    /* The styles that will make the article horizontal**
        ** instead of a card style. */
  }
}

Để cung cấp cho bạn một chút ngữ cảnh, đây là hình ảnh hiển thị sự khác biệt giữa

.o-grid__item {
  container-type: inline-size;
}

.c-article {
  /* The default style */
}

@container (min-width: 400px) {
  .c-article {
    /* The styles that will make the article horizontal**
        ** instead of a card style. */
  }
}

.o-grid__item {
  container-type: inline-size;
}

.c-article {
  /* The default style */
}

@container (min-width: 400px) {
  .c-article {
    /* The styles that will make the article horizontal**
        ** instead of a card style. */
  }
}

Lưu ý rằng khi sử dụng

.o-grid__item {
  container-type: inline-size;
}

.c-article {
  /* The default style */
}

@container (min-width: 400px) {
  .c-article {
    /* The styles that will make the article horizontal**
        ** instead of a card style. */
  }
}

.o-grid__item {
  container-type: inline-size;
}

.c-article {
  /* The default style */
}

@container (min-width: 400px) {
  .c-article {
    /* The styles that will make the article horizontal**
        ** instead of a card style. */
  }
}

Bây giờ bạn có thể đang nghĩ, điều này có liên quan gì đến các truy vấn bộ chứa CSS?

 class="o-grid">
   class="o-grid__item">
     class="c-article">
      
    
  
   class="o-grid__item">
     class="c-article">
      
    
  

 class="o-grid">
   class="o-grid__item">
     class="c-article">
      
    
  
   class="o-grid__item">
     class="c-article">
      
    
  

Khi chúng ta có bốn phần tử, kết quả sẽ giống như thế này

Điều đó sẽ thay đổi khi số lượng bài báo ít hơn, đây là điều sẽ xảy ra. Chúng ta càng có ít vật phẩm, chúng sẽ càng rộng hơn. Lý do là

.o-grid__item {
  container-type: inline-size;
}

.c-article {
  /* The default style */
}

@container (min-width: 400px) {
  .c-article {
    /* The styles that will make the article horizontal**
        ** instead of a card style. */
  }
}

Điều gì xảy ra nếu mỗi thành phần bài viết thay đổi dựa trên chiều rộng gốc của nó? . Đây là những gì chúng ta cần làm

Nếu chiều rộng mục lưới lớn hơn 400px, thì bài viết nên chuyển sang kiểu ngang

Đây là cách chúng ta có thể làm điều này

 class="o-grid">
   class="o-grid__item">
     class="c-article">
      
    
  
   class="o-grid__item">
     class="c-article">
      
    
  

Ngoài ra, chúng tôi muốn hiển thị bài viết với phần anh hùng nếu đó là mục duy nhất trong lưới

 class="o-grid">
   class="o-grid__item">
     class="c-article">
      
    
  
   class="o-grid__item">
     class="c-article">
      
    
  

Đó là nó. Chúng tôi có một thành phần đáp ứng chiều rộng gốc của nó và nó có thể hoạt động trong mọi ngữ cảnh. Đó không phải là tuyệt vời?

Kiểm tra bản demo trên CodePen

Thanh bên và Chính

Thông thường, chúng ta cần tinh chỉnh một thành phần để làm cho nó hoạt động trong các thùng chứa có chiều rộng nhỏ như

 class="o-grid">
   class="o-grid__item">
     class="c-article">
      
    
  
   class="o-grid__item">
     class="c-article">
      
    
  
  

Một sự phù hợp hoàn hảo cho điều này là một phần bản tin. Khi chiều rộng nhỏ, chúng ta cần các mục của nó để xếp chồng lên nhau và khi có đủ không gian, chúng ta cần chúng trải rộng theo chiều ngang

Như bạn thấy trong hình, chúng tôi có một bản tin sống trong hai bối cảnh khác nhau

• Một phần sang một bên
• phần chính

Không có truy vấn bộ chứa, điều này không thể thực hiện được cho đến khi chúng ta có một lớp biến thể trong CSS, ví dụ:

 class="o-grid">
   class="o-grid__item">
     class="c-article">
      
    
  
   class="o-grid__item">
     class="c-article">
      
    
  
  

Tôi biết rằng chúng tôi có thể buộc các mục phải bọc trong trường hợp không có đủ dung lượng với flexbox, nhưng điều đó là không đủ. Tôi cần kiểm soát nhiều hơn để làm những việc như

• Ẩn các yếu tố cụ thể
• Làm cho nút có chiều rộng đầy đủ

 class="o-grid">
   class="o-grid__item">
     class="c-article">
      
    
  
   class="o-grid__item">
     class="c-article">
      
    
  

Đây là một video về kết quả

Kiểm tra Demo trên CodePen

phân trang

Tôi thấy phân trang phù hợp để sử dụng truy vấn vùng chứa. Ban đầu, chúng ta có thể có các nút “Trước” và “Tiếp theo”, sau đó chúng ta có thể ẩn chúng và hiển thị toàn bộ phân trang nếu có đủ dung lượng

Xét hình sau

Để xử lý các trạng thái trên, trước tiên chúng ta cần làm việc với kiểu mặc định (các nút xếp chồng lên nhau), sau đó làm việc với hai trạng thái còn lại

 class="o-grid">
   class="o-grid__item">
     class="c-article">
      
    
  
   class="o-grid__item">
     class="c-article">
      
    
  

Kiểm tra Demo trên CodePen

thẻ hồ sơ

Đây là một trường hợp sử dụng khác lý tưởng để sử dụng trong nhiều ngữ cảnh. Trạng thái nhỏ hoạt động với kích thước khung nhìn nhỏ và ngữ cảnh như thanh bên. Cái lớn hơn có thể hoạt động cho các bối cảnh lớn hơn nhiều như đặt nó trong lưới 2 cột

 class="o-grid">
   class="o-grid__item">
     class="c-article">
      
    
  
   class="o-grid__item">
     class="c-article">
      
    
  

Cùng với đó, chúng ta có thể thấy cách các từ thành phần trong các ngữ cảnh khác nhau mà không cần sử dụng một truy vấn phương tiện nào

Kiểm tra Demo trên CodePen

Yếu tố biểu mẫu

Tôi chưa đi sâu vào các trường hợp sử dụng cho biểu mẫu, nhưng điều tôi nghĩ đến là chuyển từ nhãn nằm ngang sang xếp chồng lên nhau

 class="o-grid">
   class="o-grid__item">
     class="c-article">
      
    
  
   class="o-grid__item">
     class="c-article">
      
    
  

Hãy tự mình thử trong bản demo bên dưới. Kiểm tra bản demo trên CodePen

thành phần thử nghiệm

Bây giờ, chúng ta đã khám phá một vài trường hợp sử dụng trong đó các truy vấn bộ chứa CSS có thể hữu ích, làm cách nào chúng ta có thể kiểm tra một thành phần?

 class="o-grid">
   class="o-grid__item">
     class="c-article">
      
    
  
   class="o-grid__item">
     class="c-article">
      
    
  

Tôi đã biết về kỹ thuật này khi đọc bài viết tuyệt vời này của Bramus Van Damme

Có dễ gỡ lỗi các truy vấn vùng chứa trong DevTools không?

Câu trả lời ngắn gọn là không. Bạn không thể nhìn thấy thứ gì đó như

 class="o-grid">
   class="o-grid__item">
     class="c-article">
      
    
  
   class="o-grid__item">
     class="c-article">
      
    
  
  

Có thể cung cấp một dự phòng?

Đúng. điều chắc chắn. Có thể cung cấp dự phòng theo những cách nhất định. Đây là hai bài viết tuyệt vời giải thích làm thế nào để làm điều đó

• Giải pháp truy vấn vùng chứa với CSS Grid và Flexbox của Stephanie Eckles
• Truy vấn vùng chứa đang thực sự đến bởi Andy Bell

Sự kết luận

Tôi rất thích tìm hiểu về các truy vấn bộ chứa CSS và chơi với chúng trong trình duyệt. Tôi biết chúng chưa được hỗ trợ chính thức, nhưng đây là thời điểm tuyệt vời để chơi với nó trên trình duyệt

Là nhà phát triển front-end, một phần công việc của chúng tôi là kiểm tra và giúp đỡ những người làm việc triển khai các tính năng đó. Chúng tôi càng thử nghiệm một thử nghiệm, chúng tôi sẽ càng gặp ít vấn đề hơn sau khi thử nghiệm này được hỗ trợ trong tất cả các trình duyệt chính

Chiều rộng của vùng chứa trong CSS là bao nhiêu?

Làm cách nào để tạo chiều rộng div 100%?

tối đa là bao nhiêu

Chiều rộng container tốt nhất là gì?