Loại nút trong CSS là gì?

Có rất nhiều điều cần biết về các liên kết và các nút trong HTML. Có triển khai đánh dấu và các thuộc tính liên quan, các cách thực hành tốt nhất về kiểu dáng, những điều cần tránh và các mối quan hệ họ hàng thậm chí còn nhiều sắc thái hơn của liên kết. các nút và đầu vào giống như nút

Chúng ta hãy xem toàn bộ thế giới của các liên kết và nút cũng như tất cả các cân nhắc về các lớp HTML, CSS, JavaScript, thiết kế và khả năng truy cập đi kèm với chúng. Có rất nhiều cạm bẫy và thực hành xấu để tránh trên đường đi. Bằng cách bao phủ nó, chúng tôi sẽ có một triển khai UX hoàn chỉnh tốt cho cả hai yếu tố

Hướng dẫn nhanh về thời điểm sử dụng từng

• Bạn có đang cung cấp cho người dùng một cách để đi đến một trang khác hoặc một phần khác của cùng một trang không?
• Bạn có đang thực hiện một hành động có thể nhấp được hỗ trợ bởi JavaScript không?
• Bạn đang gửi biểu mẫu?

liên kết

Liên kết là một trong những khối xây dựng nền tảng và cơ bản sâu sắc nhất của web. Nhấp vào một liên kết và bạn chuyển sang một trang khác hoặc được chuyển đến một nơi khác trong cùng một trang

Mục lục

• triển khai HTML
• Cân nhắc về kiểu dáng và CSS
• Cân nhắc về JavaScript
• cân nhắc về khả năng tiếp cận

triển khai HTML

Liên kết cơ bản

CSS-Tricks

Đó là một liên kết đến một URL "đủ điều kiện" hoặc "tuyệt đối"

Liên kết tương đối

Bạn cũng có thể liên kết “tương đối”

About

Điều đó có thể hữu ích, chẳng hạn như trong quá trình phát triển khi tên miền có thể khác với trang sản xuất, nhưng bạn vẫn muốn có thể nhấp vào liên kết. URL tương đối hữu ích nhất cho những thứ như điều hướng, nhưng hãy cẩn thận khi sử dụng chúng trong nội dung — như bài đăng trên blog — nơi nội dung đó có thể được đọc bên ngoài trang web, chẳng hạn như trong ứng dụng hoặc nguồn cấp dữ liệu RSS

Một liên kết nhảy

Các liên kết cũng có thể là "liên kết băm" hoặc "liên kết nhảy" bằng cách bắt đầu bằng một số

a:not([href]) {
  /* style a "disabled" link */
}

0

Section Two

Nhấp vào liên kết đó sẽ "nhảy" (cuộn) đến phần tử đầu tiên trong DOM có ID khớp, giống như phần tử phần ở trên

💥 Mẹo nhỏ. Sử dụng một liên kết băm (e. g.

a:not([href]) {
  /* style a "disabled" link */
}

1) trong quá trình phát triển có thể hữu ích để bạn có thể nhấp vào liên kết mà không bị đưa trở lại đầu trang giống như khi nhấp vào liên kết

a:not([href]) {
  /* style a "disabled" link */
}

0. Nhưng hãy cẩn thận, các liên kết không liên kết ở bất cứ đâu sẽ không bao giờ được đưa vào sản xuất

💥 Mẹo nhỏ. Liên kết nhảy đôi khi có thể được hưởng lợi từ việc cuộn mượt mà để giúp mọi người hiểu rằng trang đang di chuyển từ nơi này sang nơi khác

Việc nhìn thấy liên kết “Trở lại đầu trang” trên các trang web là một điều khá phổ biến, đặc biệt khi các điều khiển điều hướng quan trọng ở trên cùng nhưng có khá nhiều nội dung để cuộn (hoặc điều hướng) qua. Để tạo một liên kết nhảy, hãy liên kết đến ID của một phần tử ở đầu trang nơi có thể gửi tiêu điểm trở lại

Back to Top

Liên kết nhảy đôi khi cũng được sử dụng để liên kết đến các phần tử neo (

a:not([href]) {
  /* style a "disabled" link */
}

3) khác không có thuộc tính

a:not([href]) {
  /* style a "disabled" link */
}

4. Chúng được gọi là các liên kết “giữ chỗ”

Section 2

Có những cân nhắc về khả năng tiếp cận trong số này, nhưng nhìn chung chúng có thể chấp nhận được

Liên kết bị vô hiệu hóa

Liên kết không có thuộc tính

a:not([href]) {
  /* style a "disabled" link */
}

4 là cách thiết thực duy nhất để vô hiệu hóa liên kết. Tại sao vô hiệu hóa một liên kết?

a:not([href]) {
  /* style a "disabled" link */
}

Khi một liên kết không có

a:not([href]) {
  /* style a "disabled" link */
}

4, nó không có vai trò, không có tiêu điểm và không có sự kiện bàn phím. Đây là cố ý. Bạn có thể nghĩ nó giống như một

a:not([href]) {
  /* style a "disabled" link */
}

7

