Xây dựng giao diện thích ứng với người dùng bằng các truy vấn nội dung nghe nhìn ưu tiên

1. Trước khi bắt đầu

Ngày nay, người dùng đã chỉ ra nhiều lựa chọn ưu tiên trên thiết bị của họ. Họ muốn hệ điều hành và các ứng dụng có giao diện và cảm giác giống như của họ. Giao diện thích ứng với người dùng là những giao diện sẵn sàng sử dụng các lựa chọn ưu tiên này để nâng cao trải nghiệm người dùng, giúp người dùng cảm thấy thoải mái và cảm thấy như giao diện của riêng mình. Nếu được thực hiện đúng cách, người dùng có thể không bao giờ biết rằng trải nghiệm người dùng đang hoặc đã thích ứng.

Lựa chọn ưu tiên của người dùng

Lựa chọn phần cứng thiết bị là một lựa chọn ưu tiên, hệ điều hành là một lựa chọn, màu sắc của ứng dụng và hệ điều hành là lựa chọn ưu tiên, còn ngôn ngữ tài liệu của ứng dụng và hệ điều hành là lựa chọn ưu tiên. Số lượng lựa chọn ưu tiên của người dùng dường như chỉ tăng lên. Một trang web không thể truy cập vào mọi thứ và vì lý do chính đáng.

Sau đây là một số ví dụ về lựa chọn ưu tiên của người dùng mà CSS có thể sử dụng:

Kích thước khung hiển thị của thiết bị
Hướng của thiết bị (dọc | ngang)
Cỡ chữ
Trực tuyến / ngoại tuyến
Chất lượng mạng
Bảng phối màu (sáng | tối)
Ảnh động trên giao diện (bật | giảm)
Chất lượng đầu vào (chuột | cảm ứng | bút cảm ứng)
Hướng tài liệu và chế độ viết (từ trái sang phải, từ trên xuống dưới, v.v.)
Chế độ hiển thị (toàn màn hình | độc lập | giao diện người dùng tối giản | trình duyệt)

Dưới đây là một số ví dụ về lựa chọn ưu tiên của người dùng sắp ra mắt trên CSS:

Giảm dữ liệu / chế độ thu gọn
Dải màu
Độ tương phản (giảm | tăng | giảm)
Màu sắc (buộc màu sắc của người dùng vào trang)
Chế độ âm thanh xung quanh (bật | giảm)

Truy vấn về nội dung nghe nhìn

CSS và web cho phép điều chỉnh và phản hồi thông qua truy vấn phương tiện, một điều kiện khai báo chứa một bộ kiểu nếu điều kiện đó là đúng. Điều kiện phổ biến nhất là điều kiện về kích thước khung hiển thị của thiết bị: nếu kích thước nhỏ hơn 800 pixel, thì đây là một số kiểu phù hợp hơn cho trường hợp đó.

Thích ứng với người dùng

Giao diện không thích ứng là giao diện không thay đổi khi người dùng truy cập, về cơ bản là mang đến một trải nghiệm cho mọi người mà không có khả năng điều chỉnh. Một giao diện thích ứng với người dùng có thể có 5 kiểu xuất hiện và phong cách khác nhau cho 5 người dùng khác nhau. Chức năng của chế độ này không thay đổi, nhưng người dùng sẽ cảm thấy giao diện đẹp mắt hơn và dễ sử dụng hơn khi có thể điều chỉnh giao diện người dùng.

Điều kiện tiên quyết

Kiến thức về HTML và CSS
Có kiến thức về các công cụ cho nhà phát triển, chẳng hạn như Công cụ cho nhà phát triển Chrome

Sản phẩm bạn sẽ tạo ra

Trong lớp học lập trình này, bạn sẽ tạo một biểu mẫu thích ứng với người dùng, phù hợp với những điều sau:

Lựa chọn ưu tiên về màu của hệ thống bằng cách cung cấp bảng phối màu sáng và tối cho các chế độ kiểm soát biểu mẫu và các phần tử giao diện người dùng xung quanh
Lựa chọn ưu tiên về chuyển động của hệ thống bằng cách cung cấp nhiều loại ảnh động
Khung hiển thị thiết bị nhỏ và lớn để mang đến trải nghiệm trên thiết bị di động và máy tính
Nhiều loại đầu vào như bàn phím, trình đọc màn hình, thao tác chạm và chuột
Mọi ngôn ngữ và chế độ đọc/viết

Kiến thức bạn sẽ học được

Trong lớp học lập trình này, bạn sẽ tìm hiểu về các tính năng hiện đại của web để giúp bạn tạo một biểu mẫu thích ứng với người dùng. Bạn sẽ tìm hiểu cách:

Tạo giao diện sáng và tối
Tạo biểu mẫu có ảnh động và hỗ trợ tiếp cận
Bố cục biểu mẫu thích ứng
Sử dụng các đơn vị tương đối và thuộc tính logic

Lớp học lập trình này tập trung vào giao diện thích ứng với người dùng. Các khái niệm và khối mã không liên quan được tinh chỉnh và cung cấp cho bạn, chỉ cần sao chép và dán.

Bạn cần có

Google Chrome 89 trở lên hoặc trình duyệt bạn muốn dùng

2. Bắt đầu thiết lập

Lấy mã nguồn

Mọi thứ bạn cần cho dự án này đều nằm trong kho lưu trữ GitHub. Để bắt đầu, bạn cần lấy mã và mở mã đó trong môi trường phát triển mà bạn yêu thích. Ngoài ra, bạn có thể phát triển nhánh Codepen này và làm việc từ đó.

