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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
|
---
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>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'edits.html#the-del-element', '<del>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'edits.html#the-del-element', '<del>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'struct/text.html#h-9.4', '<del>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
<p>{{Compat("html.elements.del")}}</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>{{HTMLElement("ins")}} элемент для вставки в текст</li>
<li>
<p>{{HTMLElement("s")}} элемент для зачёркивания, отдельный от представления удалённого текста</p>
</li>
</ul>
<div>{{HTMLRef}}</div>
|