Bạn có cần liên kết để mở trong cửa sổ hoặc tab mới không?

Bạn có thể sử dụng thuộc tính

a:not([href]) {
  /* style a "disabled" link */
}

8 cho điều đó, nhưng nó không được khuyến khích

Section 2

8

Bit làm cho nó hoạt động là

a:not([href]) {
  /* style a "disabled" link */
}

9, nhưng hãy lưu ý thêm thuộc tính và giá trị

Section 2

80 ở đó giúp nó an toàn hơn và nhanh hơn

Làm cho các liên kết mở trong các tab mới là một cuộc thảo luận chính về UX. Chúng tôi có cả một bài viết về thời điểm sử dụng nó tại đây. tóm tắt

Đừng sử dụng nó

• Bởi vì bạn hoặc khách hàng của bạn thích nó hơn
• Bởi vì bạn đang cố gắng tăng thời gian của mình trên số liệu trang web
• Bởi vì bạn đang phân biệt giữa các liên kết bên trong và bên ngoài hoặc các loại nội dung
• Bởi vì đó là cách để bạn đối phó với sự phức tạp của cuộn vô hạn

Hãy sử dụng nó

• Bởi vì người dùng đang làm điều gì đó trên trang hiện tại, chẳng hạn như tích cực phát phương tiện hoặc có công việc chưa được lưu
• Bạn có một số lý do kỹ thuật mơ hồ mà bạn buộc phải làm vậy (thậm chí sau đó bạn vẫn có thể là quy tắc, không phải là ngoại lệ)

Cần liên kết để kích hoạt tải xuống?

Thuộc tính

Section 2

81 trên một liên kết sẽ hướng dẫn trình duyệt tải xuống tệp được liên kết thay vì mở nó trong trang/tab hiện tại. Đó là một trải nghiệm người dùng tuyệt vời

Section 2

2

Thuộc tính

Section 2

80

Thuộc tính này dành cho mối quan hệ của liên kết với mục tiêu

Thuộc tính

Section 2

80 cũng thường được sử dụng trên phần tử

Section 2

84 (không được sử dụng để tạo siêu liên kết mà dùng cho những thứ như bao gồm CSS và tải trước). Chúng tôi không bao gồm các giá trị

Section 2

80 cho phần tử

Section 2

84 ở đây, chỉ liên kết neo

Dưới đây là một số ví dụ cơ bản

Section 2

8

• 
  Section 2

  87. Phiên bản thay thế của tài liệu

• 
  Section 2

  88. Tác giả của tài liệu

• 
  Section 2

  89. Một nguồn trợ giúp với tài liệu

• 
  Section 2

  20. Giấy phép và thông tin pháp lý

• 
  Section 2

  21. Tài liệu Bản kê khai ứng dụng web

• 
  Section 2

  22. Tài liệu tiếp theo trong sê-ri

• 
  Section 2

  23. Tài liệu trước trong sê-ri

• 
  Section 2

  24. Một tài liệu dùng để thực hiện tìm kiếm trong tài liệu hiện tại

Ngoài ra còn có một số thuộc tính

Section 2

80 cụ thể để thông báo cho các công cụ tìm kiếm

• 
  Section 2

  26. Đánh dấu các liên kết là quảng cáo hoặc vị trí trả tiền (thường được gọi là liên kết trả phí) là được tài trợ

• 
  Section 2

  27. Đối với nội dung do người dùng tạo không đặc biệt đáng tin cậy, chẳng hạn như nhận xét và bài đăng trên diễn đàn

• 
  Section 2

  28. Yêu cầu công cụ tìm kiếm bỏ qua điều này và không liên kết trang web này với nơi liên kết này đến

Và cũng có một số thuộc tính

Section 2

80 tập trung vào bảo mật nhất

• 
  Section 2

  80. Ngăn tab mới sử dụng tính năng JavaScript

  
  Section 2

  81, tính năng này có khả năng truy cập vào trang chứa liên kết (trang web của bạn) để thực hiện những việc độc hại, chẳng hạn như đánh cắp thông tin hoặc chia sẻ mã bị nhiễm. Sử dụng cái này với

  a:not([href]) {
    /* style a "disabled" link */
  }

  9 thường là một ý kiến ​​hay

• 
  Section 2

  83. Ngăn chặn các trang web hoặc dịch vụ theo dõi khác (e. g. Google Analytics) khỏi việc xác định trang của bạn là nguồn của liên kết được nhấp

Bạn có thể sử dụng nhiều giá trị được phân tách bằng dấu cách nếu cần (e. g.

Section 2

84)

Và cuối cùng, một số thuộc tính

Section 2

80 đến từ tiêu chuẩn vi định dạng hoặc indieweb như

• 
  Section 2

  86. Cho biết đích đến của siêu liên kết là một danh sách thư mục chứa một mục cho trang hiện tại

• 
  Section 2

  87. Cho biết rằng đích đến của siêu liên kết đó là một “thẻ” (hoặc từ khóa/chủ đề) do tác giả chỉ định cho trang hiện tại

• 
  Section 2

  88. Cho biết rằng đích đến của siêu liên kết đó cung cấp cách hiển thị hoặc cung cấp hỗ trợ cho trang hiện tại