Nên dùng: Sử dụng Codepen

Mở một thẻ trình duyệt mới.
Truy cập vào https://codepen.io/argyleink/pen/abBMeeq.
Nếu bạn chưa có tài khoản, hãy tạo một tài khoản để lưu công việc.
Nhấp vào Fork (Phân nhánh).

Cách khác: Làm việc tại địa phương

Nếu muốn tải mã xuống và làm việc cục bộ, bạn cần có Node.js phiên bản 12 trở lên, đồng thời thiết lập và sẵn sàng sử dụng trình soạn thảo mã.

Sử dụng Git

Truy cập vào https://github.com/argyleink/Google-IO-2021-Workshop_User-Adaptive-Interfaces
Sao chép kho lưu trữ vào một thư mục.
Lưu ý rằng nhánh mặc định là beginning.

Sử dụng tệp

Giải nén tệp zip đã tải xuống vào một thư mục.

Chạy dự án

Sử dụng thư mục dự án được thiết lập ở một trong các bước trên, sau đó:

Chạy npm install để cài đặt các phần phụ thuộc cần thiết để chạy máy chủ.
Chạy npm start để khởi động máy chủ trên cổng 3000.
Mở một thẻ trình duyệt mới.
Truy cập vào http://localhost:3000.

Giới thiệu về HTML

Bài học này sẽ đề cập đến các khía cạnh của HTML được dùng để hỗ trợ tính tương tác thích ứng với người dùng. Hội thảo này tập trung cụ thể vào CSS. Bạn nên xem xét HTML được cung cấp nếu mới bắt đầu tạo biểu mẫu hoặc trang web. Lựa chọn phần tử HTML có thể rất quan trọng khi nói đến khả năng tiếp cận và bố cục.

Khi bạn đã sẵn sàng bắt đầu, đây là cấu trúc cơ bản mà bạn sẽ chuyển đổi thành trải nghiệm người dùng linh hoạt và thích ứng.

3. Lượt tương tác thích ứng

Nhánh Git: beginning

Khi kết thúc phần này, biểu mẫu cài đặt của bạn sẽ thích ứng với:

Tay cầm chơi game + bàn phím
Chuột + cảm ứng
Trình đọc màn hình hoặc công nghệ hỗ trợ tương tự

Thuộc tính cho HTML

HTML có trong mã nguồn là một điểm xuất phát tuyệt vời vì các phần tử ngữ nghĩa giúp nhóm, sắp xếp và gắn nhãn cho dữ liệu đầu vào của biểu mẫu đã được chọn.

Biểu mẫu thường là một điểm tương tác chính đối với doanh nghiệp, vì vậy, điều quan trọng là biểu mẫu có thể thích ứng với nhiều loại thông tin đầu vào mà web có thể hỗ trợ. Ví dụ: bạn nên có một biểu mẫu có khả năng hữu dụng trên thiết bị di động bằng thao tác chạm. Trong phần này, trước khi bố cục và tạo kiểu, bạn phải đảm bảo khả năng sử dụng của tính năng nhập thích ứng.

Nhóm dữ liệu đầu vào

Phần tử <fieldset> trong HTML dùng để nhóm các thông tin đầu vào và chế độ kiểm soát tương tự nhau. Trong biểu mẫu, bạn có 2 nhóm, một nhóm cho âm lượng và một nhóm cho thông báo. Điều này rất quan trọng đối với trải nghiệm người dùng vì người dùng có thể bỏ qua toàn bộ các phần.

Sắp xếp các phần tử

Thứ tự của các phần tử được cung cấp theo thứ tự hợp lý. Điều này rất quan trọng đối với trải nghiệm người dùng, vì vậy, thứ tự trải nghiệm hình ảnh phải giống nhau hoặc tương tự đối với các công nghệ tay cầm chơi game, bàn phím hoặc trình đọc màn hình.

Tương tác bằng bàn phím

Người dùng web đã quen với việc di chuyển qua các biểu mẫu bằng phím tab. May mắn là trình duyệt sẽ xử lý việc này nếu bạn cung cấp các phần tử HTML dự kiến. Việc sử dụng các phần tử như <button>, <input>, <h2> và <label> sẽ tự động trở thành đích đến của bàn phím hoặc trình đọc màn hình.

Video trên minh hoạ cách dùng phím Tab và các mũi tên để di chuyển trong giao diện và thực hiện các thay đổi. Mặc dù đường viền màu xanh dương rất sát các phần tử đầu vào, nhưng hãy thêm các kiểu sau để hoạt động tương tác này có thêm một chút khoảng trống.

style.css

input {
  outline-offset: 5px;
}

Những việc nên thử

Xem xét các phần tử HTML được dùng trong index.html.
Nhấp vào trang minh hoạ trong trình duyệt.
Nhấn phím tab và phím shift+tab để di chuyển tiêu điểm phần tử trong biểu mẫu.
Sử dụng bàn phím để thay đổi giá trị của thanh trượt và hộp đánh dấu.
Kết nối tay cầm chơi game Bluetooth và di chuyển tiêu điểm phần tử thông qua biểu mẫu.

Tương tác bằng chuột

