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

Không thể có 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 nghe nhìn, bạn không thể 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. 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 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ể đáp ứng một phần nhu cầu của mọi người. Nhà thiết kế có thể điều chỉnh bố cục để phù hợp với thiết bị của người dùng.

Xin lưu ý 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 có nhiều thay đổi 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 về nội dung nghe nhìn đã được 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ế cho phù hợp với nhiều yếu tố hơn chứ không chỉ kích thước màn hình.

Kích thước khung nhìn

Cho đến nay, các truy vấn đa phương tiện phổ biến nhất trên web là những truy vấn liên quan đến chiều rộng khung nhìn. Nhưng ngay cả ở đây, bạn cũng có thể 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 các kiểu bên dưới một chiều rộng nhất định hoặc bạn có thể sử dụng tính năng nội dung nghe nhìn min-width để áp dụng các 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 dùng min-width. Tôi áp dụng các kiểu bố cục theo cách cộng dồn. Tôi 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 có thêm chiều cao khung hiển thị, bạn có thể sử dụng min-height để giới thiệu thêm các quy tắc. Ví dụ: bạn có thể có một phần tử tiêu đề mà bạn muốn cố định vào đầu cửa sổ trình duyệt nếu có đủ khoảng trống 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 max-height cho nội dung nghe nhìn nếu muốn. Ở đây, tiêu đề được cố định theo mặc định, nhưng độ 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 nội dung nghe nhìn aspect-ratio cũng có 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ó quản lý. Nếu không cần mức độ kiểm soát chi tiết như vậy, thì tính năng orientation nội dung nghe nhìn có thể phù hợp hơn với nhu cầu của bạn. Biến này có thể có 2 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 nội dung nghe nhì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 có mật độ pixel khác nhau, được đo bằng dpi (số điểm ảnh trên mỗi inch). Bạn có thể điều chỉnh kiểu cho các mật độ điểm ảnh khác nhau bằng cách sử dụ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 dùng bất kỳ truy vấn nào về 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 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 đổi. Bạn có thể điều chỉnh những ả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ày của nội dung nghe nhìn 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 được 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 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ề việc tạo 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 những thuộc tính đó được gọi 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 lựa 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 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. 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 của màu xám, bạn có thể sử dụng tính năng nội dung nghe nhìn monochrome mà không có giá trị nào.

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

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

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

Đối với màn hình màu, bạn có thể viết các 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ả đều báo cáo thông tin chi tiết cụ thể về khả năng hiển thị 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 để 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 sự kết hợp giữa độ sáng tối đa, chiều sâu màu sắc và tỷ lệ tương phản của màn hình. 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ó 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 về nội dung nghe nhìn cũng có thể báo cáo loại cơ chế đầu vào được 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.

Cụm từ tìm kiếm theo lựa chọn ưu tiên của người dùng

Khi sử dụng CSS, bạn có thể cộng tác với người dùng để đảm bảo rằng họ có thể truy cập vào nội dung của bạn theo cách phù hợp với họ. Trong bài học này, bạn đã tìm hiểu cách áp dụng nhiều CSS dựa trên kích thước và các tính năng của thiết bị mà người dùng sử dụng. Tuy nhiên, bạn cũng có thể áp dụng các CSS khác nhau dựa trên chế độ cài đặt của người dùng.

Chế độ tối và chế độ sáng

Bạn có thể phản hồi lựa chọn ưu tiên của người dùng về giao diện sáng hoặc tối. Nhiều người dùng đặt chế độ này làm lựa chọn ưu tiên của hệ thống.

Đặt bảng phối màu cho các phần tử giao diện người dùng

Trình duyệt cung cấp các màu mặc định cho những thành phần như thanh cuộn và các phần tử biểu mẫu. Bạn có thể chỉ định dùng giao diện sáng cho những người có color-scheme: light hoặc giao diện tối cho những người có color-scheme: dark. Bạn cũng có thể chỉ định rằng trang hỗ trợ cả hai, bằng color-scheme: light dark. Bạn có thể đặt thuộc tính này trên phần tử :root hoặc html để đặt lược đồ cho toàn bộ trang hoặc bạn có thể ghi đè thuộc tính này cho các phần tử cụ thể.

Bạn cũng có thể đặt thẻ meta cho color-scheme để đặt lược đồ của trang trước khi tải kiểu. Nếu bạn đặt color-scheme: normal trên một phần tử trong trang, thì phần tử đó sẽ sử dụng giá trị color-scheme mà bạn đặt trong thẻ meta này.

<meta name="color-scheme" content="dark light">

prefers-color-scheme tính năng nội dung nghe nhìn

