Lập trình

Thuật ngữ chỉnh CSS cho thay đổi trang

Tra cứu phần đầu trang, nút, khoảng cách, trạng thái rê chuột, bố cục thích ứng và các thuật ngữ CSS/UI khi yêu cầu sửa trang.

63 mục

Cấu trúc trang

Tiêu đề

Header

Ý nghĩa

Khu vực trên cùng của một trang, thường chứa tiêu đề trang web, điều hướng, điều khiển chủ đề, điều khiển ngôn ngữ và nút menu.

Cách sửa

Thay đổi khoảng cách đệm (padding), chiều cao, đường viền hoặc vị trí của tiêu đề sẽ thay đổi cảm giác về độ cao và tính cố định của khu vực trên cùng.

Lưu ý

Một tiêu đề cao hơn có thể làm giảm diện tích hiển thị nội dung, đặc biệt là trên thiết bị di động.

CSS liên quan

headerpaddingheightpositionborder-bottom

Ví dụ yêu cầu

Làm cho tiêu đề trên thiết bị di động nhỏ hơn, đồng thời giữ nguyên chiều cao của tiêu đề.

Cấu trúc trang

Chân trang

Footer

Ý nghĩa

Khu vực dưới cùng của một trang, thường được sử dụng cho các liên kết, văn bản pháp lý, thông tin liên hệ hoặc điều hướng nhỏ.

Cách sửa

Việc thay đổi khoảng cách và đường viền của chân trang ảnh hưởng đến khoảng trống và sự tách biệt khỏi nội dung phía trên.

CSS liên quan

footerpaddingborder-topmargin-top

Ví dụ yêu cầu

Thêm nhiều khoảng đệm phía trên chân trang để nó không cảm thấy gắn liền với nội dung.

Cấu trúc trang

Phần

Section

Ý nghĩa

Một khu vực nội dung lớn nhóm các nội dung liên quan, chẳng hạn như hình ảnh nổi bật, danh sách công cụ, thẻ tham khảo hoặc khối nội dung.

Cách sửa

Khoảng cách phần thay đổi nhịp điệu dọc của trang. Việc thay đổi nền làm cho phần cảm thấy tách biệt.

CSS liên quan

sectionpadding-blockborder-topbackground

Ví dụ yêu cầu

Giảm khoảng đệm dọc của phần công cụ trên thiết bị di động.

Cấu trúc trang

Container

Ý nghĩa

Một lớp bọc bên trong giữ cho nội dung trang không bị giãn quá rộng trên các màn hình lớn.

Cách sửa

Tăng chiều rộng tối đa làm cho nội dung rộng hơn. Tăng khoảng cách bên giữ nội dung cách xa các cạnh màn hình.

CSS liên quan

max-widthmargin-inlinepadding-inline

Ví dụ yêu cầu

Làm cho vùng chứa chính hẹp hơn một chút trên máy tính để bàn.

Cấu trúc trang

Thẻ

Card

Ý nghĩa

Một khối được bao quanh trình bày một mục lặp lại, chẳng hạn như một công cụ, mục tham khảo hoặc kết quả.

Cách sửa

Khoảng cách, đường viền, bán kính và bóng của thẻ kiểm soát mức độ dày đặc hoặc nổi bật của mỗi mục.

CSS liên quan

borderborder-radiuspaddingbackgroundbox-shadow

Ví dụ yêu cầu

Làm cho các thẻ tham khảo nhỏ gọn hơn bằng cách giảm khoảng cách đệm.

Cấu trúc trang

Khu vực

Panel

Ý nghĩa

Một khu vực làm việc được bao quanh, thường chứa các điều khiển, đầu vào, cài đặt hoặc đầu ra.

Cách sửa

Khoảng cách và bố cục của các khu vực ảnh hưởng đến cảm giác dễ sử dụng của các công cụ.

CSS liên quan

borderbackgroundpaddingdisplay

Ví dụ yêu cầu

Căn chỉnh các điều khiển bảng điều khiển theo chiều ngang trên máy tính để bàn và xếp chồng chúng trên thiết bị di động.

Cấu trúc trang

Điều hướng

Navigation

