Hướng dẫn về Modern Web Guidance

Tăng khả năng hiển thị thanh cuộn cho những người dùng thích giao diện có độ tương phản cao

Áp dụng hiệu ứng hình ảnh tuỳ chỉnh bằng chương trình đổ bóng WebGL cho nội dung HTML.

Hướng dẫn về màu sắc cho web, bao gồm các yêu cầu về độ tương phản, bảng phối màu sáng và tối, Chế độ buộc màu, cũng như cách tạo sắc thái và sắc độ từ màu cơ bản.

Cắt các phần tử và nội dung của chúng thành bất kỳ hình dạng tuỳ ý nào, chẳng hạn như biểu tượng, nét vẽ hoặc hoạ tiết tự nhiên để có thiết kế ấn tượng hơn.

Thêm các thành phần trang trí văn bản như gạch dưới, gạch trên, gạch ngang chữ hoặc hình dạng hoàn toàn tuỳ chỉnh, cùng với ảnh động hiển thị, độ lệch tuỳ chỉnh và phần lồng cuối, cũng như tính năng bỏ qua mực linh hoạt.

Tuỳ chỉnh màu sắc hoặc độ dày của thanh cuộn

Triển khai tính năng hỗ trợ chế độ tối theo cách tôn trọng lựa chọn ưu tiên của người dùng về giao diện sáng/tối và điều chỉnh giao diện người dùng của trình duyệt (ví dụ: thanh cuộn, chế độ kiểm soát biểu mẫu, v.v.)

Tích hợp các phần tử HTML tương tác vào cảnh 3D.

Chọn màu văn bản dễ đọc có độ tương phản đủ cao trên màu nền động.

Đặt mọi dòng của tiêu đề hoặc cụm từ nhiều dòng có cùng chiều rộng, như trong kiểu chữ áp phích hoặc tiêu đề xếp chồng. Không giống như văn bản được căn đều, văn bản được định cỡ theo chiều rộng thay vì giãn cách

Chụp và xuất nội dung HTML động dưới dạng hình ảnh hoặc khung video từ trong canvas.

Cung cấp nội dung được kết xuất trong canvas cho các tính năng của trình duyệt như công nghệ hỗ trợ, dịch hoặc chế độ đọc.

Cải thiện bố cục và mức độ dễ đọc của nội dung văn bản ngắn độc lập (chẳng hạn như tiêu đề không dài quá vài dòng) bằng cách cho phép trình duyệt áp dụng các dấu ngắt dòng cân bằng đồng đều khi ngắt dòng văn bản.

Căn chỉnh chính xác theo chiều dọc với văn bản có phông chữ bất kỳ. Ví dụ: khoảng đệm hình ảnh bằng nhau chính xác ở phía trên và phía dưới văn bản, hoặc căn chỉnh văn bản sao cho hoàn toàn ngang bằng với các biểu tượng hoặc hình ảnh liền kề.

Kết hợp nhiều hình dạng để tạo ra các hiệu ứng cắt hoặc "loại bỏ" phức tạp trong các phần tử, chẳng hạn như thêm một vết cắt vào một phần tử.

Áp dụng dải chuyển màu trong suốt cho các cạnh nội dung để cho biết các khu vực có thể cuộn thêm hoặc để che khuất văn bản có tường phí.

Tạo giao diện cho giao diện người dùng do trình duyệt tạo, chẳng hạn như lựa chọn văn bản, thanh cuộn, thành phần điều khiển biểu mẫu và bộ chọn bằng CSS thay vì tạo lại bằng các phần tử tuỳ chỉnh.

Các phương pháp hay nhất về kiểu chữ cho web, bao gồm đơn vị cỡ chữ, chiều cao dòng, xuống dòng tự động và cân bằng văn bản, cũng như kiểu chữ linh hoạt điều chỉnh theo khung nhìn.

Hiệu ứng hình ảnh bằng CSS như bóng đổ nhiều lớp, chế độ hoà trộn, dải màu có nội suy màu có thể dự đoán và các mẫu như sọc, bàn cờ, dấu chấm và biểu đồ hình tròn được tạo từ dải màu.

Xác định kiểu phông chữ sao cho văn bản vẫn dễ đọc và nhất quán về mặt hình ảnh trong trường hợp có sự hoán đổi giữa phông chữ ưu tiên và một trong các phông chữ dự phòng (hoặc ngược lại).

Xác định kiểu phông chữ sao cho văn bản vẫn dễ đọc và nhất quán về mặt hình ảnh trong những trường hợp sử dụng nhiều phông chữ để hiển thị một khối văn bản.

Áp dụng các mẫu kết cấu và hiệu ứng thời tiết chân thực cho các thành phần để tạo cho chúng vẻ ngoài tự nhiên, cũ kỹ hoặc giống như vật liệu vật lý.

Tạo thanh tiến trình cuộn, trình theo dõi tiến trình theo từng bước hoặc bất kỳ chỉ báo trực quan nào cho biết người dùng đã cuộn được bao xa trên một trang hoặc một phần.

Tạo một băng chuyền gồm các trang trình bày có hình ảnh hoặc các thành phần hình ảnh khác, trong đó mỗi trang trình bày sẽ tạo ảnh động khi chúng vào/giữa/thoát khỏi thanh cuộn. Ví dụ: các trang trình bày có thể mờ dần/hiện dần, xoay, phóng to hoặc thu nhỏ, v.v.

Buộc một số phần tử nhất định phải ở chế độ sáng hoặc chế độ tối (ví dụ: khối mã, trình phát nội dung nghe nhìn, v.v.) độc lập với bảng phối màu của trang.

Tạo chú thích và cửa sổ bật lên có mũi tên chỉ hướng (hoặc kiểu hình ảnh khác) tự động chỉ đúng hướng khi phần tử chuyển sang vị trí dự phòng.

