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

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

Không thể thiết kế đáp ứng nếu không có truy vấn phương tiện. Trước khi truy vấn nội dung nghe nhìn, không có cách nào để biết mọi người sử dụng loại thiết bị nào để truy cập vào trang web của bạn. Các nhà thiết kế đã phải đưa ra các 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. Lần đầu tiên, các nhà thiết kế có thể gặp gỡ mọi người giữa chừng. Các nhà thiết kế có thể điều chỉnh bố cục của mình để đáp ứng các thiết bị của người dùng.

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

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

Mặt khác, các tính năng nội dung đa phương tiện đã mở rộng đáng kể. Giờ đây, các nhà thiết kế có thể tiếp cận người dùng hơn một nửa, điều chỉnh các thiết kế cho phù hợp hơn nhiều so với chỉ kích thước màn hình.

Phương diện khung nhìn

Cho đến nay, những truy vấn 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 đa phương tiện max-width để áp dụng các kiểu dưới một chiều rộng nhất định, hoặc bạn có thể sử dụng tính năng đa phương tiện min-width để áp dụng các kiểu 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 dùng min-width. Tôi áp dụng kiểu bố cục có phần bổ sung. Tôi đưa ra 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 bổ sung này cũng áp dụng cho chiều cao. Bằng cách sử dụng min-height, bạn có thể đưa ra nhiều quy tắc hơn khi có thêm chiều cao khung nhìn. Ví dụ: có thể bạn 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 đa phương tiện max-height nếu muốn. Ở đây, tiêu đề được cố định theo mặc định, nhưng tiêu đề sẽ bị xoá nếu không có đủ không gian theo chiều dọc.

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

Việc chọn giữa các tiền tố min- và max- không chỉ áp dụng cho width và height. Tính năng nội dung đa phương tiện aspect-ratio cũng cung cấp lựa chọn tương tự. Lớp này cũng cung cấp phiên bản không có tiền tố nếu bạn muốn áp dụng kiểu có 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 các tỷ lệ khung hình khác nhau có thể nhanh chóng không còn phù hợp. Nếu bạn không cần mức độ kiểm soát chi tiết, tính năng đa phương tiện orientation có thể phù hợp hơn với nhu cầu của bạn. Thuộc tính 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 nhất để chỉ hướng của các 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á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, số điểm trên mỗi inch. Bạn có thể điều chỉnh kiểu cho các mật độ pixel khác nhau bằng tính năng nội dung nghe nhìn resolution. Giống như aspect-ratio, resolution có 3 biến: 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.
}

Bạn có thể không bao giờ cần dùng resolution truy vấn nội dung nghe nhìn. 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 trực tiếp trong HTML.

Trong khi đó, CSS là nơi bạn xác định các ảnh động và hiệu ứng chuyển tiếp. Bạn có thể điều chỉnh các ảnh động và hiệu ứng chuyển tiếp đó để phản hồi các tốc độ làm mới khác nhau bằng tính năng nội dung nghe nhìn update. Tính năng đa phương tiệ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 mộ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 của 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 mọi khía cạnh của màn hình đều liên quan đến khả năng phần cứng. Trong mô-đun về giao diện, bạn đã xem 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ể gán giá trị cho fullscreen, standalone, minimum-ui hoặc browser. Tính năng nội dung nghe nhìn display-mode tương ứng giúp bạn điều chỉnh kiểu của mình cho phù hợp với các lựa chọn khác nhau 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 có người thêm trang web của bạn vào màn hình chính, 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 cho người dùng thấy nút quay lại.

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 tính năng 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ỉ có 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 bất kỳ giá trị nào.

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

Có tính năng đa phương tiệ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ể ghi các truy vấn bằng các tính năng liên quan đến nội dung đa phương tiện color-gamut, color-index hoặc dynamic-range. Tất cả đề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 cập nhật để phản hồi tính năng nội dung đa phương tiện dynamic-range. Tính năng này báo cáo sự kết hợp giữa độ sáng, độ sâu màu và tỷ lệ tương phản tối đa của màn hình. Giá trị có thể là standard hoặc high. Một màn hình có độ phân giải cao báo cáo giá trị dynamic-range là high sẽ được cấp một hệ 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ế đầu vào 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ề hoạt động tương tác để biết thêm thông tin chi tiết.

Tuỳ chọn

Có nhiều truy vấn về nội dung nghe nhìn cho phép bạn đáp ứng các 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ề chủ đề và 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 đa phương tiện trong một truy vấn đa phương tiện. Bạn có thể xác định phạm vi các kiểu ảnh động để các kiểu đó chỉ được áp dụng nếu thiết bị có tốc độ làm mới nhanh và người dùng chưa bày tỏ sự ư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 đa phương tiện khác

Sắp có thêm các tính năng nghe nhìn khác.

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

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.

Một tính năng đa phương tiệ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 nhỏ hơn hoặc ít hơn.

Các đề xuất khác vẫn đang được xây dựng. Trong học phần 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ý các cấu hình màn hình khác nhau.

Kiểm tra kiến thức

Kiểm tra kiến thức về các tính năng liên quan đến nội dung đa phương tiện