Người dùng web đã quen với việc tương tác với các biểu mẫu bằng chuột. Hãy thử dùng chuột trên biểu mẫu. Thanh trượt và hộp đánh dấu hoạt động, nhưng bạn có thể làm tốt hơn. Những hộp đánh dấu đó khá nhỏ để người dùng nhấp bằng chuột.

Bạn có thấy hai tính năng trải nghiệm người dùng để kết nối nhãn và dữ liệu đầu vào của nhãn không?

Tính năng đầu tiên là có các lựa chọn để tương tác và nhãn này dễ dàng nhắm đến hơn đối với chuột so với một hình vuông nhỏ.

Tính năng thứ hai là biết chính xác nhãn dành cho thông tin đầu vào nào. Hiện tại, nếu không có CSS, bạn sẽ khó xác định nhãn nào dành cho hộp đánh dấu nào, trừ phi bạn cung cấp một số thuộc tính.

Mối liên kết rõ ràng này cũng cải thiện trải nghiệm cho trình đọc màn hình (sẽ được đề cập trong phần tiếp theo).

Không liên kết: không có thuộc tính nào kết nối các phần tử

<input type="checkbox">
<label>...</label>

Được liên kết: các thuộc tính kết nối các phần tử

<input type="checkbox" id="voice-notifications" name="voice-notifications">
<label for="voice-notifications">...</label>

HTML được cung cấp đã phân bổ tất cả các đầu vào và nhãn. Bạn nên tìm hiểu thêm nếu đây là một khái niệm mới đối với bạn.

Những việc nên thử

Di chuột qua một nhãn và chú ý đến phần đánh dấu hộp đánh dấu.
Khám phá một phần tử nhãn bằng Công cụ cho nhà phát triển Chrome để hình dung vùng có thể nhấp để chọn hộp đánh dấu.

Công nghệ hỗ trợ có thể tương tác với biểu mẫu này và chỉ cần một vài thuộc tính HTML, bạn có thể mang đến trải nghiệm mượt mà hơn cho người dùng.

Đối với những người dùng điều hướng biểu mẫu hiện tại bằng trình đọc màn hình trong Chrome, có một điểm dừng không cần thiết tại phần tử <picture> (không dành riêng cho Chrome). Người dùng trình đọc màn hình có thể đang sử dụng trình đọc màn hình do bị suy giảm thị lực, vì vậy, việc dừng ở một bức ảnh không hữu ích. Bạn có thể ẩn các phần tử khỏi trình đọc màn hình bằng một thuộc tính.

index.html

<picture aria-hidden="true">

Giờ đây, trình đọc màn hình sẽ bỏ qua phần tử chỉ mang tính trực quan.

Phần tử thanh trượt input[type="range"] có một thuộc tính ARIA đặc biệt: aria-labelledby="media-volume". Điều này cung cấp hướng dẫn đặc biệt để trình đọc màn hình sử dụng nhằm nâng cao trải nghiệm người dùng.

Những việc nên thử

Sử dụng công nghệ trình đọc màn hình của hệ điều hành để di chuyển tiêu điểm qua biểu mẫu.
Tải xuống và dùng thử một số phần mềm trình đọc màn hình trên biểu mẫu.

4. Bố cục thích ứng (Adaptive Layouts)

Nhánh Git: layouts

Khi kết thúc phần này, trang cài đặt sẽ:

Tạo một hệ thống khoảng cách bằng các thuộc tính tuỳ chỉnh và đơn vị tương đối của người dùng
Viết CSS Grid để căn chỉnh và tạo khoảng cách linh hoạt, thích ứng
Sử dụng thuộc tính logic cho bố cục thích ứng trên phạm vi quốc tế
Viết truy vấn nội dung nghe nhìn để điều chỉnh giữa bố cục thu gọn và bố cục rộng rãi

Khoảng cách

Để có bố cục đẹp, bạn chỉ nên dùng một số ít lựa chọn giãn cách. Điều này giúp nội dung có sự hài hoà và phù hợp một cách tự nhiên.

Thuộc tính tuỳ chỉnh

Hội thảo này dựa trên một bộ gồm 7 kích thước thuộc tính tuỳ chỉnh.

Đặt các ảnh này ở đầu style.css:

style.css

:root {
  --space-xxs: .25rem;
  --space-xs:  .5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-xxl: 6rem;
}

Tên này gần với cách mà mọi người sẽ dùng để mô tả không gian. Bạn cũng chỉ sử dụng các đơn vị rem cho kích thước đơn vị nguyên vẹn dễ đọc, thích ứng và ghi nhớ lựa chọn ưu tiên của người dùng.

Kiểu trang

Tiếp theo, bạn cần đặt một số kiểu tài liệu, xoá lề khỏi các phần tử và đặt phông chữ thành một phông chữ sans-serif đẹp.

Thêm nội dung sau vào style.css:

style.css

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  block-size: 100%;
}

body {
  min-block-size: 100%;  
  padding-block-start: var(--space-xs);
  padding-block-end: var(--space-xs);
}

Đó là lần đầu tiên bạn sử dụng các thuộc tính tuỳ chỉnh về khoảng cách! Đây là điểm bắt đầu cho hành trình khám phá vũ trụ của bạn.

Kiểu chữ

Phông chữ cho bố cục này là thích ứng. Từ khoá system-ui sẽ sử dụng bất kỳ phông chữ giao diện nào mà hệ điều hành của người dùng cho là tối ưu.

body {
  font-family: system-ui, sans-serif;
}

h1,h2,h3 { 
  font-weight: 500;
}

small {
  line-height: 1.5;
}