Tạo tính năng kéo để hiện, cho phép người dùng kéo màn hình xuống để hiện thêm nội dung, chẳng hạn như thanh tìm kiếm.

Xây dựng một bảng dữ liệu trình bày dữ liệu dạng bảng với ngữ nghĩa tiêu đề phù hợp, đồng thời vẫn có thể đọc và điều hướng được trên màn hình nhỏ và bằng công nghệ hỗ trợ.

Tạo các nút hoặc tiện ích nổi (quay lại đầu trang, cuộn xuống cuối trang, trình chạy cuộc trò chuyện, v.v.) xuất hiện và biến mất dựa trên việc người dùng có cuộn hay không.

Tạo lớp phủ bóng cuộn, hiệu ứng mờ dần hoặc chỉ báo mũi tên chỉ hướng chỉ xuất hiện khi thực sự có thêm nội dung để cuộn theo hướng đó.

Tạo ảnh động mượt mà cho tiêu đề cố định hoặc ảnh bìa toàn trang khi cuộn để thu nhỏ, tạo bóng và biến đổi bố cục một cách linh động trong khoảng cách cuộn được xác định trước.

Tạo tiêu đề mục hoặc thanh điều hướng cố định có thể biến đổi trực quan khi chúng thực sự "cố định" ở trên cùng, thay đổi bảng phối màu hoặc có bóng.

Hiển thị và quản lý các biểu tượng có thể được đặt và tham số hoá từ CSS, tải nhanh, sắc nét ở mọi độ phân giải và được hiển thị đúng cách (hoặc ẩn khỏi) các công nghệ hỗ trợ.

Đặt trình đơn thả xuống, trình đơn bật ra hoặc bảng thao tác theo ngữ cảnh được liên kết với nút kích hoạt để các thành phần này tự động lật trục ở các cạnh của khung nhìn thay vì bị cắt bớt.

Tạo một thành phần thẻ điều chỉnh cách trình bày cho phù hợp với không gian và nội dung có sẵn.

Tạo một thành phần trình đơn hiển thị danh sách các lựa chọn hoặc hành động, có hỗ trợ trình đơn phụ lồng nhau.

Làm nổi bật phần hiện đang hiển thị của một trang trong trình đơn điều hướng

Tạo một thanh tiến trình được tạo kiểu để thông báo về việc hoàn thành một nhiệm vụ hoặc quy trình, ở cả trạng thái xác định và không xác định.

Tạo một thành phần thẻ di chuột để hiển thị bản xem trước có cấu trúc tương tác của trang mà một loại đường liên kết nhất định (ví dụ: hồ sơ người dùng) sẽ chuyển đến khi người dùng di chuột qua.

Tạo hướng dẫn làm quen liên tục bằng cách sử dụng lớp phủ gốc được liên kết và luôn mở trong quá trình người dùng tương tác.

Tạo thông báo ngắn và thông báo lớp phủ không gây phiền toái để gửi thông báo liên tục, có thể xếp chồng và thông báo trạng thái.

Tạo một thành phần bật/tắt chế độ tối cho phép người dùng ghi đè lựa chọn ưu tiên về bảng phối màu của hệ thống cho trang web hiện tại.

Tạo một thành phần hộp thoại phương thức hoặc không phương thức có thể truy cập, quản lý tiêu điểm một cách thích hợp và có thể đóng theo cách người dùng mong đợi trên mỗi nền tảng.

Tạo một vòng quay tải để thông báo trạng thái bận cho tất cả người dùng, tôn trọng lựa chọn ưu tiên về việc giảm chuyển động và tạo ảnh động một cách hiệu quả.

Tạo một thành phần ngăn điều hướng. Khi được kích hoạt từ nút trình đơn, thành phần này sẽ trượt vào từ bên cạnh và phủ lên trên nội dung trang hiện có, sau đó trượt ra khi bị đóng (bằng cách vuốt đi, nhấn vào bên ngoài hoặc nhấn phím Escape).

Tạo một thành phần vòng tròn tiến trình thể hiện trực quan trạng thái hoàn thành của một nhiệm vụ hoặc quy trình, hỗ trợ nội dung ở giữa và kiểu dáng nhất quán với thương hiệu.

Xây dựng tính năng điều hướng phân cấp toàn màn hình cho phép người dùng xem chi tiết các khung hiển thị lồng nhau và vuốt hoặc điều hướng quay lại để trở về, đồng thời đồng bộ hoá nhật ký duyệt web.

Tạo kiểu cho hộp đánh dấu, bao gồm cả biểu tượng tuỳ chỉnh, bố cục, màu sắc, ảnh động đánh dấu/bỏ đánh dấu, trong khi vẫn giữ nguyên chức năng và khả năng hỗ trợ tiếp cận gốc.

Tạo hiệu ứng mờ dần, tăng tỷ lệ hoặc các hiệu ứng hiển thị phức tạp khác trên các phần tử khi chúng vào và thoát khỏi cổng cuộn (hoặc khung nhìn) trong khi người dùng đang cuộn.

Chuyển đổi một phần tử một cách liền mạch giữa hai vị trí phần tử mục tiêu. Ví dụ: di chuyển đường gạch dưới của thẻ đã chọn giữa thẻ đã chọn trước đó và thẻ hiện được chọn.

Ẩn/hiện các phần tử một cách mượt mà khi chúng được thêm/xoá khỏi DOM hoặc khi giá trị hiển thị của chúng được bật/tắt.

Tạo ảnh động cho các phần tử như hộp thoại, cửa sổ bật lên và chú giải công cụ khi các phần tử này xuất hiện/biến mất khỏi lớp trên cùng.

Hỗ trợ thao tác kéo để di chuyển một phần tử nổi xung quanh trang.

Tạo hiệu ứng dựa trên thao tác cuộn (chẳng hạn như hiệu ứng thị sai) trong đó các lớp nền trước và nền sau di chuyển với tốc độ khác nhau, tạo cảm giác về chiều sâu khi người dùng cuộn.