Bạn cũng có thể xác định các kiểu tuỳ chỉnh để phản hồi chủ đề màu sắc mà người dùng ưu tiên bằng một truy vấn nội dung nghe nhìn cho prefers-color-scheme.

light-dark

Nếu cho phép người dùng chọn giữa giao diện sáng và giao diện tối, bạn có thể thấy việc đặt từng màu trong một truy vấn nội dung nghe nhìn là quá dài dòng. light-dark() cho phép bạn chỉ định cả hai trong một thuộc tính duy nhất.

Để bật tính năng này, bạn cần đặt color-scheme: light dark trên phần tử hoặc một trong các phần tử tổ tiên của phần tử đó. Trước tiên, bạn đặt một màu để sử dụng ở chế độ sáng, sau đó đặt một màu để sử dụng ở chế độ tối.

h1{
  color: light-dark( var(--text-light), var(--text-dark));
}

Nếu người dùng đặt lựa chọn ưu tiên hệ thống là yêu cầu chế độ sáng, thì tiêu đề sẽ có màu đen. Nếu họ chọn chế độ tối, tiêu đề sẽ có màu trắng.

Lựa chọn ưu tiên về độ tương phản

Người dùng có thể thấy dễ đọc nội dung có độ tương phản cao hoặc thấp và có thể thiết lập hệ thống để ghi đè giao diện của bạn bằng giao diện phù hợp nhất với họ. Vai trò của bạn là đảm bảo trang web của bạn vẫn hoạt động tốt theo lựa chọn ưu tiên của họ.

Bạn có thể nhớ trong Cascade module rằng !important kiểu người dùng cục bộ có thể ghi đè các kiểu do trang web cung cấp. Điều này cho phép người dùng sử dụng những kiểu phù hợp hơn với họ.

Màu bắt buộc

Windows cung cấp "Giao diện có độ tương phản cao" mà người dùng có thể chọn để ghi đè giao diện trên một trang web. Đây thường là các giao diện có độ tương phản cao và có thể ở chế độ sáng hoặc tối. Trong CSS, chế độ này được gọi là màu bắt buộc và trong hầu hết trường hợp, trang web của bạn sẽ hoạt động như mong đợi ở chế độ này. Các nút, đường liên kết, dữ liệu đầu vào và nội dung khác sẽ sử dụng màu sắc của giao diện.

Đôi khi, bạn có thể cần điều chỉnh kiểu, chẳng hạn như nếu bạn đang sử dụng các phần tử theo cách không chuẩn. Bạn có thể sử dụng truy vấn nội dung nghe nhìn @media (forced-colors: active) để áp dụng các kiểu khi người dùng đã bật chế độ màu bắt buộc.

Trong một số trường hợp, kiểu của một trang web là yếu tố không thể thiếu để hiểu được nội dung của trang web đó, chẳng hạn như bộ chọn màu hoặc biểu đồ có khoá màu. Bạn có thể đặt forced-color-adjust: none; trên một phần tử để chọn không sử dụng chế độ màu bắt buộc. Hãy nhớ chỉ chọn không sử dụng trên các phần tử cụ thể và kiểm tra để đảm bảo nội dung vẫn truy cập được ở chế độ màu bắt buộc.

Độ tương phản cao

Một số người dùng cũng có thể đặt hệ thống của họ yêu cầu tăng độ tương phản. Bạn có thể điều chỉnh kiểu của mình để phản hồi bằng truy vấn nội dung nghe nhìn prefers-contrast: more.

Giảm chuyển động

Bạn có thể phản hồi lựa chọn ưu tiên của người dùng về chế độ chuyển động giảm bằng truy vấn nội dung nghe nhìn prefers-reduced-motion. Thuộc tính này thường được dùng để cung cấp các ảnh động thay thế nhằm tránh những chuyển động lớn có thể kích hoạt cơn động kinh, rối loạn tiền đình hoặc chứng đau nửa đầu nhạy cảm. Đọc thêm trong phần Những điều cần cân nhắc khi làm việc với ảnh động.

Lên nội dung

Người dùng có thể truy cập vào trang web của bạn khi JavaScript bị tắt và bạn có thể điều chỉnh CSS để họ vẫn có thể truy cập vào nội dung của bạn bằng truy vấn phương tiện scripting.

@media (scripting: none) {
  /* Styles when JavaScript is disabled*/
 }

@media (scripting: initial-only) {
  /* Styles when JavaScript is available only for an initial render, for example with a printed page or server side rendering */
}

@media (scripting: enabled) {
   /* Styles when Javascript is enabled */
}

Kiểm tra mức độ hiểu biết của bạn

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