Ý nghĩa

Một nhóm các liên kết hoặc nút được sử dụng để di chuyển giữa các trang hoặc danh mục chính.

Cách sửa

Khoảng trống, căn chỉnh và các quy tắc hiển thị thay đổi cách điều hướng hoạt động trên máy tính để bàn và thiết bị di động.

CSS liên quan

navdisplaygapalign-items

Ví dụ yêu cầu

Ẩn các liên kết điều hướng trên màn hình nhỏ và giữ nút menu hiển thị.

Cấu trúc trang

Menu (thực đơn)

Ý nghĩa

Một danh sách các liên kết hoặc hành động mở từ một nút.

Cách sửa

Vị trí, chiều rộng và chỉ mục z quyết định vị trí menu mở và liệu nó có hiển thị trên các nội dung khác hay không.

Lưu ý

Nếu menu được đặt trong luồng tài liệu bình thường, nó có thể đẩy toàn bộ trang xuống dưới.

CSS liên quan

positionrighttopz-indexwidth

Ví dụ yêu cầu

Mở menu dưới dạng một bảng nổi, căn phải.

Cấu trúc trang

Thanh bên

Sidebar

Ý nghĩa

Một khu vực dọc ở phía bên trái hoặc bên phải của trang, thường được sử dụng để điều hướng hoặc lọc.

Cách sửa

Độ rộng của thanh bên và các quy tắc đáp ứng quyết định xem nó có hiển thị, ẩn đi hoặc di chuyển xuống dưới nội dung hay không.

CSS liên quan

asidewidthpositiongrid-template-columns

Ví dụ yêu cầu

Di chuyển thanh bên bộ lọc xuống dưới nội dung trên thiết bị di động.

Cấu trúc trang

Hình ảnh nổi bật

Hero

Ý nghĩa

Phần lớn đầu tiên của một trang giới thiệu mục đích hoặc hành động chính.

Cách sửa

Padding của hình ảnh nổi bật, kích thước tiêu đề và bố cục ảnh hưởng đến ấn tượng đầu tiên và lượng nội dung hiển thị trong khung nhìn đầu tiên.

CSS liên quan

paddingbackgroundmin-heightgrid

Ví dụ yêu cầu

Giảm kích thước tiêu đề chính trên thiết bị di động để các nút hành động vẫn hiển thị.

Khoảng cách và kích thước

Đệm

Padding

Ý nghĩa

Khoảng trống bên trong một phần tử, giữa đường viền và nội dung.

Cách sửa

Tăng khoảng cách trên thêm không gian phía trên nội dung bên trong phần tử.

Lưu ý

Khoảng đệm lớn hơn thường làm tăng kích thước hiển thị của phần tử.

CSS liên quan

paddingpadding-toppadding-rightpadding-bottompadding-left

Ví dụ yêu cầu

Tăng khoảng cách trên của tiêu đề một chút.

Khoảng cách và kích thước

Margin (lề)

Margin

Ý nghĩa

Khoảng trống bên ngoài một phần tử, giữa nó và các phần tử lân cận.

Cách sửa

Tăng khoảng cách dưới đẩy phần tử tiếp theo xuống xa hơn.

CSS liên quan

marginmargin-topmargin-rightmargin-bottommargin-left

Ví dụ yêu cầu

Thêm nhiều khoảng cách hơn giữa phần chính (hero section) và danh sách công cụ.

Khoảng cách và kích thước

Khoảng trống

Gap

Ý nghĩa

Khoảng cách giữa các mục bên trong bố cục flex hoặc lưới.

Cách sửa

Tăng khoảng cách giữa các mục liền kề mà không thêm khoảng trống xung quanh toàn bộ nhóm.

CSS liên quan

gaprow-gapcolumn-gap

Ví dụ yêu cầu

Giảm khoảng cách giữa nút chủ đề, nút ngôn ngữ và nút menu.

Khoảng cách và kích thước

Chiều rộng

Width

Ý nghĩa

Kích thước theo chiều ngang của một phần tử.

Cách sửa

Chiều rộng cố định giữ cho phần tử ổn định. max-width cho phép nó thu nhỏ trên các màn hình nhỏ.

