HTML ẩn

Khi chúng tôi nói một phần tử bị ẩn, chúng tôi thường có nghĩa là nó không hiển thị. Tuy nhiên, màn hình không phải là cơ chế đầu ra duy nhất mà chúng ta có thể cần ẩn nội dung khỏi. Các hệ thống như trình đọc màn hình và màn hình chữ nổi dựa trên cách trình bày của tài liệu trong cây trợ năng. Để định hướng, chúng tôi sẽ sử dụng các thuật ngữ sau

Bị ẩn hoàn toàn Phần tử không hiển thị trên màn hình, không hiển thị trong cây khả năng truy cập, không truy cập được bằng điều hướng bàn phím. Ẩn ngữ nghĩa Phần tử được hiển thị trên màn hình, nhưng không hiển thị trong cây khả năng truy cập và vẫn có thể truy cập được bằng điều hướng bàn phím. Bị ẩn trực quan Phần tử không được hiển thị trên màn hình, nhưng hiển thị trong cây trợ năng và vẫn có thể truy cập được bằng điều hướng bàn phím

Ba loại "ẩn" tạo ra ma trận sau

trạng thái hiển thị trên màn hình trong cây khả năng truy cập điều hướng bàn phímẩn hoàn toànẩnẩnkhông điều hướngbảngẩn về mặt ngữ nghĩahiển thịẩnẩnđiều hướngbảngẩn trực quanẩnẩncó thể điều hướng

# Cách ẩn hoàn toàn các phần tử

Ẩn hoàn toàn các yếu tố có thể được thực hiện theo 3 cách

• thông qua thuộc tính CSS

  [hidden] {
    display: none;
  }
  

  0, e. g.

  [hidden] {
    display: none;
  }
  

  1
• thông qua thuộc tính CSS

  [hidden] {
    display: none;
  }
  

  0, e. g.

  [hidden] {
    display: none;
  }
  

  1
• thông qua thuộc tính HTML5

  [hidden] {
    display: none;
  }
  

  2, e. g.

  [hidden] {
    display: none;
  }
  

  3

Trong khi mỗi kỹ thuật này có kết quả cuối cùng giống nhau, tôi. e. nội dung không được hiển thị và không hiển thị trong cây trợ năng, chúng có các hành vi khác nhau

# Các thuộc tính CSS [hidden] { display: none; } 0 và [hidden] { display: none; } 0

[hidden] {
  display: none;
}

1 sẽ khiến phần tử biến mất hoàn toàn, phần tử này sẽ không chiếm bất kỳ dung lượng nào và không thể hoạt ảnh được.

[hidden] {
  display: none;
}

1 cho phép hoạt ảnh và giữ nguyên không gian mà phần tử sẽ chiếm trên màn hình, nhưng chỉ cần để trống. Không giống như mọi phương pháp ẩn nội dung khác,

[hidden] {
  display: none;
}

0 có khả năng hiện nội dung lồng nhau

  not visible
  visible!

Trừ khi bỏ ẩn nội dung lồng nhau là điều cụ thể chúng ta định làm, chúng ta không nên sử dụng

[hidden] {
  display: none;
}

9 trong biểu định kiểu của mình và thay vào đó hãy sử dụng

.my-element[hidden] {
  display: block;
  visibility: hidden;
}

0. Bằng cách kế thừa trạng thái

[hidden] {
  display: none;
}

0 từ phần tử cha theo mặc định, chúng tôi đảm bảo rằng nội dung lồng nhau không vô tình hiển thị, trong trường hợp tổ tiên đã đặt

[hidden] {
  display: none;
}

1

# Thuộc tính HTML5 [hidden] { display: none; } 2

Thuộc tính

[hidden] {
  display: none;
}

2 của HTML5 cung cấp một API thuận tiện, vì nó có thể được chuyển đổi đơn giản bằng cách đặt

.my-element[hidden] {
  display: block;
  visibility: hidden;
}

5. Bản thân phần tử không ẩn nội dung, nhưng biểu định kiểu bên trong của trình duyệt chứa quy tắc CSS sau

[hidden] {
  display: none;
}

# Ghi đè an toàn thuộc tính [hidden] { display: none; } 2

Chúng tôi tuyệt đối không được hoàn nguyên các hiệu ứng ẩn của thuộc tính

[hidden] {
  display: none;
}

2. Tuy nhiên, chúng tôi có thể hoán đổi

[hidden] {
  display: none;
}

0 cho

[hidden] {
  display: none;
}

0 trong một số trường hợp nhất định, chẳng hạn như để cho phép chúng tôi tạo hiệu ứng động cho phần tử

.my-element[hidden] {
  display: block;
  visibility: hidden;
}

Rất tiếc, chúng tôi không thể sử dụng các giá trị

[hidden] {
  display: none;
}

00,

[hidden] {
  display: none;
}

01 hoặc

[hidden] {
  display: none;
}

02 để hoàn tác

[hidden] {
  display: none;
}

1 một cách đơn giản.

[hidden] {
  display: none;
}

01 và

[hidden] {
  display: none;
}

02 sẽ dịch thành

[hidden] {
  display: none;
}

06 và

[hidden] {
  display: none;
}

00 chỉ đơn giản là "nhập" giá trị

[hidden] {
  display: none;
}

0 của phần tử gốc. Chúng ta có thể sử dụng các bộ chọn mở rộng để tránh các định nghĩa trùng lặp

[hidden] {
  display: none;
}

