Tính năng đa phương tiện

Tóm tắt tất cả các cách mà các tính năng đa phương tiện cho phép bạn phản hồi các thiết bị và lựa chọn ưu tiên.

Không thể thiết kế thích ứng nếu không có truy vấn nội dung đa phương tiện. Trước khi có truy vấn nội dung đa phương tiện, bạn không thể biết loại thiết bị mà mọi người đang sử dụng để truy cập vào trang web của bạn. Các nhà thiết kế phải đưa ra giả định. Những giả định đó được mã hoá thành thiết kế có chiều rộng cố định hoặc bố cục linh hoạt.

Mọi thứ đã thay đổi khi truy vấn nội dung nghe nhìn ra đời. Đây là lần đầu tiên các nhà thiết kế có thể đáp ứng được nhu cầu của người dùng. Nhà thiết kế có thể điều chỉnh bố cục để phản hồi thiết bị của người dùng.

Hãy nhớ rằng truy vấn nội dung nghe nhìn bao gồm một loại nội dung nghe nhìn không bắt buộc và một tính năng nội dung nghe nhìn bắt buộc. Các loại nội dung nghe nhìn không thay đổi nhiều trong những năm qua. Vẫn chỉ có 4 giá trị có thể có:

@media all
@media screen
@media print
@media speech

Mặt khác, các tính năng đa phương tiện đã mở rộng đáng kể. Giờ đây, nhà thiết kế có thể đáp ứng nhu cầu của người dùng một cách toàn diện hơn, điều chỉnh thiết kế để phù hợp với nhiều yếu tố hơn là chỉ kích thước màn hình.

Browser Support

• 1
• 12
• 1
• 3

Source

Kích thước khung nhìn

Cho đến nay, các truy vấn nội dung đa phương tiện phổ biến nhất trên web là những truy vấn xử lý chiều rộng khung nhìn. Nhưng ngay cả ở đây, bạn vẫn có lựa chọn. Bạn có thể sử dụng tính năng nội dung đa phương tiện max-width để áp dụng kiểu bên dưới một chiều rộng nhất định hoặc sử dụng tính năng nội dung đa phương tiện min-width để áp dụng kiểu bên trên một chiều rộng nhất định.

main {
  display: grid;
  grid-template-columns: 2fr 1fr;
}
@media (max-width: 45em) {
  main {
    display: block;
  }
}