Các kiểu cho h1, h2 và h3 là kiểu nhỏ và mang tính phong cách. Tuy nhiên, phần tử small cần thêm line-height khi văn bản xuống dòng. Nếu không, các phần tử sẽ quá sát nhau.

Thuộc tính logic

Lưu ý rằng padding trên body đang sử dụng các thuộc tính logic (block-start, block-end) để chỉ định phía. Các thuộc tính logic sẽ được sử dụng rộng rãi trong phần còn lại của lớp học lập trình. Giống như đơn vị rem, đơn vị này cũng thích ứng với người dùng. Bạn có thể dịch bố cục này sang một ngôn ngữ khác và đặt thành hướng viết và hướng tài liệu tự nhiên mà người dùng quen thuộc bằng ngôn ngữ mẹ đẻ của họ. Các thuộc tính logic hỗ trợ tính năng này chỉ với một định nghĩa về khoảng cách, hướng hoặc căn chỉnh.

Lưới và flexbox đã là tương đối theo luồng, nghĩa là các kiểu được viết cho một ngôn ngữ sẽ mang tính ngữ cảnh và được áp dụng một cách thích hợp cho các ngôn ngữ khác. Tính năng thích ứng hướng; nội dung sẽ xuất hiện theo hướng của tài liệu.

Các thuộc tính logic giúp bạn tiếp cận nhiều người dùng hơn mà không cần viết nhiều kiểu.

Bố cục lưới CSS

Thuộc tính grid CSS là một công cụ bố cục mạnh mẽ với nhiều tính năng để giải quyết các tác vụ phức tạp. Bạn sẽ tạo một vài bố cục lưới đơn giản và một bố cục phức tạp. Bạn cũng sẽ làm việc từ ngoài vào trong, từ bố cục vĩ mô đến bố cục vi mô. Các thuộc tính tuỳ chỉnh về khoảng cách sẽ trở nên quan trọng không chỉ với giá trị khoảng đệm hoặc lề mà còn với kích thước cột, bán kính đường viền, v.v.

Sau đây là ảnh chụp màn hình của Chrome DevTools phủ lên từng bố cục lưới CSS tại một thời điểm:

Hãy làm theo bằng cách thêm từng kiểu sau đây vào style.css:

<main>

main {
  display: grid;
  gap: var(--space-xl);
  place-content: center;
  padding: var(--space-sm);
}

Theo mặc định, Lưới sẽ đặt mỗi phần tử con vào hàng riêng, điều này rất phù hợp để xếp chồng các phần tử. Ngoài ra, bạn còn có thêm lợi ích khi sử dụng gap. Trước đó, bạn đã đặt margin: 0 cho tất cả các phần tử bằng bộ chọn *. Giờ đây, điều này rất quan trọng khi bạn sử dụng gap cho khoảng cách. Khoảng trống không chỉ là một vị trí duy nhất để quản lý khoảng trống trong một vùng chứa mà còn là luồng tương đối của vùng chứa đó.

<form>

form {
  max-width: 89vw;
  display: grid;
  gap: var(--space-xl) var(--space-xxl);
  align-items: flex-start;
  grid-template-columns: 
    repeat(auto-fit, minmax(min(10ch, 100%), 35ch));
}

Đây là bố cục lưới phức tạp nhất trong thiết kế, nhưng lại chiếm phần thú vị nhất trong khía cạnh thích ứng:

max-width đang cung cấp một giá trị để thuật toán bố cục sử dụng khi quyết định kích thước tối đa của bố cục.
gap đang sử dụng các thuộc tính tuỳ chỉnh và truyền một row-gap khác với column-gap.
align-items được đặt thành flex-start để không kéo dài chiều cao của mục.
grid-template-columns có một số cú pháp phức tạp, nhưng mục tiêu là ngắn gọn; giữ cho các cột 35ch có chiều rộng và không bao giờ nhỏ hơn 10ch, đồng thời đặt mọi thứ vào các cột nếu có chỗ, nếu không thì các hàng cũng được.

Thử đổi kích thước trình duyệt. Xem biểu mẫu thu gọn thành các hàng trong một khung nhìn nhỏ, nhưng sẽ chuyển sang các cột mới nếu có chỗ, thích ứng mà không cần truy vấn nội dung nghe nhìn. Chiến lược này về các kiểu thích ứng không có truy vấn nội dung nghe nhìn đặc biệt hữu ích cho các bố cục dựa trên thành phần hoặc nội dung.

<section>

section {
  display: grid;
  gap: var(--space-md);
}

Mỗi phần phải là một lưới gồm các hàng có khoảng cách trung bình giữa các phần tử con.

header {
  display: grid;
  gap: var(--space-xxs);
}

Mỗi tiêu đề phải là một lưới gồm các hàng có khoảng cách cực kỳ nhỏ giữa các phần tử con.

<fieldset>

fieldset {
  padding: 0;
  display: grid;
  gap: 1px;
  border-radius: var(--space-sm);
  overflow: hidden;
}

Bố cục này chịu trách nhiệm tạo giao diện giống như thẻ và nhóm các thành phần đầu vào với nhau. overflow: hidden và gap: 1px sẽ trở nên rõ ràng khi bạn thêm màu ở phần tiếp theo.

.fieldset-item

.fieldset-item {
  display: grid;
  grid-template-columns: var(--space-lg) 1fr;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
}