• 
  Section 2

  89. Cho biết tài nguyên được liên kết đến là tệp trợ giúp hoặc Câu hỏi thường gặp cho tài liệu hiện tại

• a:not([href]) {
    /* style a "disabled" link */
  }

  20. Cho biết rằng đích của nó đại diện cho cùng một người hoặc tổ chức như trang hiện tại

vai trò ARIA

Vai trò mặc định của một liên kết là

a:not([href]) {
  /* style a "disabled" link */
}

21, vì vậy bạn không cần phải làm

a:not([href]) {
  /* style a "disabled" link */
}

2

Bạn chỉ cần điều đó nếu bạn đang giả mạo một liên kết, đây sẽ là một điều kỳ lạ/hiếm khi cần làm và bạn phải sử dụng một số JavaScript ngoài điều này để làm cho nó thực sự đi theo liên kết

About

0

Chỉ cần nhìn ở trên, bạn có thể thấy có bao nhiêu công việc giả mạo một liên kết và đó là trước khi bạn xem xét đó là lỗi nhấp chuột phải, không cho phép mở trong tab mới, không hoạt động với Chế độ tương phản cao của Windows và trình đọc khác . Khá xấu

Vai trò ARIA hữu ích để chỉ ra trang hiện tại, như

About

1

Bạn có nên sử dụng thuộc tính

a:not([href]) {
  /* style a "disabled" link */
}

22 không?

Chắc là không. Lưu phần này để đặt cho

a:not([href]) {
  /* style a "disabled" link */
}

23 một tiêu đề ngắn gọn, mang tính mô tả

About

2

a:not([href]) {
  /* style a "disabled" link */
}

22 cung cấp cửa sổ bật lên giao diện người dùng được kích hoạt khi di chuột hiển thị văn bản bạn đã viết. Bạn không thể tạo kiểu cho nó và nó không thực sự dễ truy cập

Kích hoạt di chuột là cụm từ khóa ở đây. Nó không sử dụng được trên mọi thiết bị chỉ cảm ứng. Nếu một liên kết cần thêm thông tin theo ngữ cảnh, hãy cung cấp thông tin đó trong nội dung thực xung quanh liên kết hoặc sử dụng văn bản mô tả chính liên kết đó (trái ngược với nội dung như “Nhấp vào đây”)

Liên kết chỉ có biểu tượng

Nếu một liên kết chỉ có một biểu tượng bên trong nó, như

About

3

Đó là không đủ thông tin theo ngữ cảnh về liên kết, đặc biệt là vì lý do truy cập, nhưng có khả năng cho bất kỳ ai. Liên kết với văn bản hầu như luôn rõ ràng hơn. Nếu bạn hoàn toàn không thể sử dụng văn bản, bạn có thể sử dụng một mẫu như

About

4

a:not([href]) {
  /* style a "disabled" link */
}

25 là một lớp được sử dụng để ẩn trực quan văn bản nhãn bằng CSS

About

5

Không giống như

a:not([href]) {
  /* style a "disabled" link */
}

26, văn bản ẩn trực quan có thể được dịch và sẽ hiển thị tốt hơn trong các chế độ duyệt chuyên dụng

Liên kết xung quanh hình ảnh

Hình ảnh có thể là liên kết nếu bạn bọc chúng trong một liên kết. Không cần sử dụng văn bản thay thế để nói rằng hình ảnh là một liên kết, vì công nghệ hỗ trợ sẽ làm điều đó rồi

About

6

Liên kết xung quanh khối nội dung lớn hơn

Bạn có thể liên kết toàn bộ khu vực nội dung, như

About

7

Nhưng tất nhiên, có những hàm ý về trải nghiệm người dùng. Ví dụ: có thể khó chọn văn bản hơn và toàn bộ phần tử cần kiểu dáng khá phức tạp để tạo trạng thái di chuột và tiêu điểm rõ ràng. Ngoài ra còn có ý nghĩa về khả năng truy cập, chẳng hạn như nội dung của toàn bộ thẻ được đọc trước khi thông báo dưới dạng liên kết

Đây là một ví dụ với hai cách tiếp cận. Đầu tiên bao bọc toàn bộ thẻ trong một liên kết. Điều này là hợp lệ, nhưng hãy nhớ những hàm ý. Cái thứ hai có một liên kết bên trong tiêu đề và liên kết đó có một phần tử giả trên đó bao phủ toàn bộ thẻ. Điều này cũng có ý nghĩa (chẳng hạn như hơi khó chọn văn bản), nhưng có lẽ được mong đợi nhiều hơn đối với công nghệ hỗ trợ

Dự phòng nhúng CodePen

Ví dụ thứ hai cũng mở ra khả năng bao gồm nhiều liên kết. Bạn không thể lồng các liên kết, vì vậy mọi thứ sẽ hơi rắc rối nếu bạn cần. Tuy nhiên, có thể thực hiện được bằng cách đặt các liên kết riêng lẻ phía trên liên kết phủ thẻ bằng chỉ mục z

Cân nhắc về kiểu dáng và CSS