Làm nổi bật mục không tương tác hiện đang được cố định vị trí trong băng chuyền, thư viện hoặc trải nghiệm vuốt toàn trang có tính năng cố định vị trí cuộn. Ví dụ: mở rộng thẻ khi được đính vào hoặc hiển thị nội dung bị ẩn.

Đảm bảo trạng thái trang quan trọng được tải và ổn định trước khi bắt đầu chuyển đổi chế độ xem giữa các tài liệu. Điều này có nghĩa là các kiểu CSS quan trọng được tải và áp dụng, JavaScript quan trọng được tải và chạy, đồng thời HTML hiển thị cho chế độ xem ban đầu của người dùng về trang đã được phân tích cú pháp trước khi quá trình chuyển đổi chạy.

Sắp xếp thời gian ảnh động hoặc chuyển đổi giữa các phần tử đồng cấp để mỗi phần tử bắt đầu sau một khoảng thời gian trễ được tính toán dựa trên vị trí của phần tử đó trong danh sách đồng cấp.

Tạo hiệu ứng chuyển đổi mượt mà, liền mạch giữa các thao tác điều hướng toàn trang, chẳng hạn như hiệu ứng mờ dần, hiệu ứng hiển thị tuỳ chỉnh hoặc biến đổi nội dung từ trang này sang trang tiếp theo.

Kết nối một nút với bất kỳ phần tử nào theo cách khai báo để kích hoạt các hành động tuỳ chỉnh, dành riêng cho ứng dụng bằng cách sử dụng lệnh nút khai báo, lệnh trình gọi, lệnh nút, lệnh tuỳ chỉnh hoặc hành động bật/tắt khai báo.

Bật/tắt chế độ hiển thị của hộp thoại hoặc cửa sổ bật lên từ một nút mà không cần viết JavaScript.

Tạo ảnh động cho các thay đổi về trạng thái hình ảnh để phản ánh hướng của luồng điều hướng của người dùng, chẳng hạn như trượt nội dung mới từ bên phải khi tiến về phía trước hoặc từ bên trái khi quay lại màn hình trước đó.

Chuyển đổi một nhóm các phần tử tương tự cùng lúc bằng cách sử dụng cùng một logic chuyển đổi, chẳng hạn như xoá một sản phẩm khỏi giỏ hàng và tạo ảnh động cho tất cả các sản phẩm khác vào vị trí mới.

Đánh dấu các dải văn bản tuỳ ý trên một trang, chẳng hạn như kết quả tìm kiếm, lỗi chính tả hoặc con trỏ chỉnh sửa cộng tác.

Tạo hiệu ứng hiển thị tương tác, chẳng hạn như đèn chiếu theo con trỏ của người dùng để hiển thị thông tin chi tiết trong một hình ảnh hoặc phần giao diện người dùng.

Hiển thị bản xem trước trực tiếp về hiệu ứng của nút khi người dùng thể hiện sự quan tâm (ví dụ: di chuột, lấy tiêu điểm hoặc nhấn và giữ) nhưng trước khi họ nhấp vào nút.

Tạo một hộp thoại phụ có thể đóng bằng cách nhấp hoặc nhấn vào bên ngoài hộp thoại

Tạo ảnh động cho giao diện người dùng bằng hiệu ứng chuyển đổi CSS, ảnh động, ảnh động dựa trên thao tác cuộn và hiệu ứng chuyển đổi khung hiển thị, đồng thời duy trì chuyển động trên trình tổng hợp và tuân thủ các lựa chọn ưu tiên về việc giảm chuyển động.

Di chuyển hoặc thay đổi phần tử mẹ của một phần tử DOM mà không làm mất trạng thái quan trọng của phần tử, chẳng hạn như trạng thái tương tác (:focus/:active), trạng thái tải <iframe>, trạng thái ảnh động/chuyển đổi, v.v.

Giữ cho hộp thoại phương thức, phần tử toàn màn hình hoặc cửa sổ bật lên gốc luôn mở và hoạt động khi nút DOM cơ bản của hộp thoại đó được di chuyển hoặc thay đổi phần tử mẹ trong DOM.

Tạo hiệu ứng chuyển đổi và ảnh động tuỳ chỉnh, dựa trên vật lý, chẳng hạn như hiệu ứng nảy và lò xo, mang lại cảm giác tự nhiên và hấp dẫn hơn so với các đường cong gia tốc truyền thống.

Tạo một hộp thoại phụ có thể đóng thông qua các thao tác chuẩn của người dùng theo từng nền tảng, chẳng hạn như nhấn phím Esc trên nền tảng máy tính hoặc cử chỉ "quay lại" hoặc "đóng" trên nền tảng di động

Ngăn trang bên dưới cuộn trong khi hộp thoại phụ đang mở.

Kết nối trực quan các phần tử cố định trên nhiều trạng thái trang hoặc thành phần điều hướng trong Ứng dụng trang đơn (SPA) (ví dụ: mở rộng hình thu nhỏ của sản phẩm thành hình ảnh chính tràn lề) bằng cách biến đổi mượt mà kích thước, vị trí hoặc các thuộc tính định kiểu khác của các phần tử đó.

Tạo ảnh động cho các thay đổi về trạng thái bên trong một thành phần (thẻ, danh sách, bảng điều khiển hoặc cây con khác) trong khi phần còn lại của trang vẫn có thể tương tác và các hiệu ứng chuyển đổi khác chạy đồng thời.

Cung cấp phản hồi bằng hình ảnh theo thời gian thực trong các phần tử trên giao diện người dùng được liên kết khi người dùng cuộn qua nội dung được căn chỉnh theo điểm bám, trước khi hoàn tất cử chỉ cuộn.

Đồng bộ hoá chỉ báo điều hướng, bảng nội dung được liên kết và tính năng theo dõi số liệu phân tích với mục được đính vào vùng chứa có thể cuộn.