Bố cục này chịu trách nhiệm căn giữa biểu tượng và hộp đánh dấu với các nhãn và chế độ điều khiển được liên kết. Cột đầu tiên của mẫu lưới, var(--space-lg), tạo một cột rộng hơn biểu tượng, vì vậy, một phần tử con sẽ có vị trí để được căn giữa.

Bố cục này minh hoạ số lượng quyết định thiết kế đã được đưa ra trong các thuộc tính tuỳ chỉnh. Khoảng đệm, khoảng trống và cột đều được định cỡ trong sự hài hoà của hệ thống bằng cách sử dụng các giá trị mà bạn đã xác định.

.fieldset-item <picture>

.fieldset-item > picture {
  block-size: var(--space-xl);
  inline-size: var(--space-xl);
  clip-path: circle(50%);
  display: inline-grid;
  place-content: center;
}

Bố cục này chịu trách nhiệm về các chế độ cài đặt, kích thước của vòng tròn biểu tượng, tạo hình tròn và căn giữa hình ảnh trong đó.

<picture> và sự căn chỉnh [hộp đánh dấu]

.fieldset-item > :is(picture, input[type="checkbox"]) {
  place-self: center;
}

Bố cục này tách biệt việc căn giữa với các phần tử hình ảnh và hộp đánh dấu bằng cách sử dụng :is bộ chọn giả.

Thay thế bộ chọn picture > svg bằng .fieldset-item svg như sau:

.fieldset-item <svg>

.fieldset-item svg {
  block-size: var(--space-md);
}

Thao tác này đặt kích thước biểu tượng svg thành một giá trị trong hệ thống kích thước.

.sm-stack

.sm-stack {
  display: grid;
  gap: var(--space-xs);
}

Lớp tiện ích này dành cho các phần tử nhãn hộp đánh dấu để tạo khoảng cách cho văn bản trợ giúp của hộp đánh dấu.

input[type="checkbox"]

input[type="checkbox"] {
  inline-size: var(--space-sm);
  block-size: var(--space-sm);
}

Các kiểu này tăng kích thước của hộp đánh dấu bằng cách sử dụng các giá trị trong bộ khoảng cách của chúng tôi.

Những việc nên thử

Mở Công cụ cho nhà phát triển Chrome và tìm huy hiệu Lưới trên HTML trong bảng Phần tử. Nhấp vào các biểu tượng này để bật công cụ gỡ lỗi.
Mở Công cụ cho nhà phát triển Chrome rồi di chuột lên một khoảng trống trong ngăn Kiểu.
Mở Công cụ cho nhà phát triển Chrome, chuyển đến ngăn Kiểu rồi chuyển từ Kiểu sang Bố cục. Khám phá khu vực này bằng cách bật/tắt chế độ cài đặt và bật bố cục.

Truy vấn về nội dung nghe nhìn

CSS sau đây điều chỉnh các kiểu dựa trên kích thước và hướng của khung hiển thị với mục đích điều chỉnh khoảng cách hoặc bố cục cho phù hợp với bối cảnh khung hiển thị.

<main>

@media (min-width: 540px) {
  main {
    padding: var(--space-lg);
  }
}

@media (min-width: 800px) {
  main {
    padding: var(--space-xl);
  }
}

Hai truy vấn nội dung nghe nhìn này cung cấp cho main nhiều khoảng đệm hơn khi có nhiều không gian khung nhìn hơn. Điều này có nghĩa là nó bắt đầu ở trạng thái thu gọn, có một lượng nhỏ khoảng đệm, nhưng giờ đây sẽ ngày càng rộng rãi hơn khi có thêm không gian.

<form>

form {
  --repeat: auto-fit;
  grid-template-columns: 
    repeat(var(--repeat), minmax(min(10ch, 100%), 35ch));
}

@media (orientation: landscape) and (min-width: 640px) {
  form {
    --repeat: 2;
  }
}

Biểu mẫu đã thích ứng với kích thước khung nhìn bằng auto-fit, nhưng trong khi thử nghiệm trên thiết bị di động, việc xoay thiết bị sang chế độ ngang không đặt hai nhóm biểu mẫu cạnh nhau. Thích ứng với bối cảnh ngang này bằng một truy vấn phương tiện orientation và một chế độ kiểm tra chiều rộng khung nhìn. Giờ đây, nếu thiết bị ở chế độ ngang và có chiều rộng ít nhất là 640 pixel, hãy buộc hiển thị 2 cột bằng cách chuyển đổi thuộc tính tuỳ chỉnh --repeat thành một số thay vì từ khoá auto-fit.

.fieldset-item

@media (min-width: 540px) {
  .fieldset-item {
    grid-template-columns: var(--space-xxl) 1fr;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-xl) var(--space-md) 0;
  }
}

Truy vấn phương tiện này là một cách mở rộng khoảng cách khác khi có thêm không gian khung nhìn. Mẫu lưới sẽ mở rộng cột đầu tiên bằng cách sử dụng một thuộc tính tuỳ chỉnh lớn hơn (var(--space-xxl)) trong mẫu. Khoảng đệm cũng được tăng lên các thuộc tính tuỳ chỉnh lớn hơn.

Những việc nên thử

Mở rộng và thu gọn trình duyệt, đồng thời quan sát khi không gian điều chỉnh.
Xem trước trên thiết bị di động
Xem trước trên thiết bị di động ở chế độ ngang

5. Màu thích ứng

Nhánh Git: colors

Khi kết thúc phần này, biểu mẫu cài đặt của bạn sẽ:

Thích ứng với lựa chọn ưu tiên về màu sáng và tối
Có một bảng phối màu bắt nguồn từ mã hex của thương hiệu
Có màu sắc dễ tiếp cận

HSL

Trong phần tiếp theo, bạn sẽ tạo một hệ thống màu bằng HSL để giúp bạn tạo giao diện sáng và tối. Nó được xây dựng dựa trên khái niệm cốt lõi này trong CSS: calc().

HSL là viết tắt của sắc độ, độ bão hoà và độ sáng. Sắc độ là một góc, chẳng hạn như một điểm trên đồng hồ, trong khi độ bão hoà và độ sáng là tỷ lệ phần trăm. calc() có thể tính toán phần trăm và góc. Bạn có thể thực hiện các phép tính về độ sáng và độ bão hoà trên những tỷ lệ phần trăm đó trong CSS. Kết hợp các phép tính kênh màu với các thuộc tính tuỳ chỉnh, bạn sẽ có một bảng phối màu hiện đại và linh hoạt, trong đó các biến thể được tính toán dựa trên một màu cơ bản, giúp bạn tránh việc quản lý một số lượng lớn màu trong mã.

Thuộc tính tuỳ chỉnh

Trong phần này, bạn sẽ tạo một nhóm thuộc tính tuỳ chỉnh để sử dụng trong phần còn lại của các kiểu. Tương tự như bộ khoảng cách mà bạn đã tạo trước đó trong thẻ :root, bạn sẽ thêm màu.

Giả sử màu thương hiệu cho ứng dụng của bạn là #0af. Nhiệm vụ đầu tiên của bạn là chuyển đổi giá trị màu thập lục phân này thành giá trị màu HSL: hsl(200 100% 50%). Lượt chuyển đổi này cho biết các kênh màu của thương hiệu theo HSL. Bạn có thể sử dụng calc() để tính toán nhiều màu hỗ trợ thương hiệu.

Bạn nên thêm từng khối mã sau đây trong phần này vào cùng một bộ chọn :root.

Kênh thương hiệu

:root {
  --hue: 200;
  --saturation: 100%;
  --lightness: 50%;
}

Ba kênh HSL đã được trích xuất và đặt vào các thuộc tính tuỳ chỉnh riêng.

Sử dụng cả 3 thuộc tính này và tạo lại màu thương hiệu.

Thương hiệu

:root {
  --brand: hsl(
    var(--hue) 
    calc(var(--saturation) / 2)
    var(--lightness) 
  );
}

Vì bảng phối màu của bạn có màu tối theo mặc định, nên bạn nên giảm độ bão hoà của màu để sử dụng trên các bề mặt tối (nếu không, màu có thể gây khó chịu cho mắt hoặc không truy cập được). Để giảm độ bão hoà màu thương hiệu, bạn giữ nguyên sắc độ và độ sáng, nhưng giảm độ bão hoà đi một nửa bằng cách chia: calc(var(--saturation) / 2). Giờ đây, màu thương hiệu của bạn đã được áp dụng đúng cách cho giao diện, nhưng đã được khử bão hoà để sử dụng.

Văn bản

:root {
  --text1: hsl(var(--hue) 15% 85%);
  --text2: hsl(var(--hue) 15% 65%);
}

Đối với văn bản đọc trong Giao diện tối, bạn sử dụng tông màu thương hiệu làm cơ sở, nhưng tạo ra các màu gần như trắng từ đó. Nhiều người dùng sẽ nghĩ rằng văn bản có màu trắng, trong khi thực tế là màu xanh dương rất nhạt. Việc sử dụng các sắc độ tương đồng là một cách hiệu quả để tạo sự hài hoà trong thiết kế. --text1 có 85% màu trắng và --text2 có 65% màu trắng, cả hai đều có độ bão hoà rất thấp.

Sau khi thêm mã vào dự án, hãy mở Công cụ cho nhà phát triển Chrome và khám phá cách thay đổi các giá trị kênh này. Cảm nhận cách HSL và các kênh của nó tương tác với nhau. Có thể bạn muốn màu sắc có độ bão hoà cao hơn hoặc thấp hơn.

Bề mặt

:root {
  --surface1: hsl(var(--hue) 10% 10%);
  --surface2: hsl(var(--hue) 10% 15%);
  --surface3: hsl(var(--hue) 5% 20%);
  --surface4: hsl(var(--hue) 5% 25%);
}

Văn bản rất sáng vì các giao diện sẽ tối trong chế độ tối. Khi màu văn bản sử dụng giá trị độ sáng cao (85% trở lên), các vùng sẽ sử dụng giá trị thấp hơn (30% trở xuống). Việc có khoảng cách phù hợp giữa các dải độ sáng của nền tảng và văn bản sẽ giúp đảm bảo người dùng có thể đọc được các màu sắc.

Lưu ý cách các màu bắt đầu ở màu xám đậm nhất với độ sáng 10% và độ bão hoà 10%, sau đó giảm độ bão hoà khi chúng sáng hơn. Mỗi bề mặt mới nhẹ hơn 5% so với bề mặt trước đó. Độ rực màu cũng giảm một chút ở các bề mặt sáng hơn. Hãy thử đặt độ rực màu của tất cả các bề mặt thành 10%. Bạn thích hay không thích?

Giao diện sáng