Đây là giao diện mặc định của một liên kết

Kiểu dáng Tác nhân người dùng mặc định của một liên kết

Có khả năng bạn sẽ thay đổi kiểu liên kết của mình và cũng có khả năng bạn sẽ sử dụng CSS để làm điều đó. Tôi có thể làm cho tất cả các liên kết của mình có màu đỏ trong CSS bằng cách thực hiện

About

8

Đôi khi việc chọn và tạo kiểu cho tất cả các liên kết trên một trang hơi nặng tay, vì các liên kết trong điều hướng có thể được xử lý hoàn toàn khác với các liên kết trong văn bản. Bạn luôn có thể chọn phạm vi bộ chọn để nhắm mục tiêu các liên kết trong các khu vực cụ thể như

About

9

Hoặc chọn liên kết trực tiếp để tạo kiểu

Section Two

0

trạng thái liên kết

Liên kết là các yếu tố có thể tập trung. Nói cách khác, chúng có thể được chọn bằng cách sử dụng phím

a:not([href]) {
  /* style a "disabled" link */
}

27 trên bàn phím. Liên kết có lẽ là yếu tố phổ biến nhất mà bạn sẽ thiết kế các trạng thái khác nhau một cách có ý thức, bao gồm cả trạng thái

a:not([href]) {
  /* style a "disabled" link */
}

28

• a:not([href]) {
    /* style a "disabled" link */
  }

  29. Để tạo kiểu khi con trỏ chuột qua liên kết

• 
  About

  00. Để tạo kiểu khi liên kết đã được theo dõi, tốt nhất là trình duyệt có thể nhớ. Nó có khả năng tạo kiểu hạn chế do bảo mật

• 
  About

  01. Để tạo kiểu khi một liên kết chưa được truy cập

• 
  About

  02. Để tạo kiểu khi nhấn liên kết (e. g. nút chuột bị hỏng hoặc phần tử đang được gõ trên màn hình cảm ứng)

• a:not([href]) {
    /* style a "disabled" link */
  }

  28. Rất quan trọng. Liên kết phải luôn có kiểu tập trung. Nếu bạn chọn xóa đường viền màu lam mặc định mà hầu hết các trình duyệt đều áp dụng, hãy cũng sử dụng bộ chọn này để áp dụng lại kiểu tiêu điểm rõ ràng về mặt trực quan

Chúng có thể xâu chuỗi giống như bất kỳ lớp giả nào, vì vậy bạn có thể làm điều gì đó như thế này nếu nó hữu ích cho thiết kế/UX của bạn

Section Two

1

Bạn có thể tạo kiểu cho một liên kết trông giống như nút

Có lẽ một số nhầm lẫn giữa liên kết và nút là những thứ như thế này

Phong cách “khuy áo” cực ngầu từ Katherine Kato

Điều đó chắc chắn trông giống như một nút. Mọi người sẽ gọi đó là một nút. Ngay cả một hệ thống thiết kế cũng có thể gọi đó là một nút và có lẽ có một lớp như

About

04. Nhưng mà. Một thứ mà bạn có thể nhấp vào có nội dung “Tìm hiểu thêm” thực chất là một liên kết chứ không phải một nút. Điều đó hoàn toàn ổn, đó chỉ là một lời nhắc khác để sử dụng thành phần đúng về mặt ngữ nghĩa và chức năng

Độ tương phản màu

Vì chúng ta thường tạo kiểu cho các liên kết có màu riêng biệt nên điều quan trọng là sử dụng màu có đủ độ tương phản màu để dễ tiếp cận. Có rất nhiều dạng khiếm thị (xem công cụ WhoCanUse để mô phỏng các kết hợp màu sắc với các dạng khiếm thị khác nhau) và độ tương phản cao hỗ trợ gần như tất cả các dạng này

Có lẽ bạn đặt màu xanh lam cho các liên kết

Liên kết màu xanh lam là #2196F3

Mặc dù điều đó có thể phù hợp với bạn, nhưng tốt hơn hết bạn nên sử dụng các công cụ để kiểm tra để đảm bảo màu sắc có tỷ lệ đủ mạnh theo hướng dẫn đã nghiên cứu. Ở đây, tôi sẽ xem Chrome DevTools và nó sẽ cho tôi biết màu này không tuân theo nghĩa là nó không có đủ độ tương phản với màu nền đằng sau nó

Chrome DevTools cho chúng tôi biết màu liên kết này không có đủ độ tương phản

Độ tương phản màu sắc là một yếu tố cần cân nhắc lớn với các liên kết, không chỉ vì chúng thường được tô bằng một màu duy nhất cần được kiểm tra mà còn vì chúng có tất cả các trạng thái khác nhau (di chuột, tiêu điểm, hoạt động, đã truy cập) cũng có thể có các màu khác nhau. Kết hợp điều đó với thực tế là văn bản có thể được chọn và bạn có rất nhiều chỗ để xem xét độ tương phản. Đây là một bài viết về tất cả những điều đó

Tạo kiểu cho các loại liên kết

