1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
---
title: '<del>: The Deleted Text element'
slug: Web/HTML/Element/del
tags:
- доступность
translation_of: Web/HTML/Element/del
---
<p><span class="seoSummary">Элемент <strong>HTML <code><del></code> </strong>представляет диапазон текста, который был удалён из документа. </span>Он может быть использован, например, при отображении "отслеживания изменений" или различий в исходном коде. Элемент {{HTMLElement("ins")}} можно использовать для противоположной цели: указание текста, который был добавлен в документ.</p>
<div>{{EmbedInteractiveExample("pages/tabbed/del.html", "tabbed-standard")}}</div>
<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
<p>Этот элемент часто (но не обязательно) отображается с помощью применения зачёркнутого стиля к тексту.</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/en-US/docs/HTML/Content_categories">Категории контента</a></th>
<td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Фразовый контент</a> или <a href="/en-US/docs/HTML/Content_categories#Flow_content">потоковый контент</a>.</td>
</tr>
<tr>
<th scope="row">Разрешённый контент</th>
<td><a href="/en-US/docs/HTML/Content_categories#Transparent_content_model">Прозрачный</a>.</td>
</tr>
<tr>
<th scope="row">Пропуск тега</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">Допустимые родители</th>
<td>Любой элемент, который принимает <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td>
</tr>
<tr>
<th scope="row">Допустимые ARIA роли</th>
<td>Любые</td>
</tr>
<tr>
<th scope="row">DOM интерфейс</th>
<td>{{domxref("HTMLModElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Атрибуты">Атрибуты</h2>
<p>Атрибуты этого элемента включают <a href="/en-US/docs/HTML/Global_attributes">глобальные атрибуты</a>.</p>
<dl>
<dt>{{htmlattrdef("cite")}}</dt>
<dd>URI для ресурса, который объясняет изменение (например, протоколы соединений).</dd>
<dt>{{htmlattrdef("datetime")}}</dt>
<dd>Этот атрибут устанавливает время и дату изменение и должен представлять собой строку с допустимой датой и временем (время не является обязательным параметром - параметр опционален). Если значение не может быть проанализировано как дата с опционально временем, элемент не будет иметь соответствующей временной отметки. Формат строки без времени смотри в {{SectionOnPage("/en-US/docs/Web/HTML/Date_and_time_formats", "Format of a valid date string")}}. Формат строки с датой и временем описан в {{SectionOnPage("/en-US/docs/Web/HTML/Date_and_time_formats", "Format of a valid local date and time string")}}.</dd>
</dl>
<h2 id="Примеры">Примеры</h2>
<pre class="brush: html"><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></pre>
<h3 id="Результат">Результат</h3>
<p><del>This text has been deleted</del>, here is the rest of the paragraph.</p>
<p><del>This paragraph has been deleted.</del></p>
<h2 id="Проблемы_доступности">Проблемы доступности</h2>
<p>Присутствие элемента <code>del</code> не определено в конфигурации по умолчанию большинством технологий чтения с экрана. Его можно задать, используя свойство CSS {{cssxref("content")}}, а также {{cssxref("::before")}} и с помощью псевдоэлемента {{cssxref("::after")}}.</p>
<pre>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] ";
}
</pre>
<p>Некоторые люди, использующие программы чтения с экрана, сознательно отключают определение контента, что создаёт дополнительную многословность. Поэтому важно не злоупотреблять этой техникой, применяя её только в ситуациях, когда незнание контента, который был удалён, может негативно повлиять на восприятие.</p>
<ul>
<li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/">Короткая заметка о создании своих меток (больше доступности) | The Paciello Group</a></li>
<li><a href="http://adrianroselli.com/2017/12/tweaking-text-level-styles.html">Тонкая настройка стилей уровня текста | Adrian Roselli</a></li>
</ul>
<h2 id="Спецификации">Спецификации</h2>
{{Specifications}}
<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
<p>{{Compat}}</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>{{HTMLElement("ins")}} элемент для вставки в текст</li>
<li>
<p>{{HTMLElement("s")}} элемент для зачёркивания, отдельный от представления удалённого текста</p>
</li>
</ul>
<div>{{HTMLRef}}</div>
|