Làm cách nào để vô hiệu hóa bằng CSS?

Chủ đề về việc vô hiệu hóa các liên kết đã xuất hiện tại nơi làm việc của tôi vào một ngày khác. Bằng cách nào đó, một kiểu neo “bị vô hiệu hóa” đã được thêm vào kiểu chữ của chúng tôi vào năm ngoái khi tôi không tìm kiếm. Tuy nhiên đang có một vấn đề. không có cách thực sự nào để vô hiệu hóa liên kết

a {
  /* Disabled link styles */
}
a:link, a:visited { /* or a[href] */
  /* Enabled link styles */
}

2 (với thuộc tính

a {
  /* Disabled link styles */
}
a:link, a:visited { /* or a[href] */
  /* Enabled link styles */
}

3 hợp lệ) trong HTML. Chưa kể, tại sao bạn thậm chí muốn?

Tại một thời điểm nhất định, có vẻ như đồng nghiệp của tôi sẽ không chấp nhận sự thật này, vì vậy tôi bắt đầu nghĩ cách thực hiện điều này. Biết rằng sẽ mất rất nhiều công sức, tôi muốn chứng minh rằng không đáng để bỏ công sức và viết mã để hỗ trợ một tương tác độc đáo như vậy, nhưng tôi sợ rằng bằng cách cho thấy điều đó có thể thực hiện được, họ sẽ bỏ qua tất cả các cảnh báo của tôi và chỉ sử dụng ví dụ của tôi làm ví dụ. . Điều này vẫn chưa hoàn toàn rõ ràng đối với tôi, nhưng tôi nghĩ rằng chúng ta có thể xem xét nghiên cứu của mình

Đầu tiên, những thứ đầu tiên

Chỉ cần không làm điều đó

Một liên kết bị vô hiệu hóa không phải là một liên kết, nó chỉ là văn bản. Bạn cần suy nghĩ lại về thiết kế của mình nếu nó yêu cầu vô hiệu hóa một liên kết

Bootstrap có các ví dụ về việc áp dụng lớp

a {
  /* Disabled link styles */
}
a:link, a:visited { /* or a[href] */
  /* Enabled link styles */
}

4 cho các thẻ neo và tôi ghét chúng vì điều đó. Ít nhất họ đề cập rằng lớp chỉ cung cấp một kiểu bị vô hiệu hóa, nhưng điều này gây hiểu nhầm. Bạn cần phải làm nhiều hơn là chỉ làm cho một liên kết có vẻ như bị vô hiệu hóa nếu bạn thực sự muốn vô hiệu hóa nó

cách chắc chắn. xóa href

Nếu bạn đã quyết định rằng bạn sẽ phớt lờ cảnh báo của tôi và tiến hành vô hiệu hóa một liên kết, thì việc xóa thuộc tính

a {
  /* Disabled link styles */
}
a:link, a:visited { /* or a[href] */
  /* Enabled link styles */
}

3 là cách tốt nhất mà tôi biết.

Trực tiếp từ chính thức

Thuộc tính

a {
  /* Disabled link styles */
}
a:link, a:visited { /* or a[href] */
  /* Enabled link styles */
}

3 trên các phần tử

a {
  /* Disabled link styles */
}
a:link, a:visited { /* or a[href] */
  /* Enabled link styles */
}

7 và

a {
  /* Disabled link styles */
}
a:link, a:visited { /* or a[href] */
  /* Enabled link styles */
}

8 là không bắt buộc;

Một định nghĩa dễ hiểu hơn từ MDN

Thuộc tính này có thể được bỏ qua (kể từ HTML5) để tạo liên kết giữ chỗ. Liên kết giữ chỗ giống như siêu liên kết truyền thống, nhưng không dẫn đến đâu cả

Đây là mã JavaScript cơ bản để đặt và xóa thuộc tính

a {
  /* Disabled link styles */
}
a:link, a:visited { /* or a[href] */
  /* Enabled link styles */
}

3

/* 
 * Use your preferred method of targeting a link
 *
 * document.getElementById('MyLink');
 * document.querySelector('.link-class');
 * document.querySelector('[href="https://unfetteredthoughts.net"]');
 */
