<del>: Phần tử văn bản đã xóa
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Phần tử <del> trong HTML biểu diễn một đoạn văn bản đã bị xóa khỏi tài liệu. Điều này có thể được sử dụng khi hiển thị thông tin "theo dõi thay đổi" hoặc thông tin diff mã nguồn chẳng hạn. Phần tử <ins> có thể được sử dụng cho mục đích ngược lại: để chỉ ra văn bản đã được thêm vào tài liệu.
Try it
<blockquote>
There is <del>nothing</del> <ins>no code</ins> either good or bad, but
<del>thinking</del> <ins>running it</ins> makes it so.
</blockquote>
del {
text-decoration: line-through;
background-color: #ffbbbb;
color: #555555;
}
ins {
text-decoration: none;
background-color: #d4fcbc;
}
blockquote {
padding-left: 15px;
border-left: 3px solid #d7d7db;
font-size: 1rem;
}
Phần tử này thường (nhưng không bắt buộc) được hiển thị bằng cách áp dụng kiểu gạch ngang cho văn bản.
Thuộc tính
Các thuộc tính của phần tử này bao gồm các thuộc tính toàn cục.
cite-
Một URI đến tài nguyên giải thích về sự thay đổi (ví dụ: biên bản cuộc họp).
datetime-
Thuộc tính này cho biết thời gian và ngày tháng của sự thay đổi và phải là một chuỗi ngày hợp lệ với thời gian tùy chọn. Nếu giá trị không thể được phân tích cú pháp thành ngày với chuỗi thời gian tùy chọn, phần tử không có dấu thời gian liên quan. Để biết định dạng của chuỗi không có thời gian, xem Chuỗi ngày tháng. Định dạng của chuỗi nếu bao gồm cả ngày và giờ được trình bày trong Chuỗi ngày giờ địa phương.
Khả năng tiếp cận
Sự hiện diện của phần tử del thường không được thông báo bởi hầu hết các công nghệ đọc màn hình trong cấu hình mặc định. Có thể khiến nó được thông báo bằng cách sử dụng thuộc tính CSS content, cùng với các phần tử giả ::before và ::after.
del::before,
del::after {
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
del::before {
content: " [deletion start] ";
}
del::after {
content: " [deletion end] ";
}
Một số người dùng đọc màn hình cố ý tắt thông báo nội dung gây ra sự dài dòng thêm. Chính vì vậy, điều quan trọng là không lạm dụng kỹ thuật này và chỉ áp dụng nó trong các tình huống mà việc không biết nội dung đã bị xóa sẽ ảnh hưởng xấu đến việc hiểu tài liệu.
Ví dụ
<p><del>This text has been deleted</del>, here is the rest of the paragraph.</p>
<del><p>This paragraph has been deleted.</p></del>
Kết quả
Tóm tắt kỹ thuật
| Danh mục nội dung | Nội dung cụm từ, nội dung luồng. |
|---|---|
| Nội dung được phép | Trong suốt. |
| Bỏ qua thẻ | Không có, cả thẻ mở và thẻ đóng đều bắt buộc. |
| Phần tử cha được phép | Bất kỳ phần tử nào chấp nhận nội dung cụm từ. |
| Vai trò ARIA ngầm định |
deletion
|
| Vai trò ARIA được phép | Bất kỳ |
| Giao diện DOM | HTMLModElement |
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| HTML # the-del-element |