CSS liên quan

widthmin-widthmax-width

Ví dụ yêu cầu

Đặt chiều rộng của bảng menu bằng chiều dài của mục dài nhất.

Khoảng cách và kích thước

Chiều cao

Height

Ý nghĩa

Kích thước dọc của một phần tử.

Cách sửa

Chiều cao cố định có thể giữ cho tiêu đề ổn định. `max-height` kết hợp với `overflow` có thể ngăn không cho các dropdown trở nên quá cao.

CSS liên quan

heightmin-heightmax-height

Ví dụ yêu cầu

Giữ chiều cao tiêu đề ổn định đồng thời làm cho tiêu đề nhỏ hơn.

Khoảng cách và kích thước

Max width (chiều rộng tối đa)

Max width

Ý nghĩa

Độ rộng lớn nhất mà một phần tử được phép đạt đến.

Cách sửa

Giảm max-width làm cho các dòng văn bản ngắn hơn và các bảng điều khiển hẹp hơn trên màn hình lớn.

CSS liên quan

max-widthwidth

Ví dụ yêu cầu

Đặt chiều rộng tối đa cho menu thả xuống để nó không che quá nhiều phần của trang.

Khoảng cách và kích thước

Trên / Phải / Dưới / Trái

Top / Right / Bottom / Left

Ý nghĩa

Các độ lệch vị trí được sử dụng với các phần tử được định vị.

Cách sửa

right: 0 căn chỉnh một bảng điều khiển nổi vào cạnh phải của phần tử cha được định vị.

CSS liên quan

toprightbottomleftinset

Ví dụ yêu cầu

Căn chỉnh bảng điều khiển menu mở vào cạnh phải của các điều khiển tiêu đề.

Chữ

Kích thước phông chữ.

Font size

Ý nghĩa

Kích thước của văn bản.

Cách sửa

Giảm kích thước phông chữ giúp các nhãn dài vừa với các không gian chật hẹp, chẳng hạn như tiêu đề trên thiết bị di động.

CSS liên quan

font-sizetext-smtext-lg

Ví dụ yêu cầu

Làm cho tiêu đề trang web trên thiết bị di động nhỏ hơn, nhưng vẫn nằm trên một dòng.

Chữ

Độ đậm của phông chữ

Font weight

Ý nghĩa

Văn bản có vẻ đậm hoặc in đậm như thế nào?

Cách sửa

Tăng độ đậm của phông chữ làm cho các nhãn rõ ràng hơn mà không thay đổi kích thước của chúng.

CSS liên quan

font-weightfont-boldfont-semibold

Ví dụ yêu cầu

Làm cho nhãn phân loại đậm hơn một chút.

Chữ

Chiều cao dòng

Line height

Ý nghĩa

Khoảng không gian dọc mà mỗi dòng văn bản chiếm.

Cách sửa

Tăng chiều cao dòng làm cho các đoạn văn dễ đọc hơn. Giảm nó làm cho các nhãn UI nhỏ gọn hơn.

CSS liên quan

line-heightleading

Ví dụ yêu cầu

Tăng chiều cao dòng của đoạn văn trong phần mô tả chính.

Chữ

Khoảng cách giữa các chữ cái

Letter spacing

Ý nghĩa

Khoảng cách giữa các chữ cái riêng lẻ.

Cách sửa

Khoảng cách nhỏ có thể giúp các nhãn in hoa dễ đọc hơn. Khoảng cách quá lớn có thể khiến văn bản tiếng Hàn trở nên khó chịu.

CSS liên quan

letter-spacingtracking

Ví dụ yêu cầu

Loại bỏ khoảng cách giữa các chữ cái âm tính khỏi các nút nhỏ gọn.

Chữ

Căn chỉnh văn bản

Text align

Ý nghĩa

Cách căn chỉnh văn bản theo chiều ngang bên trong vùng chứa của nó.

Cách sửa

Văn bản menu căn phải có thể khiến menu nổi có cảm giác gắn liền với cạnh phải.

CSS liên quan

text-align

Ví dụ yêu cầu

Căn chỉnh văn bản của mục menu sang phải bên trong bảng điều khiển menu.