Tạo ảnh động cho các thuộc tính hình ảnh trên một phần tử mục tiêu (chẳng hạn như làm mờ phông nền, thay đổi màu nền hoặc tạo trải nghiệm kể chuyện bằng thao tác cuộn) hoàn toàn dựa trên vị trí cổng cuộn của một phần tử hoàn toàn khác.

Ẩn nội dung khỏi chế độ xem bằng các mẫu như accordion, thẻ và phần "Đọc thêm", đồng thời đảm bảo văn bản ẩn hiển thị trong các lượt tìm kiếm gốc "Tìm trong trang", cho phép lập chỉ mục công cụ tìm kiếm, hỗ trợ đường liên kết sâu phân mảnh của URL và duy trì khả năng hỗ trợ tiếp cận ARIA.

Tạo danh sách các phần tử có thể cuộn (ví dụ: băng chuyền hình ảnh hoặc chuỗi trò chuyện) có thể hiển thị với một phần tử cụ thể được cuộn vào khung hiển thị trong lần kết xuất ban đầu.

Hiện chú thích hoặc thông tin bổ sung khi người dùng di chuột qua, đặt tiêu điểm hoặc nhấn và giữ một thành phần tương tác mà không cần nhấp vào.

Triển khai tính năng điều hướng không gian dễ tiếp cận bằng các phím mũi tên hoạt động chính xác trong nhiều chế độ bố cục (lưới, v.v.)

Cho phép người dùng thao tác trên các mục trong danh sách (xoá, lưu trữ, đánh dấu là đã đọc, v.v.) bằng cử chỉ vuốt ngang để họ có thể xử lý các mục nhanh chóng mà không cần nhấn vào một thành phần điều khiển riêng biệt.

Cho phép người dùng vuốt theo chiều ngang trên một mục trong danh sách hoặc ngăn nội dung để hiển thị các nút thao tác theo ngữ cảnh hoặc trình đơn bên mà không tự động kích hoạt một thao tác.

Chỉ kích hoạt hiệu ứng hình ảnh, ảnh động hoặc thay đổi tiêu điểm trên một phần tử mục tiêu sau khi quá trình cuộn có lập trình mượt mà đến phần tử đó hoàn tất.

Cho phép người dùng tự do kéo hoặc cuộn các bề mặt hai chiều (chẳng hạn như bản đồ, hình ảnh được phóng to, canvas vô hạn hoặc lưới dữ liệu lớn) theo cả hai hướng (cho dù là theo đường chéo hay thay đổi hướng giữa cử chỉ) mà không cần khoá cử chỉ vào một trục ngang hoặc dọc.

Tạo một thành phần chọn tuỳ chỉnh có trình đơn thả xuống dạng ảnh động. Ví dụ: trình đơn mờ dần hoặc trượt vào khung hiển thị hoặc các tuỳ chọn tạo ảnh động khi được chọn.

Điều chỉnh hộp đánh dấu, nút chọn, thanh trượt phạm vi và thanh tiến trình cho phù hợp với bảng màu của trang web mà không cần thay thế bằng các thành phần tuỳ chỉnh.

Tạo kiểu cho thanh trượt phạm vi gốc bằng các trạng thái tuỳ chỉnh cho rãnh, nút điều khiển, màu nền và tiêu điểm, đồng thời giữ nguyên chức năng và khả năng hỗ trợ tiếp cận gốc.

Tạo các phần tử chọn tuỳ chỉnh có nút, bộ chọn, biểu tượng mũi tên và dấu đánh dấu đều khớp liền mạch với kiểu chữ, màu sắc, khoảng cách và cách xử lý đường viền của thương hiệu hoặc hệ thống thiết kế của bạn.

Tạo biểu mẫu thanh toán thu thập thông tin thẻ bằng các giá trị tự động hoàn thành chính xác và hỗ trợ tính năng tự động điền.

Tạo biểu mẫu đăng nhập có các giá trị tự động hoàn thành chính xác và hỗ trợ tính năng tự động điền.

Xây dựng biểu mẫu đăng ký có các giá trị tự động hoàn thành chính xác và hỗ trợ tính năng tự động điền.

Tạo một nút chuyển dễ tiếp cận bằng thuộc tính nút chuyển HTML gốc, quay lại hộp đánh dấu được tạo kiểu khi không được hỗ trợ.

Tạo biểu mẫu địa chỉ có các thuộc tính tự động hoàn thành chính xác và hỗ trợ tính năng tự động điền.

Tạo bộ chọn tuỳ chỉnh có các lựa chọn được đặt theo những cách độc đáo hoặc thú vị, thay vì danh sách lựa chọn xếp chồng truyền thống.

Cho phép các trường biểu mẫu tăng và giảm kích thước để phù hợp với thông tin người dùng nhập, ví dụ: khi người dùng nhập hoặc chọn một lựa chọn khác. Áp dụng giới hạn kích thước tối đa và tối thiểu để tạo các trường biểu mẫu linh động và thích ứng, phù hợp với thiết kế trang.

Các phương pháp hay nhất để xây dựng biểu mẫu web dễ tiếp cận, bảo mật và thân thiện với người dùng. Hãy sử dụng hướng dẫn này khi tạo hoặc sửa đổi biểu mẫu, dữ liệu đầu vào và quy trình gửi.

Sử dụng CSS để làm nổi bật các trường biểu mẫu đã được trình duyệt tự động điền và người dùng không chỉnh sửa.

Triển khai tính năng Nhấn Enter để gửi trong vùng văn bản và dữ liệu đầu vào một dòng (trò chuyện, tìm kiếm, đổi tên cùng dòng) một cách an toàn cho người dùng IME (Trình chỉnh sửa phương thức nhập) để tránh gửi văn bản chưa hoàn chỉnh.

