Hoang  Kim

Hoang Kim

1656697800

Cách Sử Dụng CSS Subgrid Và Container Truy Vấn

Nếu thường xuyên làm việc với CSS, bạn có thể gặp phải tình trạng các bố cục đặt cạnh nhau bị vỡ hoặc bị lệch khi kích thước của một bên thay đổi. Hầu hết mọi nhà thiết kế web đều phải đối mặt với điều này và nó có thể gây khó chịu khi giải quyết. May mắn thay, CSS có các tính năng cho phép bạn tạo bố cục web duy trì sự liên kết khi nội dung của chúng thay đổi; chúng được gọi là truy vấn lưới con và vùng chứa.

CSS subgrid và container truy vấn là hai tính năng có thể cải thiện đáng kể thiết kế bố cục web và phát triển web đáp ứng. Bài viết này sẽ đi sâu vào các mã con CSS bằng cách cung cấp một hướng dẫn về cách sử dụng chúng một cách liền mạch với các truy vấn vùng chứa.

CSS con là gì?

Các mã con CSS là một tính năng tương đối mới trong hệ sinh thái CSS, được chứng minh là một bổ sung đáng kể cho các thông số kỹ thuật bố trí và thiết kế web lưới CSS cấp hai.

Các phần tử (thành phần con) mà bạn xây dựng và điều chỉnh bên trong vùng chứa lưới truyền thống không kế thừa trực tiếp các hàng và cột từ thành phần mẹ của chúng. Điều này gây ra khó khăn trong việc căn chỉnh chúng một cách nhất quán với lưới mẹ, vì mỗi phần tử có xu hướng hoạt động độc lập.

Sau đó, bạn phải quản lý hai lưới riêng biệt, có thể bị dư thừa. Bạn có thể nhanh chóng giải quyết vấn đề này bằng cách thêm subgriddưới dạng giá trị cho thuộc tính grid-template-rowsgrid-template-columns, vì các thành phần con của lưới giờ đây có thể đồng bộ hóa hoàn hảo với thành phần mẹ của chúng.

Các mã con CSS cho phép các thành phần con kế thừa cài đặt hàng và cột cha của chúng mà không cần duy trì cài đặt lưới của chúng.

Hãy xem xét ba thẻ trong một hệ thống lưới lồng nhau dưới đây:

Các thẻ trong hệ thống lưới lồng nhau

Hãy xem điều gì sẽ xảy ra khi bạn tăng nội dung của thẻ ở trung tâm:

Thẻ lưới lồng nhau làm tăng nội dung trung tâm

 

Bạn có thể thấy ngay rằng vị trí tiêu đề và chân trang bị xâm phạm khi nội dung tăng lên.

Có một số cách để giải quyết vấn đề này. Tuy nhiên, tất cả đều kết thúc với việc bạn quản lý thủ công các lưới riêng lẻ trong các hệ thống lưới lồng nhau, điều này có thể gây ra vấn đề khi làm việc trên một cơ sở mã lớn hơn.

Các subgrids hiện cung cấp một bản sửa lỗi thay thế cho phép các hàng và cột duy trì vị trí ban đầu của chúng trong hệ thống lưới mặc dù đã thay đổi nội dung của chúng.

Từ ví dụ của tôi ở trên, việc thêm subgridlàm giá trị cho các thẻ của tôi grid-template-rowsẽ tạo ra một đầu ra khác:

.card {
  grid-template-rows: subgrid;
}

Đây là kết quả:

thẻ mạng con

Bất chấp sự gia tăng nội dung của thẻ thứ hai, các phần tử tiêu đề và chân trang vẫn được định vị hoàn hảo và đồng bộ với lưới mẹ.

Subgrid là một bổ sung đáng kể cho các đặc tả bố cục lưới CSS vì khả năng của các thành phần con kế thừa các thuộc tính của các thành phần cha và ông của chúng. Nó rất hữu ích khi xây dựng hệ thống lưới lồng nhau, bố cục biểu mẫu được căn chỉnh hoàn hảo và các căn chỉnh web biên tập khác.