Chữ

Bọc / Không bọc

Wrap / No wrap

Ý nghĩa

Văn bản dài có thể xuống dòng mới hay phải nằm trên một dòng.

Cách sửa

"No-wrap" giữ tiêu đề ổn định, trong khi "wrapping" có thể hiển thị nhiều văn bản hơn nhưng thường làm tăng chiều cao.

CSS liên quan

white-spaceword-breakoverflow-wrap

Ví dụ yêu cầu

Giữ tiêu đề trên thiết bị di động trên một dòng và cắt các phần vượt quá.

Chữ

Cắt ngắn / Dấu ba chấm

Truncate / Ellipsis

Ý nghĩa

Một cách để cắt bỏ văn bản một dòng bị tràn và hiển thị dấu chấm.

Cách sửa

Việc cắt ngắn ngăn ngừa sự phá vỡ bố cục khi nhãn dài hơn dự kiến.

CSS liên quan

overflowtext-overflowwhite-space

Ví dụ yêu cầu

Cắt ngắn tiêu đề trang web trên các màn hình rất nhỏ.

Màu và nền

Màu sắc

Color

Ý nghĩa

Màu của văn bản hoặc biểu tượng.

Cách sửa

Thay đổi màu sắc ảnh hưởng đến khả năng đọc và mức độ ưu tiên thị giác.

CSS liên quan

color

Ví dụ yêu cầu

Đảm bảo văn bản ngôn ngữ đã chọn hiển thị trong chế độ tối.

Màu và nền

Bối cảnh

Background

Ý nghĩa

Màu hoặc hình ảnh nằm phía sau nội dung của một phần tử.

Cách sửa

Thay đổi màu nền có thể phân tách các bảng điều khiển, làm nổi bật trạng thái hoạt động hoặc cải thiện độ tương phản.

CSS liên quan

backgroundbackground-color

Ví dụ yêu cầu

Sử dụng màu nền tối hơn cho mục ngôn ngữ đã chọn ở chế độ tối.

Màu và nền

Độ trong suốt.

Opacity

Ý nghĩa

Một phần tử trong suốt như thế nào?

Cách sửa

Độ mờ thấp làm cho các thành phần trở nên tinh tế hơn, nhưng có thể làm giảm khả năng đọc.

CSS liên quan

opacityrgbacolor-mix

Ví dụ yêu cầu

Làm cho các điều khiển bị vô hiệu hóa trông mờ hơn mà không làm cho văn bản khó đọc.

Màu và nền

Độ dốc

Gradient

Ý nghĩa

Một chuyển đổi mượt mà giữa hai hoặc nhiều màu.

Cách sửa

Các độ dốc nhẹ có thể tạo chiều sâu, nhưng các độ dốc mạnh có thể khiến các công cụ trở nên ít thực tế hơn.

CSS liên quan

linear-gradientradial-gradientbackground-image

Ví dụ yêu cầu

Giữ nền hero tinh tế và tránh gradient mạnh.

Màu và nền

Màu sắc nổi bật

Accent color

Ý nghĩa

Một màu nổi bật lặp lại được sử dụng cho nhãn, trạng thái hoạt động hoặc các hành động quan trọng.

Cách sửa

Thay đổi màu sắc nhấn (accent color) sẽ thay đổi bản sắc thị giác và sự nhấn mạnh của trang.

CSS liên quan

colorbackgroundborder-coloraccent-color

Ví dụ yêu cầu

Sử dụng cùng một màu nhấn màu xanh lá cây cho các nhãn danh mục và các nút đang hoạt động.

Màu và nền

So sánh

Contrast

Ý nghĩa

Sự khác biệt giữa màu nền và màu trước.

Cách sửa

Độ tương phản cao giúp cải thiện khả năng đọc, đặc biệt là ở chế độ tối và trên màn hình di động.

CSS liên quan

colorbackground-color

Ví dụ yêu cầu

Tăng độ tương phản của các mục thả xuống ở chế độ tối.

Viền và hình dạng

Viền

Border

Ý nghĩa

Một đường bao quanh một phần tử.

Cách sửa

