<s>: The Strikethrough element
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ử <s> trong HTML hiển thị văn bản có gạch ngang, hay một đường kẻ xuyên qua. Dùng phần tử <s> để đại diện cho những thứ không còn liên quan hoặc không còn chính xác. Tuy nhiên, <s> không phù hợp khi chỉ ra các chỉnh sửa tài liệu; cho mục đích đó, hãy dùng các phần tử <del> và <ins> tùy trường hợp.
Try it
<p><s>There will be a few tickets available at the box office tonight.</s></p>
<p>SOLD OUT!</p>
s {
/* Add your styles here */
}
Thuộc tính
Phần tử này chỉ bao gồm các thuộc tính toàn cục.
Khả năng tiếp cận
Sự hiện diện của phần tử s không được hầu hết công nghệ đọc màn hình thông báo trong cấu hình mặc định của chúng. Có thể làm cho nó được thông báo bằng cách sử dụng thuộc tính CSS content, kết hợp với các phần tử giả ::before và ::after.
s::before,
s::after {
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
s::before {
content: " [start of stricken text] ";
}
s::after {
content: " [end of stricken text] ";
}
Một số người dùng trình đọc màn hình cố ý tắt thông báo nội dung tạo ra thêm sự dài dòng. 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 trong các tình huống mà việc không biết nội dung đã bị gạch ngang sẽ ảnh hưởng xấu đến khả năng hiểu.
Ví dụ
.sold-out {
text-decoration: line-through;
}
<s>Today's Special: Salmon</s> SOLD OUT<br />
<span class="sold-out">Today's Special: Salmon</span> SOLD OUT
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 | Nội dung cụm từ. |
| Bỏ thẻ | Không được phép, 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 | HTMLElement |
Đặc tả
| Specification |
|---|
| HTML # the-s-element |
Tương thích trình duyệt
Xem thêm
- Phần tử
<strike>, phiên bản cũ của phần tử<s>, đã lỗi thời và không nên dùng trên các trang web nữa. - Phần tử
<del>nên được dùng thay thế khi dữ liệu đã bị xóa. - Thuộc tính CSS
text-decoration-linenên được dùng để đạt được giao diện trực quan trước đây của phần tử<s>.