// "Disable" link by removing the href property
link.href = '';
// Enable link by setting the href property
link.href = 'https://unfetteredthoughts.net';

Tạo kiểu này thông qua CSS cũng khá đơn giản

a {
  /* Disabled link styles */
}
a:link, a:visited { /* or a[href] */
  /* Enabled link styles */
}

Đó là tất cả những gì bạn cần làm

Như thế vẫn chưa đủ, tôi muốn thứ gì đó phức tạp hơn để trông thông minh hơn

Nếu bạn hoàn toàn phải thiết kế quá mức một số giải pháp cực đoan, đây là một số điều cần xem xét. Hy vọng rằng bạn sẽ chú ý và nhận ra rằng những gì tôi sắp cho bạn thấy là không đáng để bạn nỗ lực.

Trước tiên, chúng ta cần tạo kiểu cho liên kết của mình để liên kết có vẻ như bị vô hiệu hóa

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

Disabled Link

Đặt

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

1 thành

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

2 sẽ đặt lại màu phông chữ về màu văn bản không liên kết bình thường của bạn. Tôi cũng đang đặt con trỏ chuột thành

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

3 để hiển thị một chỉ báo đẹp khi di chuột rằng hành động thông thường không được phép. Hiện tại, chúng tôi đã loại bỏ những người dùng không sử dụng chuột không thể di chuột, chủ yếu là chạm và bàn phím, vì vậy họ sẽ không nhận được dấu hiệu này. Tiếp theo, độ mờ được giảm xuống một nửa. Theo , các phần tử bị vô hiệu hóa không cần phải đáp ứng các nguyên tắc về độ tương phản màu. Tôi nghĩ điều này rất rủi ro vì về cơ bản nó là văn bản thuần túy vào thời điểm này và việc giảm độ mờ đi một nửa sẽ khiến người dùng có thị lực kém rất khó đọc, một lý do khác khiến tôi ghét điều này. Cuối cùng, phần gạch chân trang trí văn bản bị xóa vì đây thường là dấu hiệu tốt nhất cho thấy có liên kết. Bây giờ điều này trông giống như một liên kết bị vô hiệu hóa

Nhưng nó không thực sự bị vô hiệu hóa. Người dùng vẫn có thể nhấp/nhấn vào liên kết này. Tôi nghe thấy bạn la hét về

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

4

.isDisabled {
  ...
  pointer-events: none;
}

Ok, chúng tôi đã hoàn tất. Đã tắt liên kết. Ngoại trừ, nó chỉ thực sự bị vô hiệu hóa đối với người dùng chuột nhấp và người dùng chạm vào. Còn những trình duyệt không hỗ trợ

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

4 thì sao? . IE11 và Edge thực sự không hỗ trợ

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

4 trừ khi

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

7 được đặt thành

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

8 hoặc

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

9. Ngoài ra, cài đặt

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

4 thành

Disabled Link

1 sẽ ghi đè con trỏ

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

3 đẹp mắt của chúng tôi, vì vậy giờ đây, người dùng chuột sẽ không nhận được thêm dấu hiệu trực quan rằng liên kết đã bị vô hiệu hóa. Điều này đã bắt đầu sụp đổ. Bây giờ chúng ta phải thay đổi đánh dấu và CSS…

.isDisabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.isDisabled > a {
  color: currentColor;
  display: inline-block;  /* For IE11/ MS Edge bug */
  pointer-events: none;
  text-decoration: none;
}

Disabled Link

Gói liên kết trong một

Disabled Link

3_______12_______4

Disabled Link

5 và thêm lớp

Disabled Link

6 mang lại cho chúng tôi một nửa phong cách hình ảnh khuyết tật của chúng tôi. Một tác dụng phụ thú vị ở đây là lớp bị vô hiệu hóa hiện là chung chung và có thể được sử dụng trên các phần tử khác, như các nút và phần tử biểu mẫu. Thẻ neo thực tế hiện có

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

4 và

Disabled Link

8 được đặt thành

Disabled Link

1

Còn người dùng bàn phím thì sao? .

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