Hiện tại, chỉ có trình duyệt Firefox hỗ trợ CSS subgrid, nhưng các trình duyệt phổ biến khác cũng không kém xa. Bạn có thể tham khảo hướng dẫn này để tìm hiểu sâu hơn về các mã con CSS và chức năng của chúng.

Truy vấn vùng chứa là gì?

Kể từ khi giới thiệu các truy vấn phương tiện cho các trình duyệt, thiết kế web đáp ứng đã có một bước tiến lớn trong tương lai, vì giờ đây bạn có thể thiết kế các bố cục cụ thể cho các khung nhìn của trình duyệt.

Điều này thật tuyệt, nhưng các truy vấn phương tiện cũng gây ra vấn đề dư thừa khi tạo các cấu trúc web phức tạp hơn. Ví dụ: các thành phần được bao bọc trong phần chứa cần điều chỉnh các thuộc tính bố cục chính của chúng (như chiều rộng hoặc chiều cao) để phù hợp với sự thay đổi trong khung nhìn của trang web có thể ảnh hưởng và phá vỡ thiết kế.

Để giải quyết vấn đề này, hãy giữ cho các truy vấn phương tiện của thành phần đồng bộ với phần chứa để đảm bảo rằng thành phần của bạn trông đẹp trên tất cả các kích thước khung nhìn. Bạn có thể dễ dàng giải quyết vấn đề này với các truy vấn vùng chứa vì thay vì kích thước khung nhìn, giờ đây bạn thiết kế các phần tử dựa trên các thuộc tính thực tế của chúng. Truy vấn vùng chứa cho phép bất kỳ thành phần nào phản hồi trên một vùng chứa được chỉ định.

Ví dụ: trong hệ thống lưới, các thành phần con có thể phù hợp với vùng chứa của chúng và xác định hành vi cũng như khả năng phản hồi của chúng. Bạn có thể sửa đổi kiểu của chúng tùy thuộc vào vị trí của chúng trong vùng chứa (không phải chế độ xem). Mặc dù bạn vẫn có thể cấu trúc các trang web với bố cục lưới đáp ứng, nhưng sử dụng truy vấn vùng chứa là một cách tiếp cận đơn giản hơn để thiết kế web đáp ứng.

Các truy vấn vùng chứa hoạt động như thế nào?

Điều đầu tiên cần hiểu về truy vấn vùng chứa CSS là mặc dù “vùng chứa” là các phần tử đang được truy vấn, các quy tắc trong truy vấn vùng chứa chỉ ảnh hưởng đến con cháu vùng chứa. Ví dụ: nếu bạn truy vấn a main, sectionhoặc có thể a divlàm vùng chứa mục tiêu của mình, các truy vấn vùng chứa sẽ cho phép bạn xác định các quy tắc về cách các phần tử bên trong chúng thay đổi khi kích thước vùng chứa thay đổi.

Bạn có thể tạo truy vấn vùng chứa với @container. Nó tìm kiếm bối cảnh ngăn chặn gần nhất:

.card {
  display: flex;
  flex-direction: column;
}

.container {
  background: #fff;
  container-type: layout inline-size
  container-name: something;
}

@container something (min-width: 450px) {
  .card {
    display: flex;
    flex-direction: row
  }
}

Đoạn mã trên là một minh họa về cách làm việc với các truy vấn vùng chứa. Nó chỉ đơn giản là hướng dẫn trình duyệt thay đổi giá trị của flex-directioncột của thẻ thành rownếu chiều rộng của vùng chứa ít nhất là 450px.

Các truy vấn vùng chứa đã được chỉ định để được đưa vào CSS containment. Ba thuộc tính đi kèm với chúng:

1.container-type