Độ rộng và màu của viền kiểm soát mức độ tách biệt của một hộp hoặc nút khỏi nền.

CSS liên quan

borderborder-colorborder-widthborder-style

Ví dụ yêu cầu

Làm cho đường viền của bảng menu tối hơn trong chế độ tối.

Viền và hình dạng

Bán kính viền

Border radius

Ý nghĩa

Các góc của một hộp hoặc nút được làm tròn như thế nào?

Cách sửa

Một bán kính nhỏ tạo cảm giác thực tế và nhỏ gọn. Một bán kính lớn tạo cảm giác mềm mại và vui tươi hơn.

CSS liên quan

border-radius

Ví dụ yêu cầu

Giữ các thẻ với bán kính góc 8px.

Viền và hình dạng

Bóng viền

Box shadow

Ý nghĩa

Một vùng tối xung quanh một phần tử, tạo cảm giác như nó nổi lên trên trang.

Cách sửa

Bóng tối mạnh mẽ làm cho các menu hoặc hộp thoại nổi cảm giác có chiều sâu. Quá nhiều bóng tối có thể tạo cảm giác nặng nề.

CSS liên quan

box-shadow

Ví dụ yêu cầu

Thêm một bóng đổ tinh tế cho bảng điều khiển menu nổi.

Viền và hình dạng

Bản phác thảo.

Outline

Ý nghĩa

Một đường được hiển thị xung quanh một phần tử, thường khi phần tử đó được chọn bằng điều hướng bàn phím.

Cách sửa

Một phác thảo rõ ràng giúp người dùng bàn phím biết điều khiển nào đang hoạt động.

CSS liên quan

outlineoutline-offset:focus-visible

Ví dụ yêu cầu

Giữ cho đường viền tập trung hiển thị trên các nút biểu tượng.

Viền và hình dạng

Phân cách

Divider

Ý nghĩa

Một đường được sử dụng để phân tách các phần hoặc nhóm.

Cách sửa

Một bộ phân có thể làm rõ ranh giới danh mục mà không cần thêm nhiều yếu tố hình ảnh.

CSS liên quan

border-topborder-bottomhr

Ví dụ yêu cầu

Thêm các đường phân cách tinh tế giữa các danh mục menu.

Bố cục và vị trí

Hiển thị

Display

Ý nghĩa

Chế độ bố cục cơ bản của một phần tử.

Cách sửa

display: none ẩn một phần tử. flex và grid sắp xếp các phần tử con.

CSS liên quan

displaydisplay: nonedisplay: flexdisplay: grid

Ví dụ yêu cầu

Ẩn điều hướng trên màn hình di động.

Bố cục và vị trí

Linh hoạt.

Flex

Ý nghĩa

Một phương pháp bố cục để sắp xếp các mục thành một hàng hoặc một cột.

Cách sửa

flex-direction: column xếp các phần tử theo chiều dọc. flex-wrap cho phép các phần tử di chuyển đến dòng tiếp theo.

CSS liên quan

display: flexflex-directionflex-wrapgap

Ví dụ yêu cầu

Giữ các điều khiển tiêu đề trong một hàng flex.

Bố cục và vị trí

Lưới

Grid

Ý nghĩa

Một phương pháp bố cục để sắp xếp nội dung thành các hàng và cột.

Cách sửa

Thay đổi số lượng cột lưới để kiểm soát số lượng thẻ hiển thị trên mỗi hàng.

CSS liên quan

display: gridgrid-template-columnsgrid-columngap

Ví dụ yêu cầu

Hiển thị bốn thẻ công cụ mỗi hàng trên màn hình máy tính để bàn lớn.

Bố cục và vị trí

Căn chỉnh các mục

Align items

Ý nghĩa

Các mục được căn chỉnh như thế nào trên trục ngang bên trong flex hoặc grid?

Cách sửa

align-items: center căn giữa các điều khiển theo chiều dọc trong một hàng tiêu đề.

CSS liên quan

align-itemsplace-items

Ví dụ yêu cầu

Căn chỉnh theo chiều dọc tiêu đề và nút tiêu đề.

Bố cục và vị trí

Giải thích nội dung