Chúng ta có thể trở nên thông minh trong CSS với các bộ chọn thuộc tính và tìm ra loại tài nguyên mà một liên kết đang trỏ đến, giả sử giá trị

a:not([href]) {
  /* style a "disabled" link */
}

4 có nội dung hữu ích trong đó

Section Two

2

Tạo kiểu liên kết cho bản in

CSS có một “quy tắc” để khai báo các kiểu chỉ có hiệu lực trên phương tiện in (e. g. in ra một trang web). Bạn có thể đưa chúng vào bất kỳ CSS nào như thế này

Section Two

3

Đặt lại kiểu

Nếu bạn cần loại bỏ tất cả các kiểu dáng khỏi một liên kết (hoặc thực sự là bất kỳ yếu tố nào khác cho vấn đề đó), CSS cung cấp một cách để loại bỏ tất cả các kiểu dáng bằng cách sử dụng thuộc tính

About

06

Section Two

4

Bạn cũng có thể xóa các kiểu riêng lẻ bằng từ khóa. (Một lần nữa, điều này không thực sự độc đáo đối với các liên kết, nhưng nói chung là hữu ích)

Section Two

5

Cân nhắc về JavaScript

Giả sử bạn muốn ngăn việc nhấp vào liên kết thực hiện những gì nó thường làm. đi đến liên kết đó hoặc nhảy xung quanh trang. Trong JavaScript, bạn có thể sử dụng

About

07 để tránh nhảy xung quanh

Section Two

6

Loại điều này là cốt lõi của cách thức hoạt động của “Ứng dụng một trang” (SPA). Chúng chặn các nhấp chuột để trình duyệt không tiếp quản và xử lý điều hướng

Các SPA xem nơi bạn đang cố gắng truy cập (trong trang web của riêng bạn), tải dữ liệu họ cần, thay thế những gì họ cần trên trang và cập nhật URL. Rất nhiều việc phải làm để sao chép miễn phí những gì trình duyệt làm, nhưng bạn có khả năng thực hiện những việc như tạo hiệu ứng động giữa các trang

Một mối quan tâm khác của JavaScript với các liên kết là khi một liên kết đến một trang khác được nhấp vào, trang đó sẽ bị bỏ lại và một trang khác sẽ tải. Điều đó có thể có vấn đề đối với những thứ như trang chứa biểu mẫu mà người dùng đang điền nhưng chưa hoàn thành. Nếu họ nhấp vào liên kết và rời khỏi trang, họ sẽ mất việc. Cơ hội duy nhất của bạn để ngăn người dùng rời đi là sử dụng sự kiện

About

08

Section Two

7

Một liên kết đã bị xóa hành vi mặc định sẽ không thông báo điểm đến mới. Điều này có nghĩa là một người sử dụng công nghệ hỗ trợ có thể không biết họ bị thương ở đâu. Bạn sẽ phải làm những việc như cập nhật tiêu đề của trang và di chuyển tiêu điểm trở lại đầu tài liệu

khung JavaScript

Trong khung JavaScript, như React, đôi khi bạn có thể thấy các liên kết được tạo từ thứ gì đó giống như thành phần

About

09 thay vì thành phần

a:not([href]) {
  /* style a "disabled" link */
}

3 gốc. Thành phần tùy chỉnh có thể tạo một phần tử

a:not([href]) {
  /* style a "disabled" link */
}

3 gốc nhưng có chức năng bổ sung, chẳng hạn như cho phép bộ định tuyến JavaScript hoạt động và thêm các thuộc tính như

About

12 nếu cần, đây là một điều tốt

Cuối cùng, một liên kết là một liên kết. Khung JavaScript có thể cung cấp hoặc khuyến khích một số mức độ trừu tượng, nhưng bạn luôn được tự do sử dụng các liên kết thông thường

cân nhắc về khả năng tiếp cận

Chúng tôi đã đề cập đến một số khả năng truy cập trong các phần trên (tất cả đều liên quan. ), nhưng đây là một số điều khác để suy nghĩ về

• Bạn không cần văn bản như “Liên kết” hoặc “Đi tới” trong chính văn bản liên kết. Làm cho văn bản có ý nghĩa (“tài liệu” thay vì “bấm vào đây”)
• Các liên kết đã có vai trò ARIA theo mặc định (

  
  About

  13) vì vậy không cần thiết lập nó một cách rõ ràng
• Cố gắng không sử dụng chính URL làm văn bản (______414)
• Các liên kết thường có màu xanh lam và thường được gạch dưới và điều đó nói chung là tốt
• Dù sao thì tất cả các hình ảnh trong nội dung đều phải có văn bản

  
  About

  15, nhưng đặc biệt là khi hình ảnh được bao bọc trong một liên kết mà không có văn bản nào khác

Tên duy nhất có thể truy cập

Một số công nghệ hỗ trợ có thể tạo danh sách các yếu tố tương tác trên trang. Hãy tưởng tượng một nhóm gồm bốn thẻ bài viết đều có “Đọc thêm”, danh sách các yếu tố tương tác sẽ như thế nào

• Đọc thêm
• Đọc thêm
• Đọc thêm
• Đọc thêm

