Cú pháp mới cho truy vấn nội dung đa phương tiện trong phạm vi

Tìm hiểu cách cú pháp mới này có thể đơn giản hoá các truy vấn nội dung nghe nhìn.

Rachel Andrew

Truy vấn nội dung đa phương tiện đã hỗ trợ thiết kế thích ứng và các tính năng phạm vi cho phép kiểm thử kích thước tối thiểu và tối đa của khung nhìn được khoảng 80% trang web sử dụng truy vấn nội dung đa phương tiện sử dụng. Thông số kỹ thuật của Truy vấn nội dung nghe nhìn cấp 4 bao gồm cú pháp cải tiến cho các truy vấn phạm vi này.

Các ví dụ sau đây cho thấy cách tính năng này có thể đơn giản hoá các truy vấn của bạn.

Quy trình kiểm thử truy vấn nội dung đa phương tiện điển hình cho chiều rộng khung nhìn tối thiểu sẽ được viết như sau:

@media (min-width: 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

Cú pháp mới cho phép sử dụng toán tử so sánh:

@media (width >= 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

Kiểm thử chiều rộng tối đa:

@media (max-width: 30em) {
  // Styles for viewports with a width of 30em or less.
}

Và phiên bản sử dụng cú pháp cấp 4:

@media (width <= 30em) {
  // Styles for viewports with a width of 30em or less.
}

Cú pháp này có thể đơn giản hoá các truy vấn, đặc biệt là khi kiểm tra giữa hai độ rộng. Trong ví dụ sau, truy vấn nội dung nghe nhìn kiểm thử cho một khung nhìn có chiều rộng tối thiểu là 400px và chiều rộng tối đa là 600px.

@media (min-width: 400px) and (max-width: 600px) {
  // Styles for viewports between 400px and 600px.
}

Bạn có thể viết lại mã này theo cú pháp mới như sau:

@media (400px <= width <= 600px )  {
  // Styles for viewports between 400px and 600px.
}

Tính năng mà bạn đang kiểm thử, trong trường hợp này là width, nằm giữa hai giá trị.

Ngoài việc giúp truy vấn nội dung nghe nhìn ít dài dòng hơn, cú pháp mới còn có ưu điểm là độ chính xác. Các truy vấn min- và max- bao gồm các giá trị đã chỉ định, ví dụ: min-width: 400px kiểm thử chiều rộng từ 400px trở lên. Cú pháp mới giúp bạn diễn đạt rõ ràng hơn ý định của mình và tránh trường hợp có thể xảy ra xung đột truy vấn.

Để sử dụng cú pháp phạm vi mới trong khi tính đến các trình duyệt chưa triển khai cú pháp này, có một trình bổ trợ PostCSS sẽ ghi đè cú pháp mới thành cú pháp cũ trong các tệp định kiểu.