Thuộc tính này chỉ định một vùng chứa truy vấn cho một phần tử để các thành phần con của nó có thể truy vấn một số khía cạnh của các tính năng bố cục của nó.

  • sizetạo một vùng chứa truy vấn cho các truy vấn chiều trục khối và trục nội tuyến. Bố cục, kiểu và ngăn kích thước được áp dụng cho phần tử
  • inline-sizetạo một vùng chứa truy vấn cho các truy vấn thứ nguyên trên trục nội tuyến của vùng chứa. Bố cục, kiểu và ngăn chứa kích thước nội tuyến của phần tử được áp dụng
  • block-sizetạo một vùng chứa truy vấn cho các truy vấn thứ nguyên trên trục khối của vùng chứa. Bố cục, kiểu và ngăn kích thước khối được áp dụng cho phần tử
  • styledành cho các truy vấn kiểu và tạo một vùng chứa truy vấn
  • statetạo một vùng chứa truy vấn cho các truy vấn trạng thái

2.container-name

Thuộc tính tùy chọn chỉ định thêm tên của vùng chứa. Thuộc tính này hoạt động như một lối thoát khi chúng ta không muốn nhắm mục tiêu vùng chứa mẹ gần nhất.

Hãy xem xét đoạn mã dưới đây:

.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

CSS ở trên tạo một vùng chứa với tên được chỉ định ( sidebar) chỉ chứa nội dung trên trục nội tuyến, có nghĩa là nội dung có thể phát triển nhiều đến mức cần thiết trên trục khối. Sau đó, bạn có thể truy vấn vùng chứa cụ thể đó với container-nametương tự như vậy:

@container sidebar (min-width: 450px){
  .card {
    display: flex;
    flex-direction: row
  }
}

3.container

Thuộc tính này thường được sử dụng như một thuộc tính tốc ký mà bạn có thể sử dụng để đặt cả hai container-typecontainer-nametrong một câu lệnh.

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

Truy vấn vùng chứa thích hợp cho các thành phần có thể tái sử dụng cao với bố cục phụ thuộc vào không gian vùng chứa có sẵn. Chúng có thể được sử dụng trong nhiều trường hợp khác nhau hoặc được thêm vào nhiều vùng chứa trên trang.

Các trường hợp sử dụng truy vấn vùng chứa khác bao gồm:

  • Bố cục có thể điều chỉnh
  • Thẻ, thành phần biểu mẫu, biểu ngữ và các thành phần mô-đun khác
  • Thử nghiệm thay đổi kích thước CSS
  • Phân trang trên thiết bị di động và máy tính để bàn với các chức năng riêng biệt

Hầu hết các trình duyệt vẫn không hỗ trợ truy vấn vùng chứa, nhưng bạn có thể dễ dàng kiểm tra các tính năng của chúng trên Google Chrome Canary. Đi tới chrome://flagsvà bật CSS Container Queries:

Bật truy vấn vùng chứa css

Bạn cũng có thể thử nghiệm với các truy vấn vùng chứa trên Mozilla Firefox bằng cách truy cập about:configvà bật layout.css.container-queries:

bật truy vấn vùng chứa firefox

Các truy vấn vùng chứa hiện đang ở trong bản nháp làm việc công khai đầu tiên của chúng, nhưng nó là một tính năng đã được chứng minh là hữu ích và có khả năng được tích hợp trong tất cả các phiên bản trình duyệt.

Sử dụng mã con CSS với các truy vấn vùng chứa

Các mã con CSS và truy vấn vùng chứa là hai tính năng CSS hấp dẫn mà tôi nghĩ sẽ thay đổi cách tiếp cận của bạn đối với thiết kế bố cục trang web và kiểu đáp ứng, nhưng làm thế nào chúng ta có thể kết hợp chúng?

Giả sử chúng tôi có một phần chứa ba bài báo ở định dạng sau:

<section class="container">
  <article class="article1">...</article>
  <article class="article2">...</article>
  <article class="article3">...</article>
</section>

Bây giờ, hãy đặt các bài viết này trong một hệ thống lưới lồng nhau, nơi các mã con và truy vấn vùng chứa có thể đóng vai trò của chúng:

/* this creates a container with containment on the inline axis only and gives it an optional name "main" */
html, section {
  container-type: inline-size;
  container-name: main;
}

/* targeting the section's minimum width at "60ch" */
@container main (min-width: 60ch) {
  section {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* targeting the section's minimum width at "100ch" */
@container main (min-width: 100ch) {
  article {
    padding: 1rem;
    font-size: 1rem;
    border: 1px solid #000;
    margin: 10px 20px;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  /* enabling a more responsive grid layout so elements don't break */
  .article1, .article2 {
    grid-template-columns: subgrid;
  }

  .article3 {
    display: grid;
    grid-column: span 2;
  }
}

/* targeting the section's containment context at a maximum width of "100ch" */
@container main (max-width: 100ch) {
  main {
    display: flex;
    flex-direction: column;
  }
}

Từ mã CSS trên, chúng tôi đã tạo cho hai cột đầu tiên chiếm nhiều không gian trong hệ thống lưới hai cột như cột thứ ba, nằm ngay bên dưới. Sau đó, chúng tôi tạo một mạng con bên trong bài viết để đảm bảo các yếu tố bên trong được đồng bộ và không thể phá vỡ, ngay cả khi nội dung bài viết được tăng lên.

ví dụ hệ thống lưới thẻ

Để làm cho hệ thống này phản hồi nhanh hơn, chúng tôi phải nhắm mục tiêu phần này và đặt một số quy tắc truy vấn vùng chứa áp dụng cho các bài viết dưới dạng con của chúng. Bạn có thể nhận thấy rằng chúng tôi đã truy vấn thuộc inline-sizetính của phần vì chúng tôi muốn các thành phần của bài viết (con) phát triển hoặc thu nhỏ nội tuyến với chiều rộng (vùng chứa) của phần.

Trong trường hợp này, chúng tôi đã làm cho các bài viết uốn cong theo hướng cột khi chiều rộng của phần ở mức tối đa 80ch. Điều này cho phép các bài viết của chúng tôi phản hồi không phải kích thước khung nhìn mà là chiều rộng của vùng chứa của chúng.

Đây là kết quả:

truy vấn vùng chứa mã con hoạt động cùng nhau

Sự kết luận

Bài viết này đề cập đến các mã con CSS và truy vấn vùng chứa, hoạt động của chúng và các trường hợp sử dụng. Chúng tôi cũng có thể thử nghiệm cả hai khái niệm và kết hợp chúng để mang lại bố cục đáp ứng. Truy vấn vùng chứa và mã con CSS hiện đang ở trong bản nháp làm việc công khai đầu tiên của chúng, nhưng chúng là những tính năng đã được chứng minh là hữu ích và có khả năng được tích hợp trong hầu hết các phiên bản trình duyệt mới.

Tôi hy vọng bài viết này có giá trị đối với bạn. Chúc bạn viết mã vui vẻ!

Nguồn: https://blog.logrocket.com/using-css-subgrids-container-queries/

#css 

What is GEEK

Buddha Community

Cách Sử Dụng CSS Subgrid Và Container Truy Vấn
Hoang  Kim

Hoang Kim

1656697800

Cách Sử Dụng CSS Subgrid Và Container Truy Vấn

Nếu thường xuyên làm việc với CSS, bạn có thể gặp phải tình trạng các bố cục đặt cạnh nhau bị vỡ hoặc bị lệch khi kích thước của một bên thay đổi. Hầu hết mọi nhà thiết kế web đều phải đối mặt với điều này và nó có thể gây khó chịu khi giải quyết. May mắn thay, CSS có các tính năng cho phép bạn tạo bố cục web duy trì sự liên kết khi nội dung của chúng thay đổi; chúng được gọi là truy vấn lưới con và vùng chứa.

CSS subgrid và container truy vấn là hai tính năng có thể cải thiện đáng kể thiết kế bố cục web và phát triển web đáp ứng. Bài viết này sẽ đi sâu vào các mã con CSS bằng cách cung cấp một hướng dẫn về cách sử dụng chúng một cách liền mạch với các truy vấn vùng chứa.

CSS con là gì?

Các mã con CSS là một tính năng tương đối mới trong hệ sinh thái CSS, được chứng minh là một bổ sung đáng kể cho các thông số kỹ thuật bố trí và thiết kế web lưới CSS cấp hai.

Các phần tử (thành phần con) mà bạn xây dựng và điều chỉnh bên trong vùng chứa lưới truyền thống không kế thừa trực tiếp các hàng và cột từ thành phần mẹ của chúng. Điều này gây ra khó khăn trong việc căn chỉnh chúng một cách nhất quán với lưới mẹ, vì mỗi phần tử có xu hướng hoạt động độc lập.

Sau đó, bạn phải quản lý hai lưới riêng biệt, có thể bị dư thừa. Bạn có thể nhanh chóng giải quyết vấn đề này bằng cách thêm subgriddưới dạng giá trị cho thuộc tính grid-template-rowsgrid-template-columns, vì các thành phần con của lưới giờ đây có thể đồng bộ hóa hoàn hảo với thành phần mẹ của chúng.

Các mã con CSS cho phép các thành phần con kế thừa cài đặt hàng và cột cha của chúng mà không cần duy trì cài đặt lưới của chúng.

Hãy xem xét ba thẻ trong một hệ thống lưới lồng nhau dưới đây:

Các thẻ trong hệ thống lưới lồng nhau

Hãy xem điều gì sẽ xảy ra khi bạn tăng nội dung của thẻ ở trung tâm:

Thẻ lưới lồng nhau làm tăng nội dung trung tâm

 

Bạn có thể thấy ngay rằng vị trí tiêu đề và chân trang bị xâm phạm khi nội dung tăng lên.

Có một số cách để giải quyết vấn đề này. Tuy nhiên, tất cả đều kết thúc với việc bạn quản lý thủ công các lưới riêng lẻ trong các hệ thống lưới lồng nhau, điều này có thể gây ra vấn đề khi làm việc trên một cơ sở mã lớn hơn.

Các subgrids hiện cung cấp một bản sửa lỗi thay thế cho phép các hàng và cột duy trì vị trí ban đầu của chúng trong hệ thống lưới mặc dù đã thay đổi nội dung của chúng.

Từ ví dụ của tôi ở trên, việc thêm subgridlàm giá trị cho các thẻ của tôi grid-template-rowsẽ tạo ra một đầu ra khác:

.card {
  grid-template-rows: subgrid;
}

Đây là kết quả:

thẻ mạng con

Bất chấp sự gia tăng nội dung của thẻ thứ hai, các phần tử tiêu đề và chân trang vẫn được định vị hoàn hảo và đồng bộ với lưới mẹ.

Subgrid là một bổ sung đáng kể cho các đặc tả bố cục lưới CSS vì khả năng của các thành phần con kế thừa các thuộc tính của các thành phần cha và ông của chúng. Nó rất hữu ích khi xây dựng hệ thống lưới lồng nhau, bố cục biểu mẫu được căn chỉnh hoàn hảo và các căn chỉnh web biên tập khác.

Hiện tại, chỉ có trình duyệt Firefox hỗ trợ CSS subgrid, nhưng các trình duyệt phổ biến khác cũng không kém xa. Bạn có thể tham khảo hướng dẫn này để tìm hiểu sâu hơn về các mã con CSS và chức năng của chúng.

Truy vấn vùng chứa là gì?

Kể từ khi giới thiệu các truy vấn phương tiện cho các trình duyệt, thiết kế web đáp ứng đã có một bước tiến lớn trong tương lai, vì giờ đây bạn có thể thiết kế các bố cục cụ thể cho các khung nhìn của trình duyệt.

Điều này thật tuyệt, nhưng các truy vấn phương tiện cũng gây ra vấn đề dư thừa khi tạo các cấu trúc web phức tạp hơn. Ví dụ: các thành phần được bao bọc trong phần chứa cần điều chỉnh các thuộc tính bố cục chính của chúng (như chiều rộng hoặc chiều cao) để phù hợp với sự thay đổi trong khung nhìn của trang web có thể ảnh hưởng và phá vỡ thiết kế.

Để giải quyết vấn đề này, hãy giữ cho các truy vấn phương tiện của thành phần đồng bộ với phần chứa để đảm bảo rằng thành phần của bạn trông đẹp trên tất cả các kích thước khung nhìn. Bạn có thể dễ dàng giải quyết vấn đề này với các truy vấn vùng chứa vì thay vì kích thước khung nhìn, giờ đây bạn thiết kế các phần tử dựa trên các thuộc tính thực tế của chúng. Truy vấn vùng chứa cho phép bất kỳ thành phần nào phản hồi trên một vùng chứa được chỉ định.

Ví dụ: trong hệ thống lưới, các thành phần con có thể phù hợp với vùng chứa của chúng và xác định hành vi cũng như khả năng phản hồi của chúng. Bạn có thể sửa đổi kiểu của chúng tùy thuộc vào vị trí của chúng trong vùng chứa (không phải chế độ xem). Mặc dù bạn vẫn có thể cấu trúc các trang web với bố cục lưới đáp ứng, nhưng sử dụng truy vấn vùng chứa là một cách tiếp cận đơn giản hơn để thiết kế web đáp ứng.

Các truy vấn vùng chứa hoạt động như thế nào?

Điều đầu tiên cần hiểu về truy vấn vùng chứa CSS là mặc dù “vùng chứa” là các phần tử đang được truy vấn, các quy tắc trong truy vấn vùng chứa chỉ ảnh hưởng đến con cháu vùng chứa. Ví dụ: nếu bạn truy vấn a main, sectionhoặc có thể a divlàm vùng chứa mục tiêu của mình, các truy vấn vùng chứa sẽ cho phép bạn xác định các quy tắc về cách các phần tử bên trong chúng thay đổi khi kích thước vùng chứa thay đổi.

Bạn có thể tạo truy vấn vùng chứa với @container. Nó tìm kiếm bối cảnh ngăn chặn gần nhất:

.card {
  display: flex;
  flex-direction: column;
}

.container {
  background: #fff;
  container-type: layout inline-size
  container-name: something;
}

@container something (min-width: 450px) {
  .card {
    display: flex;
    flex-direction: row
  }
}

Đoạn mã trên là một minh họa về cách làm việc với các truy vấn vùng chứa. Nó chỉ đơn giản là hướng dẫn trình duyệt thay đổi giá trị của flex-directioncột của thẻ thành rownếu chiều rộng của vùng chứa ít nhất là 450px.

Các truy vấn vùng chứa đã được chỉ định để được đưa vào CSS containment. Ba thuộc tính đi kèm với chúng:

1.container-type

Thuộc tính này chỉ định một vùng chứa truy vấn cho một phần tử để các thành phần con của nó có thể truy vấn một số khía cạnh của các tính năng bố cục của nó.

  • sizetạo một vùng chứa truy vấn cho các truy vấn chiều trục khối và trục nội tuyến. Bố cục, kiểu và ngăn kích thước được áp dụng cho phần tử
  • inline-sizetạo một vùng chứa truy vấn cho các truy vấn thứ nguyên trên trục nội tuyến của vùng chứa. Bố cục, kiểu và ngăn chứa kích thước nội tuyến của phần tử được áp dụng
  • block-sizetạo một vùng chứa truy vấn cho các truy vấn thứ nguyên trên trục khối của vùng chứa. Bố cục, kiểu và ngăn kích thước khối được áp dụng cho phần tử
  • styledành cho các truy vấn kiểu và tạo một vùng chứa truy vấn
  • statetạo một vùng chứa truy vấn cho các truy vấn trạng thái

2.container-name

Thuộc tính tùy chọn chỉ định thêm tên của vùng chứa. Thuộc tính này hoạt động như một lối thoát khi chúng ta không muốn nhắm mục tiêu vùng chứa mẹ gần nhất.

Hãy xem xét đoạn mã dưới đây:

.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

CSS ở trên tạo một vùng chứa với tên được chỉ định ( sidebar) chỉ chứa nội dung trên trục nội tuyến, có nghĩa là nội dung có thể phát triển nhiều đến mức cần thiết trên trục khối. Sau đó, bạn có thể truy vấn vùng chứa cụ thể đó với container-nametương tự như vậy:

@container sidebar (min-width: 450px){
  .card {
    display: flex;
    flex-direction: row
  }
}

3.container

Thuộc tính này thường được sử dụng như một thuộc tính tốc ký mà bạn có thể sử dụng để đặt cả hai container-typecontainer-nametrong một câu lệnh.

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

Truy vấn vùng chứa thích hợp cho các thành phần có thể tái sử dụng cao với bố cục phụ thuộc vào không gian vùng chứa có sẵn. Chúng có thể được sử dụng trong nhiều trường hợp khác nhau hoặc được thêm vào nhiều vùng chứa trên trang.

Các trường hợp sử dụng truy vấn vùng chứa khác bao gồm:

  • Bố cục có thể điều chỉnh
  • Thẻ, thành phần biểu mẫu, biểu ngữ và các thành phần mô-đun khác
  • Thử nghiệm thay đổi kích thước CSS
  • Phân trang trên thiết bị di động và máy tính để bàn với các chức năng riêng biệt

Hầu hết các trình duyệt vẫn không hỗ trợ truy vấn vùng chứa, nhưng bạn có thể dễ dàng kiểm tra các tính năng của chúng trên Google Chrome Canary. Đi tới chrome://flagsvà bật CSS Container Queries:

Bật truy vấn vùng chứa css

Bạn cũng có thể thử nghiệm với các truy vấn vùng chứa trên Mozilla Firefox bằng cách truy cập about:configvà bật layout.css.container-queries:

bật truy vấn vùng chứa firefox

Các truy vấn vùng chứa hiện đang ở trong bản nháp làm việc công khai đầu tiên của chúng, nhưng nó là một tính năng đã được chứng minh là hữu ích và có khả năng được tích hợp trong tất cả các phiên bản trình duyệt.

Sử dụng mã con CSS với các truy vấn vùng chứa

Các mã con CSS và truy vấn vùng chứa là hai tính năng CSS hấp dẫn mà tôi nghĩ sẽ thay đổi cách tiếp cận của bạn đối với thiết kế bố cục trang web và kiểu đáp ứng, nhưng làm thế nào chúng ta có thể kết hợp chúng?

Giả sử chúng tôi có một phần chứa ba bài báo ở định dạng sau:

<section class="container">
  <article class="article1">...</article>
  <article class="article2">...</article>
  <article class="article3">...</article>
</section>

Bây giờ, hãy đặt các bài viết này trong một hệ thống lưới lồng nhau, nơi các mã con và truy vấn vùng chứa có thể đóng vai trò của chúng:

/* this creates a container with containment on the inline axis only and gives it an optional name "main" */
html, section {
  container-type: inline-size;
  container-name: main;
}

/* targeting the section's minimum width at "60ch" */
@container main (min-width: 60ch) {
  section {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* targeting the section's minimum width at "100ch" */
@container main (min-width: 100ch) {
  article {
    padding: 1rem;
    font-size: 1rem;
    border: 1px solid #000;
    margin: 10px 20px;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  /* enabling a more responsive grid layout so elements don't break */
  .article1, .article2 {
    grid-template-columns: subgrid;
  }

  .article3 {
    display: grid;
    grid-column: span 2;
  }
}

/* targeting the section's containment context at a maximum width of "100ch" */
@container main (max-width: 100ch) {
  main {
    display: flex;
    flex-direction: column;
  }
}

Từ mã CSS trên, chúng tôi đã tạo cho hai cột đầu tiên chiếm nhiều không gian trong hệ thống lưới hai cột như cột thứ ba, nằm ngay bên dưới. Sau đó, chúng tôi tạo một mạng con bên trong bài viết để đảm bảo các yếu tố bên trong được đồng bộ và không thể phá vỡ, ngay cả khi nội dung bài viết được tăng lên.

ví dụ hệ thống lưới thẻ

Để làm cho hệ thống này phản hồi nhanh hơn, chúng tôi phải nhắm mục tiêu phần này và đặt một số quy tắc truy vấn vùng chứa áp dụng cho các bài viết dưới dạng con của chúng. Bạn có thể nhận thấy rằng chúng tôi đã truy vấn thuộc inline-sizetính của phần vì chúng tôi muốn các thành phần của bài viết (con) phát triển hoặc thu nhỏ nội tuyến với chiều rộng (vùng chứa) của phần.

Trong trường hợp này, chúng tôi đã làm cho các bài viết uốn cong theo hướng cột khi chiều rộng của phần ở mức tối đa 80ch. Điều này cho phép các bài viết của chúng tôi phản hồi không phải kích thước khung nhìn mà là chiều rộng của vùng chứa của chúng.

Đây là kết quả:

truy vấn vùng chứa mã con hoạt động cùng nhau

Sự kết luận

Bài viết này đề cập đến các mã con CSS và truy vấn vùng chứa, hoạt động của chúng và các trường hợp sử dụng. Chúng tôi cũng có thể thử nghiệm cả hai khái niệm và kết hợp chúng để mang lại bố cục đáp ứng. Truy vấn vùng chứa và mã con CSS hiện đang ở trong bản nháp làm việc công khai đầu tiên của chúng, nhưng chúng là những tính năng đã được chứng minh là hữu ích và có khả năng được tích hợp trong hầu hết các phiên bản trình duyệt mới.

Tôi hy vọng bài viết này có giá trị đối với bạn. Chúc bạn viết mã vui vẻ!

Nguồn: https://blog.logrocket.com/using-css-subgrids-container-queries/

#css 

Hire CSS Developer

Want to develop a website or re-design using CSS Development?

We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.

For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS

#hire css developer #css development company #css development services #css development #css developer #css

Alayna  Rippin

Alayna Rippin

1603188000

Creating a CSS Visual Cheatsheet

The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.

This evolved into the idea of making a visual CSS cheatsheet with all (most) of the common patterns we see everyday and one of the best possible conceptual implementation for them.

In the end any layout could and should be split into parts/blocks and we see every block separately.

Here is our first take on that and we would be happy to keep extending it to help us all.

Please, send you suggestions in the comments in community or via gitlab for the repeated CSS patterns with your favourite implementation for that so that we will all together make this as useful as it can be.

#css #css3 #cascading-style-sheets #web-development #html-css #css-grids #learning-css #html-css-basics

Aisu  Joesph

Aisu Joesph

1618024175

CSS Alignment Made Simple

CSS is seen as an impediment in web development for many of us. Most of the time it looks like even when you follow the rules and everything seems clear, it still doesn’t work the way you want it to.

Therefore, the purpose of this article is to make some features of CSS much easier to understand.

The thing I want to address now is the alignment of the elements.

Without further ado, here are some of the most common scenarios one might encounter when it comes to this topic and how they can be approached.

#css-center #css-position #css-flexbox #css-center-image-in-a-div #css

CSS Animation: translate3d, backdrop-filter, and Custom Tags

In this tutorial, we are going to learn:

  • how to create a smooth animation using the CSS transform translate3d prop.
  • why we’d want to use the cubic-bezier transition timing function and this function’s benefits.
  • how and why we use custom tags.
  • if you watch the video to the end, I also provide a bonus tip on using backdrop-filter to style some frost/blur style on background.

#css #css animation #css / style sheets #css animations #css background