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

Tổng hợp tất cả các cách mà các tính năng đa phương tiện giúp bạn tương tác với thiết bị và tùy chọn.

Thiết kế đáp ứng sẽ không thể thực hiện được nếu không có truy vấn phương tiện. Trước khi sử dụng truy vấn đa phương tiện, không có cách nào để biết mọi người đang 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 các thiết kế có chiều rộng cố định hoặc bố cục lỏng.

Tất cả đã thay đổi khi truy vấn nội dung nghe nhìn ra mắt. Lần đầu tiên, một nhà thiết kế có thể gặp gỡ mọi người được nửa chừng. Nhà thiết kế có thể điều chỉnh bố cục để thích ứng với thiết bị của người dùng.

Hãy nhớ rằng, truy vấn đa phương tiện bao gồm loại nội dung đa phương tiện không bắt buộc và tính năng nội dung đ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 trong những năm qua. Vẫn chỉ có bốn giá trị có thể sử dụng:

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

Mặt khác, các tính năng dành cho 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 bằng cách điều chỉnh thiết kế cho phù hợp với nhiều hơn so với chỉ kích thước màn hình.

Kích thước khung nhìn

Cho đến nay, các 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ó nhiều lựa chọn. Bạn có thể sử dụng tính năng nội dung nghe nhìn max-width để áp dụng kiểu dưới một chiều rộng nhất định, hoặc bạn có thể dùng tính năng nội dung nghe nhì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 sử dụng min-width. Tôi áp dụng kiểu bố cục theo cách bổ sung. Tôi giới thiệu 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 phù hợp với chiều cao. Bằng cách sử dụng min-height, bạn có thể giới thiệu thêm 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 dọc.

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

Tuy nhiên, bạn có thể sử dụng tính năng nghe nhìn max-height nếu muốn. Ở đây, tiêu đề được neo theo mặc định, nhưng trạng thái dí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 đ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 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 kiểu khác nhau cho nhiều tỷ lệ khung hình có thể nhanh chóng không phù hợp. Nếu bạn không cần mức độ kiểm soát chi tiết như vậy, 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. Hàm 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ụm từ "dọc" và "ngang" thường được dùng để đề cập đến hướng của thiết bị di độ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 ở chế độ 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 nhiều mật độ pixel bằng tính năng nội dung nghe nhìn resolution. Giống như aspect-ratio, resolution có 3 loại: 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 sử dụng bất kỳ truy vấn phương tiện resolution nào. 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.

Mặt khác, CSS là nơi bạn xác định ả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 đổi đó để thích ứng với nhiều tốc độ làm mới bằng tính năng đa phương tiệ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ụ: bạn 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 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 đã biết cách xác định 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 gọi là display và bạn có thể thiết lập giá trị fullscreen, standalone, minimum-ui hoặc browser. Tính năng đa phương tiện display-mode tương ứng cho phép bạn điều chỉnh kiểu cho phù hợp với những lựa chọn này.

Giả sử bạn đã cung cấp giá trị display 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 của họ, 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 cho thấy 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 màu sắc của một 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 sắc xám, thì bạn có thể sử dụng tính năng đ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ể 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 chỉ số này đều báo cáo thông tin chi tiết cụ thể về khả năng màu sắc của màn hình.

Trong ví dụ này, các giá trị màu sẽ cập nhật theo tính năng đa phương tiện dynamic-range. Tính năng này báo cáo 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. 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 của high sẽ được cung cấp một hệ màu khác bằng cách sử dụng hàm color() mới của CSS.

.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ữ liệu dùng để tương tác với trang web của bạn: hover, any-hover, pointer và any-pointer. Xem mô-đun về tương tác để biết thêm chi tiết.

Tuỳ chọn

Có nhiều truy vấn nội dung nghe nhìn cho phép bạn phản hồi 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ề giao diện và hỗ trợ tiếp cận để biết thêm thông tin.

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ể đặt phạm vi cho 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 thể hiện mong muố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

Nhiều tính năng đa phương tiện khác sắp ra mắt.

Các tính năng đa phương tiện forced-colors và inverted-colors sẽ báo cáo việc 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 prefers-reduced-data sẽ cho phép người dùng cho biết rằng họ đang sử dụng một đường kết nối có đo lượng dữ liệu, nhờ đó, 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 học phần tiếp theo và cũng là học phần 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 kiến thức

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