<ins>: Phần tử văn bản được chèn

Try it

<p>&ldquo;You're late!&rdquo;</p>
<del>
  <p>&ldquo;I apologize for the delay.&rdquo;</p>
</del>
<ins cite="../how-to-be-a-wizard.html" datetime="2018-05">
  <p>&ldquo;A wizard is never late &hellip;&rdquo;</p>
</ins>

del,
ins {
  display: block;
  text-decoration: none;
  position: relative;
}

del {
  background-color: #ffbbbb;
}

ins {
  background-color: #d4fcbc;
}

del::before,
ins::before {
  position: absolute;
  left: 0.5rem;
  font-family: monospace;
}

del::before {
  content: "−";
}

ins::before {
  content: "+";
}

p {
  margin: 0 1.8rem;
  font-family: "Georgia", serif;
  font-size: 1rem;
}

Thuộc tính

Phần tử này bao gồm các thuộc tính toàn cục.

cite

Thuộc tính này định nghĩa URI của tài nguyên giải thích về sự thay đổi, chẳng hạn như liên kết đến biên bản cuộc họp hoặc vé trong hệ thống xử lý sự cố.

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 ngày hợp lệ với chuỗ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 Định dạng chuỗi ngày hợp lệ. Định dạng của chuỗi nếu bao gồm cả ngày và giờ được trình bày trong Định dạng chuỗi ngày giờ địa phương hợp lệ.

Khả năng tiếp cận

Sự hiện diện của phần tử <ins> 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.

ins::before,
ins::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

ins::before {
  content: " [insertion start] ";
}

ins::after {
  content: " [insertion 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 đã được chèn vào sẽ ảnh hưởng xấu đến việc hiểu tài liệu.

• Short note on making your mark (more accessible) | Vispero
• Tweaking Text Level Styles | Adrian Roselli

Ví dụ

<ins>This text has been inserted</ins>

Kết quả

Tóm tắt kỹ thuật

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• Phần tử <del> để đánh dấu xóa trong tài liệu