4 chỉ dành cho con trỏ, không có sự kiện bàn phím. Chúng tôi cũng cần ngăn kích hoạt các trình duyệt cũ hơn không hỗ trợ

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

4. Bây giờ chúng ta phải giới thiệu một số JavaScript

Đưa vào JavaScript

// After using preferred method to target link
link.addEventListener('click', function (event) {
  if (this.parentElement.classList.contains('isDisabled')) {
    event.preventDefault();
  }
});

Hiện tại, liên kết của chúng tôi có vẻ đã bị vô hiệu hóa và không phản hồi kích hoạt thông qua các lần nhấp, chạm và phím

.isDisabled {
  ...
  pointer-events: none;
}

0. Nhưng chúng ta vẫn chưa xong. Người dùng trình đọc màn hình không có cách nào biết rằng liên kết này đã bị tắt. Chúng tôi cần mô tả liên kết này là bị vô hiệu hóa. Thuộc tính

.isDisabled {
  ...
  pointer-events: none;
}

4 không hợp lệ trên các liên kết, nhưng chúng tôi có thể sử dụng

.isDisabled {
  ...
  pointer-events: none;
}

5

Disabled Link

Bây giờ tôi sẽ nhân cơ hội này để tạo kiểu cho liên kết dựa trên thuộc tính

.isDisabled {
  ...
  pointer-events: none;
}

6. Tôi thích sử dụng các thuộc tính ARIA làm móc nối cho CSS vì các phần tử có kiểu dáng không phù hợp là dấu hiệu cho thấy khả năng truy cập quan trọng bị thiếu

.isDisabled {
  cursor: not-allowed;
  opacity: 0.5;
}
a[aria-disabled="true"] {
  color: currentColor;
  display: inline-block;  /* For IE11/ MS Edge bug */
  pointer-events: none;
  text-decoration: none;
}

Bây giờ các liên kết của chúng tôi có vẻ bị vô hiệu hóa, hành động bị vô hiệu hóa và được mô tả là bị vô hiệu hóa

Thật không may, ngay cả khi liên kết được mô tả là bị vô hiệu hóa, một số trình đọc màn hình (JAWS) vẫn sẽ thông báo liên kết này là có thể nhấp được. Nó làm điều đó cho bất kỳ phần tử nào có trình nghe nhấp chuột. Điều này là do nhà phát triển có xu hướng tạo các phần tử không tương tác như

.isDisabled {
  ...
  pointer-events: none;
}

7 và

Disabled Link

4 dưới dạng các phần tử giả tương tác với một trình nghe đơn giản. Không có gì chúng ta có thể làm về điều đó ở đây. Mọi thứ chúng tôi đã làm để xóa bất kỳ dấu hiệu nào cho thấy đây là một liên kết đều bị phá vỡ bởi công nghệ hỗ trợ mà chúng tôi đang cố đánh lừa, trớ trêu thay vì chúng tôi đã cố đánh lừa nó trước đây

Nhưng nếu chúng ta di chuyển người nghe đến cơ thể thì sao?

a {
  /* Disabled link styles */
}
a:link, a:visited { /* or a[href] */
  /* Enabled link styles */
}

0

Chúng ta xong chưa? . Tại một số điểm, chúng tôi sẽ cần kích hoạt các liên kết này, vì vậy chúng tôi cần thêm mã bổ sung sẽ chuyển đổi trạng thái/hành vi này

a {
  /* Disabled link styles */
}
a:link, a:visited { /* or a[href] */
  /* Enabled link styles */
}

1

Đó là nó. Hiện tại, chúng tôi có một liên kết bị vô hiệu hóa về mặt trực quan, chức năng và ngữ nghĩa đối với tất cả người dùng. Chỉ mất 10 dòng CSS, 15 dòng JavaScript (bao gồm 1 trình nghe trên phần thân) và 2 phần tử HTML

Làm cách nào để tắt phần tử bằng CSS?

Làm cách nào để tắt văn bản bằng CSS?

Làm cách nào để tắt lớp bằng CSS?

Làm cách nào để tắt một nút bằng CSS?