Không hữu ích lắm. Bạn có thể sử dụng lớp

About

16 mà chúng tôi đã đề cập để làm cho các liên kết giống như

Section Two

8

Bây giờ mỗi liên kết là duy nhất và rõ ràng. Nếu thiết kế có thể hỗ trợ nó, hãy làm điều đó mà không có lớp ẩn trực quan để loại bỏ sự mơ hồ cho mọi người

nút

Các nút là để kích hoạt các hành động. Khi nào bạn sử dụng phần tử

About

17? . ” Đây là một cách khác để nghĩ về điều đó. nếu nhấp vào nó không làm được gì nếu không có JavaScript, thì đó phải là ________ 417

Theo mặc định, một

About

17 nằm trong một

About

21 sẽ gửi biểu mẫu đó. Nhưng bên cạnh đó, các phần tử nút không có bất kỳ hành vi mặc định nào và bạn sẽ kết nối tương tác đó với JavaScript

Mục lục

• triển khai HTML
• Cân nhắc về kiểu dáng và CSS
• Cân nhắc về JavaScript
• cân nhắc về khả năng tiếp cận

triển khai HTML

Section Two

9

Các nút bên trong

About

21 làm điều gì đó theo mặc định. họ gửi biểu mẫu. Họ cũng có thể đặt lại nó, giống như các đối tác đầu vào của họ. Thuộc tính

About

23 quan trọng

Back to Top

0

Nói về biểu mẫu, các nút có một số thủ thuật gọn gàng giúp chúng có thể ghi đè lên các thuộc tính của chính

About

21

Back to Top

1

lấy nét tự động

Vì các nút là phần tử có thể đặt tiêu điểm nên chúng tôi có thể tự động lấy tiêu điểm cho chúng khi tải trang bằng thuộc tính

About

25

Back to Top

2

Có lẽ bạn sẽ làm điều đó bên trong hộp thoại phương thức trong đó một trong các hành động là hành động mặc định và nó giúp ích cho UX (e. g. bạn có thể nhấn

About

26 để loại bỏ phương thức). Tự động lấy nét sau hành động của người dùng có lẽ là cách thực hành tốt duy nhất ở đây, việc di chuyển tiêu điểm của người dùng mà không có sự cho phép của họ, như thuộc tính

About

25 có khả năng, có thể là một vấn đề đối với người dùng trình đọc màn hình và kính lúp

Lưu ý rằng ____425 có thể không hoạt động nếu phần tử nằm trong

About

29 vì lý do bảo mật

Vô hiệu hóa các nút

Để ngăn nút tương tác, bạn có thể sử dụng thuộc tính

About

30

Back to Top

3

Lưu ý rằng chúng tôi đã bao gồm văn bản mô tả bên cạnh nút đã tắt. Có thể rất khó chịu khi tìm thấy một nút bị vô hiệu hóa và không biết tại sao nó bị vô hiệu hóa. Cách tốt hơn để làm điều này có thể là để ai đó gửi biểu mẫu, sau đó giải thích lý do tại sao nó không hoạt động trong thông báo phản hồi xác thực

Bất kể, bạn có thể tạo kiểu cho nút bị vô hiệu hóa theo cách này

Back to Top

4

Chúng tôi sẽ đề cập đến các trạng thái khác và kiểu dáng sau trong hướng dẫn này

Các nút có thể chứa các phần tử con

Nút gửi và đầu vào gửi (______431) giống hệt nhau về chức năng, nhưng khác ở chỗ đầu vào không thể chứa các phần tử con trong khi nút có thể

Back to Top

5

Lưu ý thuộc tính

About

32 trên phần tử SVG ở trên. Trong trường hợp đó, do biểu tượng mang tính chất trang trí, điều này sẽ giúp công nghệ hỗ trợ chỉ thông báo nhãn của nút

Cân nhắc về kiểu dáng và CSS

Các nút thường được tạo kiểu trông rất giống nút. Họ nên nhìn có thể nhấn. Nếu bạn đang tìm cảm hứng về các kiểu nút lạ mắt, bạn nên xem Chủ đề CodePen về Nút

1, 2, 3, 4, 5, 6

Kiểu nút trên nhiều trình duyệt/nền tảng

Giao diện của các nút theo mặc định khác nhau tùy theo trình duyệt và nền tảng

Chỉ trên macOS. Chrome, Safari và Firefox (trông giống nhau)

Thêm

About

33 vào các nút tương tự như trên và chúng tôi có các kiểu hoàn toàn khác nhau

Mặc dù có một số sự thật về trải nghiệm người dùng khi để mặc định các thành phần biểu mẫu để chúng phù hợp với phong cách của trình duyệt/nền tảng đó và bạn có được một số khả năng chi trả miễn phí, nhưng các nhà thiết kế thường không thích các phong cách mặc định, đặc biệt là những phong cách khác nhau giữa các trình duyệt

Đặt lại kiểu nút mặc định

Xóa tất cả các kiểu khỏi một nút dễ dàng hơn bạn nghĩ. Bạn sẽ nghĩ, với tư cách là một công cụ kiểm soát biểu mẫu,

