Cú pháp phạm vi truy vấn phương tiện CSS mới

Chúng tôi dựa trên Truy vấn phương tiện CSS để lựa chọn và tạo kiểu các phần tử dựa trên điều kiện được nhắm mục tiêu. Điều kiện đó có thể là tất cả các loại nhưng thường rơi vào hai phe: (1) loại phương tiện đang được sử dụng và (2) một tính năng cụ thể của trình duyệt, thiết bị hoặc thậm chí là môi trường của người dùng.

Vì vậy, giả sử chúng tôi muốn áp dụng kiểu CSS nhất định cho tài liệu in:

@media print {
  .element {
    /* Style away! */
  }
}

Thực tế là chúng ta có thể áp dụng các kiểu ở một độ rộng khung nhìn nhất định đã làm cho Truy vấn phương tiện CSS trở thành thành phần cốt lõi của thiết kế web đáp ứng kể từ Ethan Marcotte đặt ra thuật ngữ. Nếu chiều rộng khung nhìn của trình duyệt là một kích thước nhất định, thì hãy áp dụng một tập hợp các quy tắc kiểu, cho phép chúng tôi thiết kế các phần tử đáp ứng với kích thước của trình duyệt.

/* When the viewport width is at least 30em... */
@media screen and (min-width: 30em) {
  .element {
    /* Style away! */
  }
}

Chú ý and trong đó? Đó là một toán tử cho phép chúng ta kết hợp các câu lệnh. Trong ví dụ đó, chúng tôi đã kết hợp một điều kiện rằng loại phương tiện là screen và đó là min-width tính năng được đặt thành 30em (hoặc ở trên). Chúng tôi có thể làm điều tương tự để nhắm mục tiêu một loạt các kích thước khung nhìn:

/* When the viewport width is between 30em - 80em */
@media screen and (min-width: 30em) and (max-width: 80em) {
  .element {
    /* Style away! */
  }
}

Giờ đây, các kiểu đó áp dụng cho một phạm vi chiều rộng khung nhìn rõ ràng thay vì một chiều rộng duy nhất!

Tuy nhiên, đặc tả Media Queries Cấp 4 đã giới thiệu một cú pháp mới để nhắm mục tiêu một loạt các chiều rộng khung nhìn bằng cách sử dụng các toán tử so sánh toán học phổ biến - những thứ như <, >và = - có ý nghĩa hơn về mặt cú pháp trong khi viết ít mã hơn.

Chúng ta hãy tìm hiểu cách hoạt động của nó.

Toán tử so sánh mới

Ví dụ cuối cùng đó là một minh họa tốt về cách chúng tôi sắp xếp các phạm vi "giả mạo" bằng cách kết hợp các điều kiện bằng cách sử dụng and nhà điều hành. Thay đổi lớn trong đặc tả Media Queries Cấp 4 là chúng tôi có các toán tử mới để so sánh các giá trị thay vì kết hợp chúng:

• < đánh giá nếu một giá trị là ít hơn giá trị khác
• > đánh giá nếu một giá trị là lớn hơn giá trị khác
• = đánh giá nếu một giá trị là như nhau sang một giá trị khác
• <= đánh giá nếu một giá trị là nhỏ hơn hoặc bằng to giá trị khác
• >= đánh giá nếu một giá trị là lớn hơn hoặc bằng to giá trị khác

Đây là cách chúng tôi có thể đã viết một truy vấn phương tiện áp dụng các kiểu nếu trình duyệt 600px rộng hoặc lớn hơn:

@media (min-width: 600px) {
  .element {
    /* Style away! */
  }
}

Đây là cách nó trông giống như để viết cùng một điều bằng cách sử dụng một toán tử so sánh:

@media (width >= 600px) {
  .element {
    /* Style away! */
  }
}

Nhắm mục tiêu một loạt các chiều rộng khung nhìn

Thông thường, khi chúng tôi viết các Truy vấn Phương tiện CSS, chúng tôi đang tạo ra những gì được gọi là breakpoint - một điều kiện trong đó thiết kế "bị hỏng" và một tập hợp các kiểu được áp dụng để sửa chữa nó. Một thiết kế có thể có một loạt các điểm ngắt! Và chúng thường dựa trên khung nhìn nằm giữa hai độ rộng: nơi điểm ngắt bắt đầu và điểm điểm ngắt kết thúc.

