diff options
Diffstat (limited to 'files/ru/web/css/content/index.html')
| -rw-r--r-- | files/ru/web/css/content/index.html | 293 |
1 files changed, 293 insertions, 0 deletions
diff --git a/files/ru/web/css/content/index.html b/files/ru/web/css/content/index.html new file mode 100644 index 0000000000..f708e7db61 --- /dev/null +++ b/files/ru/web/css/content/index.html @@ -0,0 +1,293 @@ +--- +title: content +slug: Web/CSS/content +tags: + - Контекст +translation_of: Web/CSS/content +--- +<div>{{CSSRef}}</div> + +<p><a href="/en-US/docs/Web/CSS">CSS</a>-свойство <strong><code>content</code></strong> заменяет элемент сгенерированным значением. Объекты, добавленные с помощью свойства <code>content</code> являются <em>анонимными </em>property are <em>anonymous <a href="/en-US/docs/Web/CSS/Replaced_element">замещаемыми элементами</a>.</em></p> + +<pre class="brush:css no-line-numbers">/* Ключевые слова, которые нельзя комбинировать с другими значениями */ +content: normal; +content: none; + +/* значение <url> */ +content: url("http://www.example.com/test.png"); + +/* значение <a href="/en-US/docs/Web/CSS/image"><image></a> */ +content: linear-gradient(#e66465, #9198e5); + +/* указанные ниже значения могут быть применены только к сгенерированному контенту с использованием ::before и ::after */ + +/* значение <string> */ +content: "prefix"; + +/* значения <counter> */ +content: counter(chapter_counter); +content: counters(section_counter, "."); + +/* значение attr() связано со значением атрибута HTML */ +content: attr(value string); + +/* языко- и позиция-зависимые ключевые слова */ +content: open-quote; +content: close-quote; +content: no-open-quote; +content: no-close-quote; + +/* несколько значений могут использоваться вместе */ +content: open-quote chapter_counter; + +/* глобальные значения */ +content: inherit; +content: initial; +content: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<h3 id="Значения">Значения</h3> + +<dl> + <dt><code>none</code></dt> + <dd>Псевдоэлемент не генерируется.</dd> + <dt><code>normal</code></dt> + <dd>Вычисляется <code>none</code> для псевдоэлементов <code>::before</code> и<code>::after</code>.</dd> + <dt>{{cssxref("<string>")}}</dt> + <dd>Любое количество текстовых символов. Нелатинские символы должны быть закодированы с использованием их escape-последовательности Unicode: например, <code>\000A9</code> представляет собой символ авторского права.</dd> + <dt>{{cssxref("<url>")}}</dt> + <dd>URL-адрес, указывающий на внешний ресурс (к примеру, изображение). Если ресурс не может быть отображен, он игнорируется или отображается значение по умолчанию.</dd> + <dt>{{cssxref("<image>")}}</dt> + <dd>{{cssxref("<image>")}}, указанный типом данных {{cssxref("<url>")}} или {{cssxref("<gradient>")}}, или частью веб-страницы, определяемой функцией {{cssxref("element", "element()")}}, указывающей содержимое для обозначения.</dd> + <dt>{{cssxref("<counter>")}}</dt> + <dd>Значение <a href="/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS счетчика</a>, как правило число. Его можно отобразить с помощью функций {{cssxref("counter()")}} или{{cssxref("counters()")}}.</dd> + <dd> + <p>Функция <code>counter()</code> имеет две формы записи: 'counter(<var>имя</var>)' или 'counter(<var>имя</var>, <var>стиль</var>)'. Сгенерированный текст - это значение самого вложенного счетчика с заданным именем в области видимости данного элемента. Он отформатирован в указанном стиле (по умолчанию <code>decimal</code>).</p> + + <p>Функция <code>counters()</code> также имеет две формы записи: 'counters(<var>name</var>, <var>string</var>)' или 'counters(<var>name</var>, <var>string</var>, <var>style</var>)'. Сгенерированный текст - это значение всех счетчиков с заданным именем в области видимости данного элемента, от крайнего к вложенному. разделенных указанной строкой. Счетчики отображаются в указанном стиле (по умолчанию <code>decimal</code>).</p> + </dd> + <dt><code>attr(x)</code></dt> + <dd>Значение атрибута <code>x</code> элемента в виде строки. Если атрибут <code>x</code> отсутствует, вернется пустая строка. Чувствительность к регистру в названии атрибута зависит от языка документа.</dd> + <dt><code>open-quote</code> | <code>close-quote</code></dt> + <dd>Эти значения заменяются соответствующей строкой из свойства {{cssxref("quotes")}}.</dd> + <dt><code>no-open-quote</code> | <code>no-close-quote</code></dt> + <dd>Не вводит никакого содержимого, но увеличивает (уменьшает) уровень вложенности для кавычек.</dd> +</dl> + +<h3 id="Синтаксис_2">Синтаксис</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Заголовки_и_двойные_кавычки">Заголовки и двойные кавычки</h3> + +<p>В этом примере вставляются кавычки вокруг кавычек а добавляет слово "Глава" перед заголовками.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><h1>5</h1> +<p>According to Sir Tim Berners-Lee, + <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">I was + lucky enough to invent the Web at the time when the Internet + already existed - and had for a decade and a half.</q> + We must understand that there is nothing fundamentally wrong + with building on the contributions of others. +</p> + +<h1>6</h1> +<p>According to the Mozilla Manifesto, + <q cite="http://www.mozilla.org/en-US/about/manifesto/">Individuals + must have the ability to shape the Internet and + their own experiences on the Internet.</q> + Therefore, we can infer that contributing to the open web + can protect our own individual experiences on it. +</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">q { + color: blue; +} + +q::before { + content: open-quote; +} + +q::after { + content: close-quote; +} + +h1::before { + content: "Chapter "; /* Пробел в конце создает разделение + между добавленным контентом + и остальным контентом*/ +}</pre> + +<h4 id="Результат">Результат</h4> + +<p>{{EmbedLiveSample('Заголовки_и_двойные_кавычки', '100%', 200)}}</p> + +<h3 id="Изображение_в_сочетании_с_текстом">Изображение в сочетании с текстом</h3> + +<p>В этом примере вставляется изображение перед ссылкой. Если изображение не найдено, вставляет текст.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><a href="http://www.mozilla.org/en-US/">Mozilla Home Page</a></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">a::before { + content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") " MOZILLA: "; + font: x-small Arial, sans-serif; + color: gray; +}</pre> + +<h4 id="Результат_2">Результат</h4> + +<p>{{EmbedLiveSample('Изображение_в_сочетании_с_текстом', '100%', 60)}}</p> + +<h3 id="Целевые_классы">Целевые классы</h3> + +<p>В этом примере вставляется дополнительный текст после указанных элементов списка.</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><h2>Paperback Best Sellers</h2> +<ol> + <li>Political Thriller</li> + <li class="new-entry">Halloween Stories</li> + <li>My Biography</li> + <li class="new-entry">Vampire Romance</li> +</ol></pre> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css">.new-entry::after { + content: " New!"; /* Начальный пробел создает разделение + между добавленным контентом + и остальным контентом */ + color: red; +}</pre> + +<h4 id="Результат_3">Результат</h4> + +<p>{{EmbedLiveSample('Целевые_классы', '100%', 160)}}</p> + +<h3 id="Атрибуты_изображений_и_элементов">Атрибуты изображений и элементов</h3> + +<p>В этом примере вставляется изображение перед каждой ссылкой и добавляет <code>id</code> атрибут после.</p> + +<h4 id="HTML_4">HTML</h4> + +<pre class="brush: html"><ul> + <li><a id="moz" href="http://www.mozilla.org/"> + Mozilla Home Page</a></li> + <li><a id="mdn" href="https://developer.mozilla.org/"> + Mozilla Developer Network</a></li> +</ul></pre> + +<h4 id="CSS_4">CSS</h4> + +<pre class="brush: css">a { + text-decoration: none; + border-bottom: 3px dotted navy; +} + +a::after { + content: " (" attr(id) ")"; +} + +#moz::before { + content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") ; +} + +#mdn::before { + content: url("https://mdn.mozillademos.org/files/7691/mdn-favicon16.png") ; +} + +li { + margin: 1em; +} +</pre> + +<h4 id="Результат_4">Результат</h4> + +<p>{{EmbedLiveSample('Атрибуты_изображений_и_элементов', '100%', 160)}}</p> + +<h3 id="Замена_элемента">Замена элемента</h3> + +<p>В этом примере содержимое элемента заменяется изображением. Вы можете заменить содержимое элемента либо значением <url> или изменить значение <image> . Содержимое, добавленное с помощью ::before или ::after не будет сгенерировано, поскольку содержимое элемента будет заменено.</p> + +<h4 id="HTML_5">HTML</h4> + +<pre class="brush: html"><div id="replaced">Mozilla</div> +</pre> + +<h4 id="CSS_5">CSS</h4> + +<pre class="brush: css">#replaced { + content: url("https://mdn.mozillademos.org/files/12668/MDN.svg"); +} + +#replaced::after { /* не будет отображаться, если замена элемента поддерживается */ + content: " (" attr(id) ")"; +}</pre> + +<h4 id="Результат_5">Результат</h4> + +<p>{{EmbedLiveSample('Замена_элемента', '100%', 160)}}</p> + +<h2 id="Проблемы_доступности">Проблемы доступности</h2> + +<p>Сгенерированный CSS контент не включен в <a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">DOM</a>. Из-за этого он не будет представлен в <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">accessibility tree</a> и некоторые комбинации вспомогательных технологий/браузеров не будут его объявлять. Если контент содержит информацию, которая имеет решающее значение для понимания цели страницы, лучше включить ее в основной документ.</p> + +<ul> + <li><a href="https://tink.uk/accessibility-support-for-css-generated-content/">Accessibility support for CSS generated content – Tink</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">Explanation of WCAG, Guideline 1.3 – MDN</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</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("CSS3 Content", "#content-property", "content")}}</td> + <td>{{Spec2("CSS3 Content")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "generate.html#content", "content")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Первое определение</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("css.properties.content")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{Cssxref("::after")}}</li> + <li>{{Cssxref("::before")}}</li> + <li>{{Cssxref("quotes")}}</li> +</ul> |