About

34 sẽ hữu ích, nhưng đừng tin vào điều đó. Trên thực tế,

About

35 là lựa chọn tốt hơn để xóa sạch phiến đá

Bạn có thể thấy nhiều loại thuộc tính có liên quan như thế nào

Và đó không phải là tất cả. Đây là một đoạn hợp nhất về những gì Chuẩn hóa thực hiện với các nút

Back to Top

6

Một lớp

About

36 nhất quán

Ngoài việc sử dụng CSS đặt lại hoặc CSS cơ sở, bạn có thể muốn có một lớp dành cho các nút giúp bạn có nền tảng vững chắc để tạo kiểu và hoạt động trên cả liên kết và nút

Back to Top

7

Kiểm tra Bút này để biết lý do tại sao cần có tất cả các thuộc tính này để đảm bảo bút hoạt động chính xác giữa các phần tử

trạng thái nút

Cũng giống như với các liên kết, bạn sẽ muốn định kiểu trạng thái của các nút

Back to Top

8

Bạn cũng có thể muốn sử dụng các thuộc tính ARIA để tạo kiểu, đây là một cách gọn gàng để khuyến khích sử dụng chúng đúng cách

Back to Top

9

Các nút kiểu liên kết

Luôn có những ngoại lệ. Ví dụ: một trang web mà bạn cần một hành động được kích hoạt bằng nút trong một câu

Section 2

0

Chúng tôi đã sử dụng nút thay vì thẻ liên kết trong đoạn mã trên, vì trang web giả định này mở cài đặt người dùng trong hộp thoại theo chế độ thay vì liên kết đến một trang khác. Trong tình huống này, bạn có thể muốn tạo kiểu cho nút như thể nó trông giống như một liên kết

Điều này có lẽ hiếm đến mức bạn có thể tạo một lớp (e. g.

About

37) kết hợp các kiểu đặt lại ở trên và nếu không thì phù hợp với những gì bạn làm cho các liên kết neo

nút đột phá

Bạn có nhớ trước đó khi chúng ta nói về khả năng gói toàn bộ phần tử trong liên kết không? . Bạn có thể sử dụng phần tử giả được định vị tuyệt đối trên nút để mở rộng khu vực có thể nhấp ra toàn bộ khu vực. Mến

Dự phòng nhúng CodePen

Cân nhắc về JavaScript

Ngay cả khi không có JavaScript, các phần tử nút có thể được kích hoạt bằng các phím

About

38 và

About

26 trên bàn phím. Đó là một phần khiến chúng trở thành những yếu tố hấp dẫn và hữu ích. chúng có thể khám phá, có thể tập trung và tương tác với công nghệ hỗ trợ theo cách có thể dự đoán được

Có lẽ bất kỳ

About

17 nào trong tình huống đó nên được chèn vào DOM bằng JavaScript. Một trật tự cao. Thức ăn cho suy nghĩ. 🤔

Người xử lý “một lần”

Giả sử một nút thực hiện điều gì đó khá quan trọng, chẳng hạn như gửi thanh toán. Sẽ khá đáng sợ nếu nó được lập trình sao cho việc nhấp vào nút nhiều lần sẽ gửi nhiều yêu cầu thanh toán. Trong những tình huống như thế này, bạn sẽ đính kèm trình xử lý nhấp chuột vào một nút chỉ chạy một lần. Để làm rõ điều đó với người dùng, chúng tôi cũng sẽ tắt nút khi nhấp

Section 2

1

Sau đó, bạn sẽ cố tình tắt nút và gắn lại trình xử lý khi cần thiết

Trình xử lý nội tuyến

JavaScript có thể được thực thi bằng cách kích hoạt một nút thông qua mã trên chính nút đó

Section 2

2

Thực tiễn đó đã trở thành một thực tiễn tiêu chuẩn trở thành một sai lầm (không trừu tượng hóa chức năng JavaScript khỏi HTML) thành, ồ, bạn cần nó khi bạn cần. Một lợi thế là nếu bạn đang đưa mã HTML này vào DOM, bạn không cần phải liên kết/liên kết lại các trình xử lý sự kiện JavaScript với nó vì nó đã có một trình xử lý sự kiện.

khung JavaScript

Nó phổ biến trong bất kỳ khung JavaScript nào để tạo một thành phần để xử lý các nút, vì các nút thường có nhiều biến thể. Những biến thể đó có thể được biến thành một loại API. Ví dụ, trong Phản ứng

Section 2

3

Trong ví dụ đó, thành phần

About

41 đảm bảo nút sẽ có lớp

About

42 và xử lý lớp hoạt động giống như chuyển đổi

cân nhắc về khả năng tiếp cận

Việc xem xét khả năng truy cập lớn nhất với các nút thực sự là sử dụng các nút. Đừng cố sao chép một nút có

About

43 hoặc

a:not([href]) {
  /* style a "disabled" link */
}

7, thật không may, điều này phổ biến hơn bạn nghĩ. Nó rất có khả năng sẽ gây ra vấn đề. (Bạn đã xử lý khả năng lấy nét chưa? Bạn đã xử lý các sự kiện bàn phím chưa? Tuyệt vời. Có lẽ vẫn còn nhiều thứ bạn đang quên. )