0

# Cách ẩn các phần tử theo ngữ nghĩa

Để ẩn nội dung khỏi cây trợ năng nhưng giữ lại nội dung trên màn hình, chúng ta có thể sử dụng thuộc tính

[hidden] {
  display: none;
}

09

Ví dụ: chúng tôi có thể muốn ẩn một số hình ảnh và biểu tượng phục vụ mục đích thẩm mỹ thuần túy không mang tính mô tả

[hidden] {
  display: none;
}

9

Chúng ta không nên thêm bất kỳ kiểu trực quan nào (như

[hidden] {
  display: none;
}

1 hoặc

[hidden] {
  display: none;
}

1) vào bộ chọn CSS

[hidden] {
  display: none;
}

92, vì điều này sẽ khiến chúng ta mất khả năng chỉ ẩn nội dung khỏi trình đọc màn hình

# Cách ẩn các phần tử một cách trực quan

Chúng tôi có thể cần cung cấp nội dung vô hình để đảm bảo các cấu trúc được trình bày trong cây trợ năng có ý nghĩa. CSS sau đây được lấy từ HTML5 Boilerplate, dựa trên Ẩn nội dung cho khả năng truy cập

[hidden] {
  display: none;
}

2

Thuộc tính CSS

[hidden] {
  display: none;
}

93 được hỗ trợ trong mọi trình duyệt, nhưng không được dùng trong CSS Masking Level 1. Thay vào đó, chúng tôi phải sử dụng

[hidden] {
  display: none;
}

94, chưa được hỗ trợ rộng rãi. Để hỗ trợ việc hoán đổi các thuộc tính CSS này - bất cứ khi nào điều đó có thể xảy ra - chúng tôi sẽ thêm

[hidden] {
  display: none;
}

95 để bao gồm kiểu

[hidden] {
  display: none;
}

96 không dùng nữa

Trong khi Internet Explorer 9 - 11 làm cho các vùng chứa tràn có thể được đặt tiêu điểm, thì

[hidden] {
  display: none;
}

93 đảm bảo rằng

[hidden] {
  display: none;
}

98 được vẽ bởi

[hidden] {
  display: none;
}

99 không hiển thị và không thể nhấp vào phần tử

Nói về các yếu tố có thể đặt tiêu điểm, chúng tôi có khả năng sử dụng kiểu

[hidden] {
  display: none;
}

20 để bỏ qua các liên kết, trong trường hợp đó, chúng tôi cần một cách để hoàn tác ẩn hình ảnh. HTML5 Boilerplate cung cấp các kiểu sau cho điều đó

[hidden] {
  display: none;
}

1

Cách tiếp cận này đặt ra một vài vấn đề, mặc dù. Trước hết chúng ta cần khai báo các phần tử tương thích bằng cách thêm lớp

[hidden] {
  display: none;
}

21. Thứ hai - và quan trọng hơn nhiều - chúng tôi đang đặt lại các kiểu thành các giá trị có khả năng không phải là những gì chúng tôi định hiển thị. Thay vào đó, chúng tôi có thể sử dụng

[hidden] {
  display: none;
}

22, được hỗ trợ trong mọi trình duyệt hiện đại

Theo Hãy coi chừng văn bản có thể truy cập ngoài màn hình bị nhòe, đoạn mã CSS ở trên có thể gây ra sự cố cho một số trình đọc màn hình. Có vẻ như (trong một số trường hợp) các từ riêng biệt có thể được nối với nhau và do đó được nói một cách kỳ quặc. May mắn thay, chúng ta có thể ngăn chặn sự sụp đổ không mong muốn của khoảng trắng bằng cách thêm

[hidden] {
  display: none;
}

23

# Phiên bản 2017 của [hidden] { display: none; } 20

Đặt tất cả những thứ này lại với nhau, chúng ta có các kiểu sau để ẩn nội dung một cách trực quan

[hidden] {
  display: none;
}

6

• Nó hoạt động trong tất cả các trình duyệt hiện đại bao gồm Internet Explorer 9 - 11
• Nó bỏ qua nhu cầu định kiểu lại mọi thứ cho các yếu tố có thể đặt tiêu điểm, chẳng hạn như bỏ qua liên kết
• Nó chiếm tài sản

  [hidden] {
    display: none;
  }
  

  93 không dùng nữa

Các kỹ thuật để ẩn các phần tử chỉ về mặt trực quan hoặc ngữ nghĩa đi kèm với một lời cảnh báo. Các phần tử có thể đặt tiêu điểm như ________ 03 vẫn có thể điều hướng bằng bàn phím, ngay cả khi phần tử đó không hiển thị trên màn hình hoặc không hiển thị trong cây trợ năng

Để đảm bảo người dùng bàn phím nhìn thấy được không tập trung vào các phần tử mà họ không thể nhìn thấy và người dùng trình đọc màn hình không tập trung vào phần tử không tồn tại đối với họ, chúng tôi cần đảm bảo rằng nội dung bị ẩn một phần không thể truy cập được đối với điều hướng bàn phím bằng cách sử dụng . Để thực hiện điều này, chúng ta có thể thêm

[hidden] {
  display: none;
}

27 vào các phần tử mà chúng ta muốn ẩn khỏi bàn phím

HTML ẩn là gì?

Tôi có thể sử dụng HTML ẩn không?

Làm cách nào để ẩn mã HTML?

Làm cách nào để ẩn văn bản HTML?