aboutsummaryrefslogtreecommitdiff
path: root/files/ru/web/html/element/del/index.html
blob: b0a4fd018742cad475ff931c1ddf7fd8dd0063b7 (plain)
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>&lt;del&gt;</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">&lt;p&gt;&lt;del&gt;This text has been deleted&lt;/del&gt;,
here is the rest of the paragraph.&lt;/p&gt;
&lt;del&gt;&lt;p&gt;This paragraph has been deleted.&lt;/p&gt;&lt;/del&gt;</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>