Với một bộ màu văn bản và màu bề mặt phù hợp để chỉ định giao diện tối, thì đã đến lúc bạn điều chỉnh theo lựa chọn ưu tiên giao diện sáng bằng cách cập nhật các thuộc tính tuỳ chỉnh về màu trong một truy vấn nội dung nghe nhìn prefers-color-scheme.

Bạn sẽ sử dụng cùng một kỹ thuật duy trì sự khác biệt lớn về giá trị độ sáng giữa màu bề mặt và màu văn bản để giữ cho màu sắc có độ tương phản cao.

Thương hiệu

@media (prefers-color-scheme: light) {
  :root {
    --brand: hsl(
      var(--hue) 
      var(--saturation)
      var(--lightness) 
    );
  }
}

Đầu tiên là màu sắc của thương hiệu. Cần khôi phục độ rực màu về mức tối đa.

Văn bản

@media (prefers-color-scheme: light) {
  :root {
    --text1: hsl(
      var(--hue) 
      var(--saturation)
      10% 
    );

    --text2: hsl(
      var(--hue) 
      calc(var(--saturation) / 2)
      30%
    );
  }
}

Tương tự như cách giao diện tối có màu chữ xanh dương rất nhạt, trong giao diện sáng, màu chữ có màu xanh dương rất đậm. Khi thấy 10% và 30% là giá trị độ sáng cho màu HSL, bạn nên biết rằng những màu này là màu tối.

Surface

@media (prefers-color-scheme: light) {
  :root {
    --surface1: hsl(var(--hue) 20% 90%);
    --surface2: hsl(var(--hue) 10% 99%);
    --surface3: hsl(var(--hue) 10% 96%);
    --surface4: hsl(var(--hue) 10% 85%);
  }
}

Những màu sắc bề mặt này là màu sắc đầu tiên phá vỡ các mẫu. Những gì có vẻ khá hợp lý và tuyến tính cho đến nay hiện đã bị phá vỡ. Điều thú vị là bạn có thể thử các tổ hợp màu theo giao diện sáng HSL ngay trong mã này, đồng thời điều chỉnh độ sáng và độ rực màu để tạo ra một bảng phối màu sáng đẹp mắt, không quá lạnh hoặc xanh dương.

Sử dụng hệ thống màu

Giờ đây, khi các màu đã được xác định, hãy sử dụng chúng. Bạn có một màu nhấn thương hiệu nổi bật, 2 màu văn bản và 4 màu vùng hiển thị.

Đối với các phần mã sau, hãy tìm bộ chọn phù hợp và thêm CSS màu vào khối mã hiện có.

<body>

body {
  background: var(--surface1);
  color: var(--text1);
}

Màu chính của trang là màu văn bản và màu vùng hiển thị đầu tiên mà bạn tạo, đồng thời đặt lượng tương phản mặc định ở mức tối đa. Bạn có thể bắt đầu kiểm thử chế độ sáng và tối!

<fieldset>

fieldset {
  border: 1px solid var(--surface4);
  background: var(--surface4);
}

Đây là phần tử giống thẻ trong thiết kế của bạn. Đường viền 1 pixel và khoảng trống 1 pixel có cùng màu và thể hiện bề mặt phía sau mỗi .fieldset-item. Điều này tạo ra sự hài hoà về mặt thị giác và dễ duy trì.

.fieldset-item

.fieldset-item {
  background: var(--surface3);
}

Mỗi đầu vào biểu mẫu nằm trên bề mặt riêng. Hy vọng bạn thấy được cách những yếu tố này kết hợp với nhau và cách các biến thể về độ sáng xếp lớp với nhau.

.fieldset-item > picture

.fieldset-item > picture {
  background: var(--surface4);
}

Đây là lựa chọn về phong cách để làm nổi bật hình tròn bao quanh biểu tượng. Bạn sẽ hiểu rõ lý do khi thêm các lượt tương tác trong phần tiếp theo.

.fieldset-item svg

.fieldset-item svg {
  fill: var(--text2);
}

Các biểu tượng trong biểu mẫu được đặt để sử dụng văn bản thay thế --text2. Thiết kế có biểu tượng được tô màu nền sáng hơn một chút so với văn bản sẽ giúp biểu tượng không bị quá nổi bật.

.fieldset-item:focus-within svg

.fieldset-item:focus-within svg {
  fill: var(--brand);
}

Bộ chọn này khớp với phần tử vùng chứa đầu vào khi một trong các đầu vào bên trong đang được tương tác và nhắm đến SVG để làm nổi bật bằng điểm nhấn thương hiệu của bạn. Điều này mang lại phản hồi tốt về trải nghiệm người dùng của biểu mẫu, trong đó việc tương tác với các thành phần đầu vào sẽ làm nổi bật biểu tượng có liên quan.

<small>

small {
  color: var(--text2);
}

Đó là văn bản nhỏ. Nội dung này nên có màu sắc dịu hơn một chút so với tiêu đề và đoạn văn (nội dung chính).

Các chế độ kiểm soát biểu mẫu tối

:root {
  color-scheme: dark light;
}

Điểm nhấn cuối cùng này cho trình duyệt biết rằng trang này hỗ trợ cả giao diện tối và sáng. Trình duyệt thưởng cho chúng ta các chế độ kiểm soát biểu mẫu tối.

6. Ảnh động thích ứng

Nhánh Git: animations

Khi kết thúc phần này, trang cài đặt sẽ:

Điều chỉnh theo lựa chọn ưu tiên về chuyển động của người dùng
Phản hồi lượt tương tác của người dùng