Justify content

Ý nghĩa

Các mục được phân phối như thế nào trên trục chính bên trong flex hoặc grid?

Cách sửa

justify-content: space-between đẩy các nhóm đến các phía đối diện.

CSS liên quan

justify-contentjustify-itemsmargin-left: auto

Ví dụ yêu cầu

Giữ tiêu đề ở bên trái và các điều khiển ở bên phải.

Bố cục và vị trí

Vị trí

Position

Ý nghĩa

Cách một phần tử được đặt so với trang hoặc một phần tử khác.

Cách sửa

position: absolute cho phép một hộp thả xuống nổi mà không đẩy bố cục trang xuống.

CSS liên quan

positionrelativeabsolutefixedsticky

Ví dụ yêu cầu

Đặt vị trí của bảng menu là tuyệt đối để nó không đẩy trang xuống dưới.

Bố cục và vị trí

Chỉ số Z

Z-index

Ý nghĩa

Thứ tự xếp chồng của các phần tử được định vị.

Cách sửa

Giá trị `z-index` cao hơn có thể đặt các hộp thả xuống phía trên nội dung trang.

Lưu ý

z-index chỉ hoạt động một cách đáng tin cậy khi xem xét ngữ cảnh định vị và xếp chồng.

CSS liên quan

z-indexposition

Ví dụ yêu cầu

Đặt hộp thả ngôn ngữ phía trên bảng điều khiển menu.

Bố cục và vị trí

Tràn.

Overflow

Ý nghĩa

Điều gì xảy ra khi nội dung lớn hơn kích thước của container.

Cách sửa

overflow-y: auto cho phép một menu dài có thể cuộn thay vì mở rộng vượt quá màn hình.

CSS liên quan

overflowoverflow-xoverflow-ymax-height

Ví dụ yêu cầu

Làm cho các menu thả xuống dài có thể cuộn bên trong một max-height.

Responsive

Điểm ngắt

Breakpoint

Ý nghĩa

Một chiều rộng màn hình mà tại đó bố cục thay đổi.

Cách sửa

Thay đổi điểm ngắt quyết định liệu máy tính bảng hoạt động giống như thiết bị di động hay máy tính để bàn.

CSS liên quan

@mediasmmdlgxl

Ví dụ yêu cầu

Xem xét máy tính bảng như một máy tính để bàn cho thanh điều hướng trên cùng.

Responsive

Thiết bị di động

Mobile

Ý nghĩa

Kiểu dáng dành cho màn hình điện thoại nhỏ.

Cách sửa

Các kiểu dáng trên thiết bị di động thường làm giảm kích thước phông chữ, xếp các cột chồng lên nhau và giữ cho các điều khiển thân thiện với cảm ứng.

CSS liên quan

@mediamax-widthsm

Ví dụ yêu cầu

Trên thiết bị di động, sắp xếp các thẻ thành một cột.

Responsive

Màn hình

Desktop

Ý nghĩa

Kiểu dáng dành cho màn hình máy tính xách tay hoặc máy tính để bàn lớn hơn.

Cách sửa

Các kiểu màn hình có thể sử dụng nhiều cột hơn, điều hướng ngang và các vùng chứa nội dung rộng hơn.

CSS liên quan

@mediamin-widthlgxl

Ví dụ yêu cầu

Trên máy tính để bàn, hãy giữ thanh điều hướng danh mục hiển thị trong tiêu đề.

Responsive

Cửa sổ hiển thị

Viewport

Ý nghĩa

Diện tích hiển thị của trình duyệt hoặc màn hình thiết bị.

Cách sửa

Đơn vị cửa sổ hiển thị làm cho kích thước tương đối so với màn hình hiển thị.

CSS liên quan

vwvh100vw100vh

Ví dụ yêu cầu

Hạn chế chiều rộng của menu để nó không tràn ra ngoài trên điện thoại.

Responsive

Ý nghĩa

Một thiết kế thích ứng với các kích thước màn hình khác nhau.

Cách sửa

Các quy tắc thích ứng có thể làm cho cùng một thành phần hiển thị theo chiều ngang trên máy tính để bàn và theo chiều dọc trên thiết bị di động.