Chỉ cung cấp thông báo lỗi cho các trường bắt buộc trong biểu mẫu bị bỏ qua hoặc để trống sau khi người dùng tương tác, để tránh lỗi sớm và đảm bảo phản hồi kịp thời cũng như phù hợp với bối cảnh của quy trình của người dùng.

Tạo một thành phần chọn tuỳ chỉnh có các lựa chọn có thể chứa định dạng HTML phức tạp (ví dụ: hình ảnh, biểu tượng và định dạng đa dạng thức khác) thay vì chỉ văn bản thuần tuý.

Xác thực rằng một lựa chọn không mặc định đã được chọn trong trình đơn chọn chỉ sau khi người dùng tương tác với chế độ điều khiển.

Xác minh số điện thoại của người dùng và mật mã một lần được gửi qua SMS bằng tính năng tự động trích xuất mã và nhập biểu mẫu dễ dàng.

Chỉ hiển thị ý kiến phản hồi xác thực trường biểu mẫu (ví dụ: độ phức tạp của mật khẩu hoặc yêu cầu về định dạng email) sau khi người dùng hoàn tất lượt tương tác ban đầu, tránh lỗi sớm khi tải trang hoặc trong khi người dùng đang nhập.

Đặt các phần tử tuỳ chỉnh ở chế độ hỗ trợ tiếp cận theo mặc định, đặt vai trò và trạng thái ARIA thông qua mixin ARIA ElementInternals, quản lý tiêu điểm bằng delegatesFocus và duy trì các mối quan hệ ARIA trong một gốc bóng duy nhất.

Xác định, đăng ký và quản lý vòng đời của các phần tử tuỳ chỉnh tự trị, bao gồm quy tắc hàm khởi tạo, phương thức gọi lại trong vòng đời, thời gian nâng cấp, phản ánh thuộc tính/thuộc tính và quy ước đặt tên.

Tạo một thành phần điều khiển tuỳ chỉnh tham gia vào biểu mẫu bằng formAssociated và ElementInternals, gửi giá trị riêng, tích hợp với quy trình xác thực quy tắc ràng buộc và phản ứng với việc đặt lại, tắt và khôi phục trạng thái.

Nguyên tắc hướng đến hành động cho kiến trúc HTML hiện đại, ngữ nghĩa, API tương tác gốc (Hộp thoại, Cửa sổ bật lên, Chi tiết), quản lý tiêu điểm và ưu tiên tài nguyên. Hãy tham khảo hướng dẫn này khi tạo cấu trúc cho tài liệu web, triển khai lớp phủ gốc hoặc tối ưu hoá thứ tự tải tài nguyên.

Hiển thị một phần tử tuỳ chỉnh phía máy chủ, sau đó bổ sung dữ liệu cho phần tử đó tại chỗ mà không cần hiển thị lại hoặc nhấp nháy nội dung chưa được tạo kiểu.

Đóng gói DOM và kiểu của một thành phần bằng Shadow DOM, xây dựng cây một cách hiệu quả bằng mẫu HTML và dự đoán nội dung của người dùng bằng các vùng.

Tạo kiểu trên ranh giới bóng bằng bộ chọn :host, các thuộc tính kế thừa và tuỳ chỉnh cho giao diện, ::slotted và ::part, cũng như các lớp xếp chồng và truy vấn vùng chứa bên trong các thành phần.

Định hướng và các nguyên tắc chung để tạo và sử dụng Thành phần web, bao gồm Phần tử tuỳ chỉnh, Shadow DOM, mẫu và vùng, Shadow DOM khai báo, định kiểu trên ranh giới bóng, Phần tử tuỳ chỉnh liên kết với biểu mẫu và các yêu cầu về hỗ trợ tiếp cận. Hãy sử dụng hướng dẫn này khi xây dựng các thành phần giao diện người dùng có thể sử dụng lại, hệ thống thiết kế hoặc các phần tử tuỳ chỉnh do máy chủ kết xuất.

Tạo ảnh động mượt mà cho các thành phần tương tác (như accordion, trình đơn và thẻ mở rộng) đến và từ kích thước tự nhiên của chúng.

Tính toán kích thước của một phần tử dựa trên kích thước nội tại của phần tử đó, đồng thời đảm bảo phần tử đó phù hợp với các quy tắc ràng buộc thiết kế đã cho.

Tạo một thành phần thay đổi kiểu dựa trên trạng thái của một trong các phần tử con của thành phần đó. Ví dụ: một thành phần hiển thị ở chế độ sáng hoặc chế độ tối dựa trên việc nút bật/tắt giao diện có được đánh dấu hay không.

Chỉ áp dụng một số quy tắc hoặc nội dung khai báo CSS nhất định nếu trình duyệt hỗ trợ một quy tắc at-rule nhất định.

Tạo một thành phần thay đổi bố cục dựa trên việc thành phần đó có chứa các phần tử con cụ thể hay không. Ví dụ: nếu thành phần chứa hình ảnh, hãy sử dụng bố cục nhiều cột, nếu không, hãy đặt mặc định là bố cục một cột.

Bố cục CSS hiện đại như flexbox, lưới, lưới phụ, truy vấn vùng chứa, định vị neo và định cỡ nội tại. Hãy sử dụng kỹ năng này khi thiết kế các thành phần giao diện người dùng hoặc bố cục trang thích ứng.

Nguyên tắc hướng đến hành động cho cấu trúc CSS hiện đại, bao gồm xếp tầng, bộ chọn, phạm vi, lồng nhau và mã thông báo thiết kế. Hãy sử dụng hướng dẫn này khi tạo kiểu hoặc quản lý hệ thống thiết kế.

Xác định mã thông báo thiết kế bậc cao hơn, chẳng hạn như chế độ mật độ (thu gọn, thoải mái, rộng rãi) hoặc giao diện và yêu cầu các thành phần con phản ứng trực tiếp với các thay đổi theo cách phù hợp với thành phần.