Giảm chuyển động so với không chuyển động

Lựa chọn ưu tiên của người dùng về chuyển động trong hệ điều hành không có giá trị là không có ảnh động. Lựa chọn này giúp giảm chuyển động. Ảnh động làm mờ, hiệu ứng chuyển màu và nhiều hiệu ứng khác vẫn phù hợp với những người dùng thích chế độ giảm chuyển động.

Trên trang cài đặt này, không có nhiều chuyển động về mặt di chuyển trên màn hình. Chuyển động này giống hiệu ứng thu phóng hơn, như thể phần tử đang di chuyển về phía người dùng. Bạn có thể dễ dàng điều chỉnh mã CSS để phù hợp với chế độ chuyển động giảm và giảm các hiệu ứng chuyển đổi thu phóng.

Kiểu tương tác

<fieldset>

fieldset {
  transition: box-shadow .3s ease;
}

fieldset:focus-within {
  box-shadow: 0 5px 20px -10px hsl(0 0% 0% / 50%);
}

Khi người dùng tương tác với các thành phần đầu vào của một trong các phần tử có dạng thẻ <fieldset>, thao tác này sẽ thêm hiệu ứng nâng. Giao diện này đẩy một phần tử lên phía trước, giúp người dùng tập trung khi nhóm biểu mẫu theo bối cảnh được đưa về phía người dùng.

.fieldset-item

.fieldset-item {
  transition: background .2s ease;
}

.fieldset-item:focus-within {
  background: var(--surface2);
}

Khi người dùng tương tác với một thông tin đầu vào, nền của lớp mục cụ thể sẽ thay đổi thành màu bề mặt được làm nổi bật, một tính năng giao diện hỗ trợ khác giúp thu hút sự chú ý của người dùng và báo hiệu rằng thông tin đầu vào đang được nhận. Trong hầu hết các trường hợp, bạn không cần giảm hiệu ứng chuyển màu.

.fieldset-item > picture

@media (prefers-reduced-motion: no-preference) {
  .fieldset-item > picture {
    clip-path: circle(40%);
    transition: clip-path .3s ease;
  }

  .fieldset-item:focus-within picture {
    clip-path: circle(50%);
  }
}

Đây là một ảnh động clip-path mà bạn chỉ sử dụng nếu người dùng không có lựa chọn ưu tiên nào về chế độ giảm chuyển động. Bộ chọn và kiểu đầu tiên hạn chế đường dẫn cắt hình tròn thêm 10% và đặt một số thông số chuyển đổi. Bộ chọn và kiểu thứ hai đợi người dùng tương tác với một thành phần đầu vào, sau đó tăng kích thước vòng tròn của biểu tượng. Một hiệu ứng tinh tế nhưng gọn gàng khi mọi thứ đều ổn.

7. Xin chúc mừng

Nhánh Git: complete

Xin chúc mừng! Bạn đã tạo thành công một giao diện thích ứng với người dùng!

Giờ đây, bạn đã biết các bước chính cần thiết để tạo giao diện thích ứng với nhiều tình huống và chế độ cài đặt của người dùng.

Xây dựng giao diện thích ứng với người dùng bằng các truy vấn nội dung nghe nhìn ưu tiên Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

1. Trước khi bắt đầu

Lựa chọn ưu tiên của người dùng

Truy vấn về nội dung nghe nhìn

Thích ứng với người dùng

Điều kiện tiên quyết

Sản phẩm bạn sẽ tạo ra

Kiến thức bạn sẽ học được

Bạn cần có

2. Bắt đầu thiết lập

Lấy mã nguồn

Nên dùng: Sử dụng Codepen

Cách khác: Làm việc tại địa phương

Giới thiệu về HTML

3. Lượt tương tác thích ứng

Thuộc tính cho HTML

Nhóm dữ liệu đầu vào

Sắp xếp các phần tử

Tương tác bằng bàn phím

style.css

Những việc nên thử

Tương tác bằng chuột

Những việc nên thử

Tương tác với trình đọc màn hình

index.html

Những việc nên thử

4. Bố cục thích ứng (Adaptive Layouts)

Khoảng cách

Thuộc tính tuỳ chỉnh

style.css

Kiểu trang

style.css

Kiểu chữ

Thuộc tính logic

Bố cục lưới CSS

<main>

<form>

<section>

<header>

<fieldset>

.fieldset-item

.fieldset-item <picture>

<picture> và sự căn chỉnh [hộp đánh dấu]

.fieldset-item <svg>

.sm-stack

input[type="checkbox"]

Những việc nên thử

Truy vấn về nội dung nghe nhìn

<main>

<form>

.fieldset-item

Những việc nên thử

5. Màu thích ứng

HSL

Thuộc tính tuỳ chỉnh

Kênh thương hiệu

Thương hiệu

Văn bản

Bề mặt

Giao diện sáng

Thương hiệu

Văn bản

Surface

Sử dụng hệ thống màu

<body>

<fieldset>

.fieldset-item

.fieldset-item > picture

.fieldset-item svg

.fieldset-item:focus-within svg

<small>

Các chế độ kiểm soát biểu mẫu tối

6. Ảnh động thích ứng

Giảm chuyển động so với không chuyển động

Kiểu tương tác

<fieldset>

.fieldset-item

.fieldset-item > picture

7. Xin chúc mừng

Xây dựng giao diện thích ứng với người dùng bằng các truy vấn nội dung nghe nhìn ưu tiên