CSS liên quan

@mediaclampmin()max()

Ví dụ yêu cầu

Đảm bảo các điều khiển hoạt động linh hoạt mà không thay đổi thứ tự của chúng.

Trạng thái tương tác

Di chuột

Hover

Ý nghĩa

Trạng thái khi con trỏ chuột nằm trên một phần tử.

Cách sửa

Các kiểu di chuột có thể thay đổi nền, màu văn bản, đường viền hoặc bóng để cho biết một mục có thể tương tác.

Lưu ý

Các thiết bị cảm ứng không có hành vi lướt đáng tin cậy, vì vậy các hành động quan trọng cũng nên hoạt động bằng cách nhấp hoặc chạm.

CSS liên quan

:hoverbackgroundcolortransition

Ví dụ yêu cầu

Thêm một thay đổi màu nền khi di chuột qua các mục menu.

Trạng thái tương tác

Hoạt động

Active

Ý nghĩa

Trạng thái ngắn trong khi một nút hoặc liên kết đang được nhấn.

Cách sửa

Các kiểu hoạt động có thể làm cho các nút có cảm giác chân thực hơn với một chút thay đổi về màu sắc hoặc vị trí.

CSS liên quan

:activetransformbackground

Ví dụ yêu cầu

Thêm một hiệu ứng nhấn nhẹ cho các nút trên thanh công cụ.

Trạng thái tương tác

Tập trung.

Focus

Ý nghĩa

Trạng thái khi một đầu vào, nút hoặc liên kết hiện đang được chọn bằng bàn phím hoặc gõ.

Cách sửa

Các kiểu tập trung giúp điều hướng bằng bàn phím trở nên rõ ràng và dễ tiếp cận.

CSS liên quan

:focus:focus-visibleoutline

Ví dụ yêu cầu

Làm cho vòng sáng khi chọn ô nhập liệu tìm kiếm khớp với màu nhấn.

Trạng thái tương tác

Vô hiệu hóa

Disabled

Ý nghĩa

Một trạng thái trong đó một điều khiển có thể hiển thị nhưng không thể sử dụng.

Cách sửa

Các kiểu vô hiệu hóa thường làm giảm độ tương phản và loại bỏ tương tác của con trỏ.

CSS liên quan

:disabledopacitycursorpointer-events

Ví dụ yêu cầu

Làm cho các nút bị vô hiệu hóa hiển thị rõ ràng là không hoạt động nhưng vẫn dễ đọc.

Trạng thái tương tác

Được chọn

Selected

Ý nghĩa

Trạng thái của mục hiện đang được chọn trong danh sách, nhóm tab hoặc menu.

Cách sửa

Các kiểu đã chọn thường cần màu nền hoặc màu văn bản mạnh hơn so với các mục bình thường.

CSS liên quan

aria-currentdata-statebackgroundcolor

Ví dụ yêu cầu

Làm cho chip (mã) danh mục đã chọn khác biệt rõ ràng so với các chip khác.

Trạng thái tương tác

Mở / Đóng.

Open / Closed

Ý nghĩa

Một menu thả xuống, menu hoặc bảng điều khiển accordion có hiển thị hay không.

Cách sửa

Trạng thái mở và đóng cần có các chỉ báo rõ ràng như biểu tượng cộng/trừ hoặc xoay mũi tên.

CSS liên quan

aria-expandeddisplayheightvisibility

Ví dụ yêu cầu

Giữ tất cả các danh mục menu ở trạng thái đóng theo mặc định.

Thành phần UI

Nút

Button

Ý nghĩa

Một điều khiển thực hiện một hành động khi được nhấp hoặc chạm vào.

Cách sửa

Khoảng cách, đường viền, màu sắc và trạng thái của nút xác định mức độ dễ sử dụng và quan trọng của nó.

CSS liên quan

buttonpaddingborderbackgroundcursor

Ví dụ yêu cầu

Làm cho nút hành động chính nổi bật hơn so với nút phụ.

Thành phần UI

Nút biểu tượng

Icon button

Ý nghĩa

Một nút được biểu thị chủ yếu bằng một biểu tượng thay vì văn bản.