kiểu lấy nét

Giống như tất cả các thành phần có thể đặt tiêu điểm, trình duyệt áp dụng kiểu tiêu điểm mặc định, thường là đường viền màu xanh lam

Tập trung vào các kiểu trên Chrome/macOS

Mặc dù có thể tranh cãi rằng bạn nên để nguyên điều đó vì đây là một phong cách rất rõ ràng và dễ thấy đối với những người được hưởng lợi từ phong cách tập trung, nhưng cũng không phải là không thể thay đổi nó.

Những gì bạn không nên làm là

About

45 để loại bỏ nó. Nếu bạn đã từng xóa một kiểu tiêu điểm như vậy, hãy đặt nó trở lại cùng một lúc

Section 2

4

Kiểu lấy nét tùy chỉnh

Việc một nút có thể trở thành tiêu điểm khi được nhấp và áp dụng kiểu đó cùng một lúc gây khó chịu cho một số người. Có một mẹo (đã hạn chế, nhưng ngày càng tăng, hỗ trợ trình duyệt) trong việc xóa các kiểu tiêu điểm khỏi các lần nhấp và không phải các sự kiện bàn phím

Section 2

5

ARIA

Các nút đã có

About

46 mà chúng cần (

About

47). Nhưng có một số thuộc tính ARIA khác có liên quan đến các nút

• 
  About

  48. Biến một nút thành một chuyển đổi giữa

  
  About

  49 và

  
  About

  50. Tìm hiểu thêm về chuyển đổi nút, điều này cũng có thể được thực hiện với

  
  About

  51 và

  
  About

  52

• 
  About

  53. Nếu nút kiểm soát trạng thái mở/đóng của phần tử khác (chẳng hạn như menu thả xuống), bạn áp dụng thuộc tính này để chỉ ra điều đó như

  
  About

  54

• a:not([href]) {
    /* style a "disabled" link */
  }

  26. Ghi đè văn bản trong nút. Điều này hữu ích cho việc gắn nhãn các nút không có văn bản, nhưng có lẽ bạn vẫn nên sử dụng lớp

  a:not([href]) {
    /* style a "disabled" link */
  }

  25 để có thể dịch nó

• 
  About

  57. Trỏ tới một phần tử sẽ đóng vai trò là nhãn cho nút

Cho cái cuối cùng đó

Section 2

6

Deque có một bài đăng trên blog chuyên sâu hơn về khả năng truy cập nút bao gồm nhiều thông tin về ARIA

hộp thoại

Nếu một nút mở hộp thoại, công việc của bạn là di chuyển tiêu điểm vào bên trong và bẫy nó ở đó. Khi đóng hộp thoại, bạn cần đưa tiêu điểm trở lại nút đó để người dùng quay lại chính xác nơi họ bắt đầu. Điều này làm cho trải nghiệm sử dụng một phương thức giống nhau đối với người phụ thuộc vào công nghệ hỗ trợ cũng như đối với người không

Quản lý tiêu điểm cũng không chỉ dành cho hộp thoại. Nếu bấm vào một nút sẽ chạy một phép tính và thay đổi một giá trị trên trang, thì không có thay đổi ngữ cảnh ở đó, nghĩa là tiêu điểm sẽ vẫn ở trên nút. Nếu nút thực hiện điều gì đó như “chuyển sang trang tiếp theo”, thì tiêu điểm sẽ được chuyển đến đầu trang tiếp theo đó

Kích thước

Đừng làm cho các nút quá nhỏ. Điều đó áp dụng cho các liên kết và bất kỳ loại kiểm soát tương tác nào. Những người có bất kỳ loại khéo léo giảm nào sẽ được hưởng lợi

Nguyên tắc cổ điển của Apple về kích thước tối thiểu cho mục tiêu cảm ứng (nút) là 44x44pt

Dưới đây là một số hướng dẫn từ các công ty khác. Luật Fitt cho chúng ta biết các mục tiêu nhỏ hơn có tỷ lệ lỗi lớn hơn. Google thậm chí còn cân nhắc kích thước nút khi đánh giá SEO của một trang web

Ngoài kích thước mẫu, không đặt các nút quá gần nhau, cho dù chúng được xếp chồng lên nhau theo chiều dọc hay cùng nhau trên cùng một đường. Hãy cho họ một số lợi nhuận vì những người gặp vấn đề về điều khiển động cơ có nguy cơ bấm nhầm

kích hoạt các nút

Các nút hoạt động bằng cách bấm/chạm, nhấn phím

About

26 hoặc nhấn phím

About

38 (khi được đặt tiêu điểm). Ngay cả khi bạn thêm

About

47 vào một liên kết hoặc div, bạn sẽ không nhận được chức năng của phím cách, vì vậy, trước nguy cơ đánh một con ngựa chết, hãy sử dụng

About

17 trong những trường hợp đó

Có bao nhiêu loại nút trong CSS?

Các loại nút là gì?

Các nút CSS là gì?

Các loại nút trong HTML là gì?