Đây là cách chúng tôi đã thực hiện điều đó bằng cách sử dụng and toán tử để kết hợp hai giá trị điểm ngắt:

/* When the browser is between 400px - 1000px */
@media (min-width: 400px) and (max-width: 1000px) {
  /* etc. */
}

Bạn bắt đầu hiểu rõ việc viết truy vấn phương tiện ngắn hơn và dễ dàng hơn bao nhiêu khi chúng ta bỏ Boolean and toán tử ủng hộ cú pháp so sánh phạm vi mới:

@media (400px <= width <= 1000px) {
  /* etc. */
}

Dễ dàng hơn nhiều, phải không? Và rõ ràng chính xác truy vấn phương tiện này đang làm gì.

Hỗ trợ trình duyệt

Cú pháp truy vấn phương tiện được cải tiến này vẫn còn trong những ngày đầu tại thời điểm viết bài này và không được hỗ trợ rộng rãi vào lúc này như phương pháp kết hợp min-width và max-width. Tuy nhiên, chúng ta đang đến gần! Safari là kho lưu trữ lớn duy nhất tại thời điểm này, nhưng có một vé mở cho nó mà bạn có thể làm theo.

Hãy xem một ví dụ

Đây là một bố cục phù hợp độc đáo cho các màn hình lớn hơn, như máy tính để bàn:

Bố cục này có các kiểu cơ sở chung cho tất cả các điểm ngắt. Nhưng khi màn hình thu hẹp hơn, chúng tôi bắt đầu áp dụng các kiểu được áp dụng có điều kiện tại các điểm ngắt nhỏ hơn khác nhau, phù hợp lý tưởng cho máy tính bảng cho đến điện thoại di động:

Để xem điều gì đang xảy ra, đây là cách bố cục phản hồi giữa hai điểm ngắt nhỏ hơn. Danh sách điều hướng ẩn được hiển thị cũng như title trong main được tăng lên trong font-size.

Thay đổi đó được kích hoạt khi các thay đổi của chế độ xem chuyển từ việc phù hợp với các điều kiện của phương tiện này sang điều kiện của phương tiện khác:

/* Base styles (any screen size) */
header {
  display: flex;
  justify-content: center;
}

header ul {
  display: none;
}

.title p {
  font-size: 3.75rem;
}

/* When the media type is a screen with a width greater or equal to 768px */
@media screen and (width >= 768px) {
  header {
    justify-content: space-between;
  }

  header ul {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
  }

  .title p {
    font-size: 5.75rem;
  }
}

Chúng tôi đã kết hợp một số khái niệm mà chúng tôi đã đề cập! Chúng tôi đang nhắm mục tiêu các thiết bị có screen loại phương tiện, đánh giá xem chiều rộng cửa sổ xem có lớn hơn hoặc bằng một giá trị cụ thể hay không bằng cách sử dụng cú pháp phạm vi tính năng phương tiện mới và kết hợp hai điều kiện với and nhà điều hành.

Được rồi, điều đó thật tuyệt vời cho các thiết bị di động bên dưới 768px và cho các thiết bị khác bằng hoặc lớn hơn 768px. Nhưng còn bố cục màn hình đó thì sao… làm thế nào để chúng ta đạt được điều đó?

Theo như cách bố trí đi:

• Sản phẩm main phần tử trở thành lưới 12 cột.
• Một nút được hiển thị trên hình ảnh.
• Kích thước của .title phông chữ của phần tử tăng lên và chồng lên hình ảnh.

Giả sử chúng ta đã hoàn thành bài tập về nhà và xác định chính xác nơi những thay đổi đó sẽ diễn ra, chúng ta có thể áp dụng các kiểu đó khi chế độ xem khớp với width điều kiện cho điểm ngắt đó. Chúng tôi sẽ nói rằng điểm dừng ở 1000px:

/* When the media type is a screen with a width greater or equal to 1000px  */
@media screen and (width >= 1000px) {
  /* Becomes a 12-column grid */
  main {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto 250px;
  }

  /* Places the .title on the grid */
  .title {
    grid-row: 1;
  }

  /* Bumps up the font-size */
  .title p {
    font-size: 7.75rem;
  }

  /* Places .images on the grid */
  .images {
    grid-row: 1 / span 2;
    align-self: end;
    position: relative;
  }

  /* Displays the button */
  .images .button {
    display: block;
    position: absolute;
    inset-block-end: 5rem;
    inset-inline-end: -1rem;
  }
}

Hãy chơi với nó:

Tại sao cú pháp mới dễ hiểu hơn

Điểm mấu chốt: dễ dàng phân biệt toán tử so sánh hơn (ví dụ: width >= 320px) hơn là nó là để nói sự khác biệt giữa min-width và max-width bằng cách sử dụng and nhà điều hành. Bằng cách loại bỏ sắc thái giữa min- và max-, chúng tôi có một đĩa đơn width tham số để làm việc và các toán tử cho chúng tôi biết phần còn lại.

Ngoài sự khác biệt về hình ảnh của những cú pháp đó, chúng cũng đang làm những điều hơi khác một chút. Sử dụng min- và max- tương đương với việc sử dụng các toán tử so sánh toán học:

• max-width tương đương với <= toán tử (ví dụ (max-width: 320px) giống như (width <= 320px)).
• min-width tương đương với >= toán tử (ví dụ (min-width: 320px) giống như (width >= 320px)).

Lưu ý rằng cả hai đều không tương đương với > or < khai thác.

Hãy lấy một ví dụ trực tiếp từ đặc tả Media Queries Cấp 4, nơi chúng tôi xác định các kiểu khác nhau dựa trên một điểm ngắt tại 320px trong chiều rộng khung nhìn bằng cách sử dụng min-width và max-width:

@media (max-width: 320px) { /* styles for viewports = 320px */ }

Cả hai truy vấn phương tiện đều phù hợp với điều kiện khi chiều rộng khung nhìn bằng 320px. Đó không chính xác là những gì chúng tôi muốn. Chúng tôi muốn hay một trong những điều kiện đó thay vì cả hai cùng một lúc. Để tránh những thay đổi ngầm đó, chúng tôi có thể thêm một pixel vào truy vấn dựa trên min-width:

@media (max-width: 320px){ /* styles for viewports = 321px */ }

Mặc dù điều này đảm bảo rằng hai tập hợp kiểu không áp dụng đồng thời khi chiều rộng khung nhìn là 320px, bất kỳ chiều rộng khung nhìn nào nằm giữa 320px và 321px sẽ dẫn đến một vùng siêu nhỏ, nơi không có kiểu nào trong cả hai truy vấn được áp dụng - một tình huống kỳ lạ “nội dung chưa được phân loại”.

Một giải pháp là tăng giá trị thang đo so sánh thứ hai (các số sau dấu thập phân) lên 320.01px:

@media (max-width: 320px) { /* styles for viewports = 320.01px */ }

Nhưng điều đó đang trở nên ngớ ngẩn và quá phức tạp. Đó là lý do tại sao cú pháp phạm vi tính năng đa phương tiện mới là một cách tiếp cận phù hợp hơn:

@media (width <= 320px) { /* styles for viewports  320px) { /* styles for viewports > 320px */ }

Kết thúc

Phù, chúng tôi đã trình bày rất nhiều cơ sở về cú pháp mới để nhắm mục tiêu phạm vi chiều rộng khung nhìn trong CSS Media Queries. Giờ đây, đặc tả Media Queries Level 4 đã giới thiệu cú pháp và nó đã được áp dụng trong các trình duyệt Firefox và Chromium, chúng tôi đang tiến gần đến việc có thể sử dụng các toán tử so sánh mới và kết hợp chúng với các tính năng đa phương tiện khác bên cạnh width, Giống như height và aspect-ratio

Và đó chỉ là một trong những tính năng mới hơn mà thông số kỹ thuật Cấp 4 đã giới thiệu, cùng với nhiều truy vấn mà chúng tôi có thể thực hiện dựa trên sở thích của người dùng. Nó không kết thúc ở đó! Kiểm tra Hướng dẫn đầy đủ về truy vấn phương tiện CSS để xem trước những gì có thể được bao gồm trong Truy vấn phương tiện cấp 5.