Điều chỉnh tỷ lệ các mục như cỡ chữ, khoảng cách và kích thước nội dung nghe nhìn một cách mượt mà dựa trên kích thước của vùng chứa mẹ thay vì sử dụng các điểm ngắt cố định

Tạo ảnh động hoặc ghi đè các thuộc tính biến đổi CSS riêng lẻ (ví dụ: dịch chuyển, xoay, điều chỉnh tỷ lệ) độc lập với các thuộc tính biến đổi khác trên một phần tử.

Điều chỉnh ranh giới cắt có thể nhìn thấy của một phần tử để căn chỉnh với cạnh nội dung, cạnh khoảng đệm hoặc cạnh đường viền (hoặc độ lệch được chỉ định so với bất kỳ cạnh nào trong số này), giúp kiểm soát chi tiết hơn cách cắt nội dung.

Giảm việc lặp lại kiểu quá mức bằng cách đóng gói logic định kiểu phức tạp hoặc động vào các hàm có thể sử dụng lại (chẳng hạn như hàm tính toán dải chuyển màu dựa trên một tập hợp tham số đầu vào).

Xây dựng giao diện người dùng thích ứng với kích thước vùng chứa và khung nhìn, bao gồm cả truy vấn vùng chứa, đơn vị khung nhìn động, tỷ lệ khung hình và kiểu chữ thích ứng.

Nhắm đến các phần tử dựa trên giao điểm hoặc hợp của bộ chọn và quy tắc @ có điều kiện, đồng thời giảm thiểu sự lặp lại.

Tạo các thành phần điều chỉnh logic hình ảnh dựa trên ngữ cảnh ngữ nghĩa bằng cách sử dụng truy vấn kiểu vùng chứa CSS.

Xây dựng một thành phần có kiểu có thể phụ thuộc có điều kiện vào chiều rộng hoặc chiều cao của chính thành phần đó, thay vì chiều rộng hoặc chiều cao của khung nhìn. Ví dụ: một thành phần thẻ có thể thay đổi bố cục tuỳ thuộc vào kích thước của thẻ hoặc nút kêu gọi hành động có thể hiển thị văn bản trợ giúp theo điều kiện dựa trên chiều rộng của nút.

Tạo kiểu cho các phần tử mẹ của một trường biểu mẫu (ví dụ: nhãn hoặc nhóm trường) khi trường đó không hợp lệ.

Tạo dải màu động hoặc bố cục tự động điều chỉnh theo số lượng phần tử trong một nhóm.

Tính thời gian đã trôi qua hoặc thời gian còn lại giữa các ngày và giờ, cân bằng đơn vị thời lượng và định dạng thời lượng được bản địa hoá mà con người có thể đọc được bằng Temporal.Duration và Intl.DurationFormat.

Tạo mô hình cho ngày theo lịch không phụ thuộc vào vị trí, giờ đồng hồ, ngày một phần (ngày sinh nhật định kỳ, ngày hết hạn thẻ tín dụng) và khoảng thời gian định kỳ hằng tháng mà không bị lệch múi giờ bằng cách sử dụng các loại Temporal Plain.

Lên lịch cho các cuộc họp hoặc sự kiện trong tương lai bằng cách liên kết rõ ràng các cuộc họp hoặc sự kiện đó với múi giờ địa lý của IANA để thời gian diễn ra sự kiện luôn chính xác bất kể quá trình chuyển đổi Giờ mùa hè (DST), giờ "bị bỏ qua" hoặc "lặp lại" trong quá trình thay đổi giờ.

Phân tích cú pháp, sắp xếp và đo lường khoảng thời gian giữa các dấu thời gian ISO 8601 dưới mili giây hoặc nano giây mà không xảy ra xung đột cắt bớt ngày bằng cách sử dụng Temporal.Instant.

Hiển thị và tính toán ngày trong các hệ thống lịch không phải lịch Gregory (ví dụ: lịch Hồi giáo, lịch Do Thái hoặc lịch Trung Quốc) một cách chính xác cho người dùng quốc tế.

Biên dịch C/C++ sang WebAssembly bằng Emscripten

Chia nhỏ quá trình xử lý đồng bộ nặng (các phép tính phức tạp và/hoặc vòng lặp dài) hoặc các bản cập nhật DOM để cho phép trình duyệt xử lý hoạt động đầu vào của người dùng và vẽ lại màn hình.

Tính tổng thời gian người dùng thực sự xem một trang, không bao gồm khoảng thời gian thẻ ở chế độ nền.

Tải hoặc khởi chạy các phần phụ thuộc không đồng bộ theo điều kiện (chẳng hạn như nhập polyfill cho các tính năng web bị thiếu) mà không cần điều phối phức tạp trên tất cả các phần phụ thuộc tập lệnh của trang.

Debounce và gom nhiều sự kiện phân tích, đo từ xa và Core Web Vitals vào một beacon duy nhất để giảm thiểu xung đột mạng và giảm tải cho máy chủ, trong khi vẫn cung cấp thông tin cập nhật theo thời gian thực.

Giảm thời gian kết xuất trong các trang web có nhiều nội dung (ví dụ: trang có nguồn cấp dữ liệu dài, nhiều bài viết hoặc trang tổng quan phức tạp) bằng cách trì hoãn việc kết xuất cho mọi nội dung mà người dùng không nhìn thấy ngay.

Trì hoãn các thao tác tốn kém như cập nhật DOM, tìm nạp dữ liệu, theo dõi số liệu phân tích hoặc tính toán lại bố cục cho đến khi quá trình cuộn hoàn tất để duy trì hiệu suất cuộn mượt mà.

Cung cấp hình ảnh trang trí được tối ưu hoá (chẳng hạn như nền, biểu tượng giao diện người dùng hoặc mặt nạ phức tạp) bằng cách đồng thời cung cấp các định dạng hình ảnh thế hệ mới (như AVIF hoặc WebP) cùng với nhiều mật độ pixel (như 1x và 2x) để trình duyệt có thể linh động điều chỉnh sự kết hợp tốt nhất giữa kích thước tệp và chất lượng hình ảnh cho phù hợp với khả năng của thiết bị của người dùng.