Cách sửa

Chiều rộng và chiều cao cố định giúp các nút biểu tượng không bị dịch chuyển khi trạng thái thay đổi.

CSS liên quan

buttonwidthheightaria-labeldisplay: grid

Ví dụ yêu cầu

Giữ nút biểu tượng menu là hình vuông và căn chỉnh với nút ngôn ngữ.

Thành phần UI

Danh sách thả xuống (Dropdown)

Dropdown

Ý nghĩa

Một danh sách nổi mà xuất hiện sau khi nhấn một nút hoặc điều khiển chọn.

Cách sửa

Vị trí, chiều rộng, chiều cao tối đa và chỉ số z của danh sách thả xuống kiểm soát vị trí và lớp phủ.

CSS liên quan

positiontoprightz-indexbox-shadow

Ví dụ yêu cầu

Khi menu thả xuống ngôn ngữ mở ra, hãy đóng menu trang web.

Thành phần UI

Accordion (thanh trượt)

Accordion

Ý nghĩa

Một phần có thể được mở hoặc đóng để hiển thị hoặc ẩn nội dung của nó.

Cách sửa

Các thanh trượt (accordions) làm cho các menu dài ngắn hơn bằng cách giữ các danh mục ở trạng thái đóng cho đến khi cần thiết.

CSS liên quan

aria-expandedheightdisplayoverflow

Ví dụ yêu cầu

Thêm hành vi mở và đóng cho mỗi danh mục menu.

Thành phần UI

Các tab

Tabs

Ý nghĩa

Một điều khiển để chuyển đổi giữa các chế độ xem liên quan mà không cần rời khỏi trang.

Cách sửa

Kiểu tab đã chọn phải hiển thị rõ ràng chế độ xem nào đang hoạt động.

CSS liên quan

role=tablistdisplayborderbackground

Ví dụ yêu cầu

Làm cho nền của tab đang hoạt động tối hơn so với các tab không hoạt động.

Thành phần UI

Cửa sổ hội thoại

Modal

Ý nghĩa

Một bảng điều khiển nổi được tập trung xuất hiện phía trên trang.

Cách sửa

Chiều rộng, nền và chỉ số z của cửa sổ hội thoại kiểm soát mức độ ảnh hưởng của nó đến trang.

CSS liên quan

dialogposition: fixedinsetz-indexbackdrop

Ví dụ yêu cầu

Đặt modal ở giữa và giữ cho nó hẹp hơn độ rộng của viewport.

Thành phần UI

Mẹo

Tooltip

Ý nghĩa

Một gợi ý nhỏ hiển thị gần một điều khiển, thường khi di chuột hoặc khi điều khiển đang được chọn.

Cách sửa

Các mẹo giúp giải thích các nút chỉ có biểu tượng mà không cần thêm văn bản cố định.

CSS liên quan

positiontitlearia-describedbyz-index

Ví dụ yêu cầu

Thêm một chú thích (tooltip) để gắn nhãn cho nút biểu tượng trên menu.

Thành phần UI

Đầu vào

Input

Ý nghĩa

Một trường mà người dùng nhập văn bản hoặc giá trị.

Cách sửa

Khoảng cách, đường viền, màu sắc của phần giữ chỗ và kiểu khi đang được chọn của các phần tử nhập liệu ảnh hưởng đến sự thoải mái và rõ ràng.

CSS liên quan

inputborderpaddingplaceholder:focus

Ví dụ yêu cầu

Làm cho ô nhập liệu tìm kiếm có chiều rộng bằng toàn bộ màn hình và dễ dàng chạm vào trên thiết bị di động.

Thành phần UI

Huy hiệu / Chip

Badge / Chip

Ý nghĩa

Một nhãn hoặc điều khiển lọc nhỏ, tròn.

Cách sửa

Kích thước chip, bán kính và màu sắc ảnh hưởng đến cảm giác của các bộ lọc có thể quét được.

CSS liên quan

border-radiuspaddingbackgroundfont-size

Ví dụ yêu cầu

Làm cho các nút phân loại đang hoạt động nổi bật hơn về mặt thị giác.