@media (min-width: 45em) {
  main {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

Cá nhân tôi thích sử dụng min-width. Tôi áp dụng các kiểu bố cục theo cách bổ sung. Tôi sẽ giới thiệu các quy tắc bố cục mới tại mỗi điểm ngắt thay vì huỷ các quy tắc trước đó.

Phương pháp cộng này cũng áp dụng cho chiều cao. Khi sử dụng min-height, bạn có thể đưa ra thêm các quy tắc khi có thêm chiều cao khung nhìn. Ví dụ: bạn có thể có một phần tử tiêu đề mà bạn muốn neo vào đầu cửa sổ trình duyệt nếu có đủ không gian theo chiều dọc.

@media (min-height: 30em) {
  header {
    position: fixed;
  }
}

Tuy nhiên, bạn có thể sử dụng tính năng nội dung nghe nhìn max-height nếu muốn. Ở đây, tiêu đề được neo theo mặc định, nhưng tính năng cố định sẽ bị xoá nếu không có đủ không gian dọc.

header {
  position: fixed;
}
@media (max-height: 30em) {
  header {
    position: static;
  }
}

Việc chọn giữa tiền tố min- và max- không chỉ áp dụng cho width và height. Tính năng nội dung nghe nhìn aspect-ratio cũng cung cấp lựa chọn tương tự. Thư viện này cũng cung cấp một phiên bản không có tiền tố nếu bạn muốn áp dụng các kiểu theo tỷ lệ chính xác giữa chiều rộng và chiều cao.

@media (min-aspect-ratio: 16/9) {
  // The ratio of width to height is at least 16 by 9.
}
@media (max-aspect-ratio: 16/9) {
  // The ratio of width to height is less than 16 by 9.
}
@media (aspect-ratio: 16/9) {
  // The ratio of width to height is exactly 16 by 9.
}

Việc cung cấp nhiều kiểu cho nhiều tỷ lệ khung hình có thể nhanh chóng trở nên khó kiểm soát. Nếu bạn không cần mức kiểm soát chi tiết như vậy, tính năng nội dung nghe nhìn orientation có thể phù hợp hơn với nhu cầu của bạn. Biến này có thể có hai giá trị: portrait hoặc landscape.

@media (orientation: portrait) {
  // The width is less than the height.
}
@media (orientation: landscape) {
  // The width is greater than the height.
}

Mặc dù các thuật ngữ "dọc" và "ngang" thường được dùng để chỉ hướng của thiết bị di động, nhưng tính năng đa phương tiện orientation không dành riêng cho thiết bị. Cửa sổ trình duyệt toàn màn hình trên một máy tính xách tay thông thường sẽ có giá trị orientation là landscape.

Màn hình

Các màn hình khác nhau có mật độ pixel khác nhau, được đo bằng dpi, điểm trên mỗi inch. Bạn có thể điều chỉnh kiểu cho nhiều mật độ điểm ảnh bằng tính năng nội dung nghe nhìn resolution. Giống như aspect-ratio, resolution có ba biến thể: tối thiểu, tối đa và chính xác.

@media (min-resolution: 300dpi) {
  // The display has a pixel density of at least 300 dots per inch.
}
@media (max-resolution: 300dpi) {
  // The display has a pixel density less than 300 dots per inch.
}
@media (resolution: 300dpi) {
  // The display has a pixel density of exactly 300 dots per inch.
}

Có thể bạn không bao giờ cần sử dụng truy vấn nội dung nghe nhìn resolution. Mật độ pixel thường chỉ là vấn đề đối với hình ảnh và hình ảnh thích ứng là một cách để xử lý mật độ pixel ngay trong HTML.

Mặt khác, CSS là nơi bạn xác định ảnh động và hiệu ứng chuyển đổi. Bạn có thể điều chỉnh các ảnh động và hiệu ứng chuyển đổi đó để phản hồi các tốc độ làm mới khác nhau bằng cách sử dụng tính năng nội dung nghe nhìn update. Tính năng nội dung nghe nhìn này báo cáo một trong ba giá trị: none, slow và fast.

Giá trị update là none có nghĩa là không có tốc độ làm mới. Ví dụ: không thể cập nhật trang đã in.

Giá trị update là slow có nghĩa là màn hình không thể làm mới nhanh. Màn hình mực điện tử là một ví dụ về màn hình có tốc độ làm mới chậm.

Giá trị update là fast có nghĩa là màn hình làm mới đủ nhanh để xử lý ảnh động và hiệu ứng chuyển đổi.

@media (update: fast) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

Không phải khía cạnh nào của màn hình cũng liên quan đến chức năng phần cứng. Trong mô-đun về giao diện, bạn đã thấy cách xác định các thuộc tính trong tệp tệp kê khai ứng dụng web. Một trong các thuộc tính đó có tên là display và bạn có thể đặt giá trị cho thuộc tính này là fullscreen, standalone, minimum-ui hoặc browser. Tính năng nội dung nghe nhìn display-mode tương ứng cho phép bạn điều chỉnh kiểu cho các tuỳ chọn này.

Giả sử bạn đã cung cấp giá trị display là standalone trong tệp kê khai ứng dụng web. Nếu ai đó thêm trang web của bạn vào màn hình chính, thì trang web đó sẽ khởi chạy mà không có giao diện trình duyệt nào. Bạn có thể quyết định hiển thị nút quay lại cho những người dùng đó.

button.back {
  display: none;
}
@media (display-mode: standalone) {
  button.back {
     display: inline;
  }
}

Màu

Có nhiều tính năng đa phương tiện để truy vấn khả năng hiển thị màu của thiết bị. Nếu muốn điều chỉnh kiểu cho bất kỳ màn hình nào chỉ xuất ra các sắc thái màu xám, bạn có thể sử dụng tính năng nội dung đa phương tiện monochrome mà không cần giá trị nào.

@media (monochrome) {
  body {
    color: black;
    background-color: white;
  }
}

Có một tính năng nội dung nghe nhìn color tương ứng.

@media (color) {
  body {
    color: maroon;
    background-color: linen;
  }
}

Đối với màn hình màu, bạn có thể viết truy vấn bằng các tính năng đa phương tiện color-gamut, color-index hoặc dynamic-range. Tất cả các thông số này đều báo cáo thông tin chi tiết cụ thể về khả năng hiển thị màu của màn hình.

Trong ví dụ này, các giá trị màu sẽ cập nhật để phản hồi tính năng nội dung nghe nhìn dynamic-range. Tính năng này báo cáo kết hợp độ sáng tối đa, độ sâu màu và tỷ lệ tương phản của màn hình. Các giá trị có thể là standard hoặc high. Màn hình có độ phân giải cao báo cáo giá trị dynamic-range là high sẽ được cung cấp một không gian màu khác bằng cách sử dụng hàm color() CSS mới.

.neon-red {
  color: hsl(355 100% 95%);
}
@media (dynamic-range: high) {
  .neon-red {
    color: color(display-p3 1 0 0);
  }
}

Tương tác

Các tính năng đa phương tiện cũng có thể báo cáo loại cơ chế nhập dùng để tương tác với trang web của bạn: hover, any-hover, pointer và any-pointer. Hãy xem mô-đun về tương tác để biết thêm thông tin chi tiết.

Tuỳ chọn

Có một loạt truy vấn nội dung nghe nhìn cho phép bạn phản hồi lựa chọn ưu tiên của người dùng: prefers-color-scheme, prefers-contrast và prefers-reduced-motion. Hãy xem các mô-đun về giao diện và khả năng hỗ trợ tiếp cận để biết thêm thông tin chi tiết.

Bạn có thể kết hợp các tính năng nội dung nghe nhìn trong một truy vấn nội dung nghe nhìn. Bạn có thể xác định phạm vi cho các kiểu ảnh động để chỉ áp dụng các kiểu đó nếu thiết bị có tốc độ làm mới nhanh và người dùng không bày tỏ ý định ưu tiên giảm chuyển động.

@media (update: fast) and (prefers-reduced-motion: no-preference) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

Các tính năng khác về nội dung nghe nhìn

Chúng tôi sẽ ra mắt thêm nhiều tính năng đa phương tiện khác.

Các tính năng đa phương tiện forced-colors và inverted-colors sẽ báo cáo xem thiết bị có đang sử dụng bảng màu bị hạn chế hay bảng màu đảo ngược hay không.

Tính năng đa phương tiện scripting sẽ cho phép bạn điều chỉnh CSS dựa trên khả năng sử dụng JavaScript.

Tính năng nội dung nghe nhìn có tên là prefers-reduced-data sẽ cho phép người dùng chỉ định rằng họ đang sử dụng kết nối có đo lượng dữ liệu để bạn có thể gửi các thành phần có kích thước nhỏ hơn hoặc ít hơn.

Các đề xuất khác vẫn đang được xây dựng. Trong mô-đun tiếp theo và cuối cùng, bạn sẽ tìm hiểu về đề xuất cho một tính năng đa phương tiện xử lý nhiều cấu hình màn hình.

Kiểm tra mức độ hiểu biết

Kiểm tra kiến thức của bạn về các tính năng đa phương tiện

Truy vấn nội dung nghe nhìn có thể kiểm tra một thiết bị ở chiều rộng cụ thể như @media (width: 1024px) không?

Đúng

Bạn chỉ có thể thực hiện chiều rộng cụ thể bằng cách đồng thời kiểm tra chiều rộng trên 1023px và dưới 1025px.

Sai

min-width và max-width là những gì có sẵn.

Truy vấn nội dung nghe nhìn có thể kiểm tra một thiết bị tại một aspect-ratio cụ thể như @media (aspect-ratio: 4/3) không?

Đúng

Riêng đối với tỷ lệ khung hình, bạn chỉ có thể so khớp một tỷ lệ.

Sai

Tuỳ chọn này có tồn tại cho aspect-ratio.

Truy vấn nội dung đa phương tiện về màu nào là hợp lệ?

@media (color)

Khớp với mọi thiết bị có màu.

@media (monochrome)

Khớp với mọi thiết bị không có khả năng hiển thị màu.

@media (color-gamut: srgb)

Khớp với các thiết bị có khả năng hiển thị màu sRGB.

@media (min-color-index: 15000)

Khớp với các thiết bị có ít nhất 15.000 màu.

@media (dynamic-range: high)

Khớp với các thiết bị có thể hiển thị dải màu HD.

Truy vấn nội dung nghe nhìn theo lựa chọn ưu tiên của người dùng nào sau đây là hợp lệ?

@media (prefers-color-scheme: dark)

Khớp khi người dùng đặt hệ điều hành của họ thành chế độ tối.

@media (prefers-colors: high-definition)

Không thực.

@media (prefers-reduced-motion: reduce)

Khớp khi người dùng đặt hệ điều hành để giảm chuyển động.

@media (prefers-contrast: more)

Khớp khi người dùng đặt hệ điều hành của họ ở độ tương phản cao hơn.

@media (prefers-site-speed: fast)

Không thực.