Giảm mức độ ưu tiên của các hoạt động tìm nạp dữ liệu trong nền được thực hiện bằng Fetch API để tránh tranh chấp mạng với các yêu cầu do người dùng thực hiện.

Xác định một cách đáng tin cậy xem ban đầu một trang có được tải ở chế độ nền hay không, ngay cả trong trường hợp tập lệnh được tải không đồng bộ sau khi người dùng đưa trang lên nền trước.

Tiết kiệm tài nguyên hệ thống và thời lượng pin bằng cách tạm dừng thực thi JavaScript trong nền (chẳng hạn như ảnh động <canvas>, kết xuất WebGL hoặc thăm dò dữ liệu WebSocket tần suất cao) khi thành phần nằm ngoài màn hình, sau đó tiếp tục thực thi ngay khi thành phần đó xuất hiện trở lại.

Cho phép chuyển đổi nhanh hơn về các chế độ xem đã truy cập trước đó trong Ứng dụng một trang (SPA) bằng cách giữ nguyên trạng thái DOM cấu trúc thay vì huỷ và tạo lại các chế độ xem đó trong mỗi lần điều hướng.

Phân phối và hiển thị các thử nghiệm A/B, thử nghiệm đa biến hoặc các thử nghiệm khác bằng JavaScript phía máy khách để thay đổi hoặc chèn HTML, CSS và JavaScript mà không hiển thị nội dung nguyên gốc trước khi nhấp nháy hoặc nhấp nháy để hiển thị nội dung thử nghiệm.

Xác định JavaScript chạy chậm và các nguyên nhân khác khiến khả năng phản hồi của chỉ số Lượt tương tác đến nội dung hiển thị tiếp theo (INP) kém.

Xác định các tập lệnh chịu trách nhiệm chính cho khung hoạt hoạ cần nhiều thời gian

Cải thiện hiệu suất tải trang bằng cách tìm nạp trước hoặc kết xuất trước những trang mà người dùng có khả năng sẽ truy cập tiếp theo.

Trì hoãn việc tải các thành phần video và âm thanh ngoài màn hình xuống, bao gồm cả hình ảnh áp phích video và dữ liệu nội dung nghe nhìn được tải trước, cho đến khi trình phát nội dung nghe nhìn tiếp cận khung nhìn để tiết kiệm băng thông và giảm tranh chấp mạng trong quá trình tải trang ban đầu.

Đo lường thời gian cần thiết để các hoạt động tương tác của người dùng và thao tác điều hướng phía máy khách hiển thị nội dung cập nhật mới trên màn hình.

Tối ưu hoá mức độ ưu tiên tải của hình ảnh đề xuất cho Nội dung lớn nhất hiển thị (LCP) và giảm mức độ ưu tiên của hình ảnh không quan trọng để giảm độ trễ khi tải tài nguyên quan trọng.

Tối ưu hoá mức độ ưu tiên tương đối của nội dung được tải trước để giảm độ trễ tải tài nguyên quan trọng.

Tối ưu hoá mức độ ưu tiên tải tập lệnh bằng cách tăng cường các tập lệnh không đồng bộ quan trọng và giảm mức độ ưu tiên của các tập lệnh không cần thiết hoặc tập lệnh ở cuối phần nội dung để cải thiện trình tự và giảm độ trễ.

Giúp các lượt tương tác trở nên nhanh chóng và thích ứng hơn (giảm điểm số Lượt tương tác đến nội dung hiển thị tiếp theo (INP)) bằng cách tránh tính toán lại bố cục trong các bố cục phức tạp, chẳng hạn như trang tổng quan chứa nhiều dữ liệu hoặc lưới kiểu bảng tính.

Cập nhật một trang theo cách khai báo bằng nội dung được truyền trực tuyến sau đó vào cùng một tài liệu HTML hoặc thông qua các API JavaScript bắt buộc.

Hướng dẫn hữu ích để tối ưu hoá các ứng dụng web hiện đại. Hãy sử dụng hướng dẫn này khi kiểm tra hiệu suất, tối ưu hoá chỉ số tải, khắc phục các lượt tương tác chậm và tối ưu hoá Core Web Vitals (LCP, INP, CLS)

Theo dõi một cách đáng tin cậy số liệu phân tích, Core Web Vitals, lỗi và dữ liệu đo từ xa trong toàn bộ lượt truy cập trang của người dùng, đồng thời trì hoãn việc gửi dữ liệu cho đến khi người dùng rời khỏi trang.

Sử dụng hình ảnh được tối ưu hoá độ phân giải trong các phần tử giả CSS (chẳng hạn như ::before và ::after) để giảm số lượng nút DOM.

Lên lịch cho các tác vụ có mức độ ưu tiên khác nhau để đảm bảo công việc quan trọng chạy trước, còn công việc trong nền thì bị trì hoãn.

Nguyên tắc lập trình hữu ích để xây dựng ứng dụng web dễ tiếp cận, bao gồm HTML ngữ nghĩa, quản lý tiêu điểm, biểu mẫu, nội dung nghe nhìn và kiểm thử. Hãy sử dụng bộ tính năng này khi kiểm tra hoặc triển khai bộ tính năng hỗ trợ tiếp cận, thao tác bằng bàn phím hoặc ARIA.

Đồng bộ hoá các trạng thái hỗ trợ tiếp cận có lập trình (như aria-invalid) với trạng thái :user-invalid trực quan để đảm bảo người dùng trình đọc màn hình chỉ nhận được phản hồi lỗi sau khi tương tác, phản ánh trải nghiệm trực quan.

Sử dụng nội dung do CSS tạo (::before/::after) theo cách dễ tiếp cận, bao gồm cả văn bản thay thế cho nội dung trang trí.

Tuân thủ lựa chọn ưu tiên về tỷ lệ văn bản của hệ điều hành cho một trang để cỡ chữ, bố cục và số đo dựa trên rem tuân theo chế độ cài đặt hỗ trợ tiếp cận của người dùng.

So sánh và xác thực nguồn gốc trang web cũng như trang web một cách an toàn trên các thông báo và URL giữa các tài liệu mà không cần phân tích cú pháp chuỗi dễ xảy ra lỗi.

Thiết lập khoá bí mật dùng chung bằng cách sử dụng phương thức đóng gói khoá công khai hoặc thoả thuận khoá (bao gồm cả biện pháp bảo vệ kết hợp và hậu lượng tử) và mã hoá dữ liệu nhạy cảm trong trình duyệt bằng phương thức mã hoá đã xác thực.

Truy cập vào tài nguyên trên mạng cục bộ hoặc giao diện lặp lại của người dùng từ một ứng dụng web công khai.

Xác thực người dùng cũ bằng khoá truy cập để đăng nhập chính.

Đăng ký khoá truy cập một cách thầm lặng cho người dùng hiện tại sau khi đăng nhập thành công bằng mật khẩu.

Cho phép người dùng xem và quản lý các khoá truy cập đã đăng ký cho tài khoản của họ.

Xác minh danh tính của người dùng đã đăng nhập bằng khoá truy cập hiện có của họ trước khi thực hiện một hành động nhạy cảm.

Đăng ký khoá truy cập cho một tài khoản người dùng hiện có.

Hướng dẫn toàn diện và các nguyên tắc chung để triển khai WebAuthn và Khoá truy cập trong ứng dụng web. Hãy sử dụng hướng dẫn này khi xử lý quy trình đăng ký, xác thực, quản lý hoặc xác thực lại khoá truy cập.

Ngăn chặn các cuộc tấn công XSS dựa trên DOM bằng cách xác định chính sách Trusted Types để dọn dẹp HTML không đáng tin cậy, sử dụng chính sách này khi ghi vào các bồn lưu trữ DOM như innerHTML và thực thi Trusted Types thông qua Chính sách bảo mật nội dung.

Xác thực người dùng cũ tại chỗ bằng khoá truy cập hoặc mật khẩu đã lưu của họ trước khi chuyển đến trang đăng nhập hoặc làm gián đoạn quy trình làm việc của họ.

Hạn chế một trang hoặc trình chạy chỉ giao tiếp với một danh sách cho phép rõ ràng gồm các điểm cuối mạng để ngăn chặn các yêu cầu trái phép của bên thứ ba và việc trích xuất dữ liệu phía máy khách.

Phân tích cú pháp và hiển thị nội dung HTML không đáng tin cậy một cách an toàn từ hoạt động đầu vào của người dùng bằng cách xoá các phần tử và thuộc tính không an toàn.

Xác minh tính toàn vẹn của mật mã học đối với các tập lệnh, biểu định kiểu, phông chữ và hình ảnh bên ngoài được tải từ các nguồn gốc bên thứ ba, đồng thời kiểm soát xem các yêu cầu đó có gửi thông tin đăng nhập hoặc URL liên kết giới thiệu hay không.

Ký và xác minh thông báo, mã thông báo hoặc cấu phần phần mềm trong trình duyệt bằng khoá bất đối xứng cổ điển hoặc kháng lượng tử (hậu lượng tử) để đảm bảo tính toàn vẹn và tính xác thực của dữ liệu.

Xác minh rằng người dùng sở hữu một địa chỉ email trong quá trình tạo, đăng nhập hoặc khôi phục tài khoản mà không cần gửi mật mã một lần hoặc email chứa đường liên kết dùng một lần.

Nguyên tắc bảo mật phòng ngừa cho nhà phát triển web (XSS, CSP, Cookie, Cách ly nhiều nguồn gốc). Hãy sử dụng kỹ năng này để hướng dẫn quy trình kiểm tra, thử nghiệm và triển khai các chính sách bảo mật một cách an toàn.

Nguyên tắc hành động dành cho nhà phát triển web để triển khai bảo vệ quyền riêng tư ngay từ đầu, giảm tối đa việc thu thập dữ liệu, kiểm tra của bên thứ ba và xử lý dữ liệu an toàn. Hãy sử dụng kỹ năng này khi thiết kế ứng dụng, tích hợp dịch vụ của bên thứ ba, xử lý dữ liệu người dùng hoặc định cấu hình tiêu đề bảo mật.

Chuyển một ứng dụng web đã cài đặt sang một nguồn gốc mới, đồng thời giữ nguyên cấu hình người dùng và lối tắt ở cấp hệ điều hành.

Phát hiện ngôn ngữ của nội dung do người dùng tạo hoặc nội dung trang web hiện có.

Chạy suy luận ngôn ngữ tự nhiên trên thiết bị trong trình duyệt bằng Prompt API, với kết quả đầu ra trực tuyến, phản hồi JSON có cấu trúc và quản lý phiên nhiều lượt.

Tóm tắt nội dung văn bản bằng Summarizer API trên thiết bị.

Dịch văn bản giữa các ngôn ngữ bằng Translator API trên thiết bị.

Cung cấp chức năng phía máy khách dưới dạng công cụ cho tác nhân AI bằng cách chú thích các biểu mẫu HTML chuẩn bằng các thuộc tính WebMCP.

Đăng ký các hàm JavaScript phía máy khách theo phương thức lập trình dưới dạng công cụ cho tác nhân AI bằng WebMCP Imperative API.

Hãy sử dụng hướng dẫn này để triển khai WebMCP (Giao thức bối cảnh mô hình web) trong các ứng dụng trình duyệt, hiển thị chức năng phía máy khách dưới dạng công cụ cho các tác nhân AI thông qua API khai báo hoặc bắt buộc.