From 95aca4b4d8fa62815d4bd412fff1a364f842814a Mon Sep 17 00:00:00 2001 From: Ryan Johnson Date: Thu, 29 Apr 2021 16:16:42 -0700 Subject: remove retired locales (#699) --- files/vi/web/css/content/index.html | 296 ------------------------------------ 1 file changed, 296 deletions(-) delete mode 100644 files/vi/web/css/content/index.html (limited to 'files/vi/web/css/content') diff --git a/files/vi/web/css/content/index.html b/files/vi/web/css/content/index.html deleted file mode 100644 index 61956c11a9..0000000000 --- a/files/vi/web/css/content/index.html +++ /dev/null @@ -1,296 +0,0 @@ ---- -title: content -slug: Web/CSS/content -translation_of: Web/CSS/content ---- -
{{CSSRef}}
- -

The content CSS property replaces an element with a generated value. Objects inserted using the content property are anonymous replaced elements.

- -
/* Keywords that cannot be combined with other values */
-content: normal;
-content: none;
-
-/* <image> values */
-content: url("http://www.example.com/test.png");
-content: linear-gradient(#e66465, #9198e5);
-
-/* alt text for generated content, added in the Level 3 specification */
-content: url("http://www.example.com/test.png") / "This is the alt text";
-
-/* values below can only be applied to generated content using ::before and ::after */
-
-/* <string> value */
-content: "prefix";
-
-/* <counter> values, optionally with <list-style-type> */
-content: counter(chapter_counter);
-content: counter(chapter_counter, upper-roman);
-content: counters(section_counter, ".");
-content: counters(section_counter, ".", decimal-leading-zero);
-
-/* attr() value linked to the HTML attribute value */
-content: attr(value string);
-
-/* Language- and position-dependent keywords */
-content: open-quote;
-content: close-quote;
-content: no-open-quote;
-content: no-close-quote;
-
-/* Except for normal and none, several values can be used simultaneously */
-content: open-quote chapter_counter;
-
-/* Global values */
-content: inherit;
-content: initial;
-content: unset;
-
- -

Syntax

- -

Values

- -
-
none
-
The pseudo-element is not generated.
-
normal
-
Computes to none for the ::before and ::after pseudo-elements.
-
{{cssxref("<string>")}}
-
Specifies the "alt text" for the element. This value can be any number of text characters. Non-Latin characters must be encoded using their Unicode escape sequences: for example, \000A9 represents the copyright symbol.
-
{{cssxref("<image>")}}
-
An {{cssxref("<image>")}}, denoted by the {{cssxref("<url>")}} or {{cssxref("<gradient>")}} data type, or part of the webpage, defined by the {{cssxref("element", "element()")}} function, denoting the content to display.
-
{{cssxref("<counter>")}}
-
The value of a CSS counter, generally a number produced by computations defined by {{cssxref("<counter-reset>")}} and {{cssxref("<counter-increment>")}} properies. It can be displayed using either the {{cssxref("counter")}} or {{cssxref("counters")}} function.
-
-

The {{cssxref("counter")}} function has two forms: 'counter(name)' or 'counter(name, style)'. The generated text is the value of the innermost counter of the given name in scope at the given pseudo-element. It is formatted in the specified {{cssxref("<list-style-type>")}} (decimal by default).

- -

The {{cssxref("counters")}} function also has two forms: 'counters(name, string)' or 'counters(name, string, style)'. The generated text is the value of all counters with the given name in scope at the given pseudo-element, from outermost to innermost, separated by the specified string. The counters are rendered in the indicated {{cssxref("<list-style-type>")}} (decimal by default).

-
-
attr(x)
-
The value of the element's attribute x as a string. If there is no attribute x, an empty string is returned. The case-sensitivity of attribute names depends on the document language.
-
open-quote | close-quote
-
These values are replaced by the appropriate string from the {{cssxref("quotes")}} property.
-
no-open-quote | no-close-quote
-
Introduces no content, but increments (decrements) the level of nesting for quotes.
-
- -

Accessibility concerns

- -

CSS-generated content is not included in the DOM. Because of this, it will not be represented in the accessibility tree and certain assistive technology/browser combinations will not announce it. If the content conveys information that is critical to understanding the page's purpose, it is better to include it in the main document.

- - - -

Formal definition

- -

{{cssinfo}}

- -

Formal syntax

- -{{csssyntax}} - -

Examples

- -

Headings and quotes

- -

This example inserts quotation marks around quotes, and adds the word "Chapter" before headings.

- -

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>
- -

CSS

- -
q {
-  color: blue;
-}
-
-q::before {
-  content: open-quote;
-}
-
-q::after {
-  content: close-quote;
-}
-
-h1::before  {
-  content: "Chapter ";  /* The trailing space creates separation
-                           between the added content and the
-                           rest of the content */
-}
- -

Result

- -

{{EmbedLiveSample('Headings_and_quotes', '100%', 200)}}

- -

Image combined with text

- -

This example inserts an image before the link. If the image is not found, it inserts text instead.

- -

HTML

- -
<a href="http://www.mozilla.org/en-US/">Mozilla Home Page</a>
- -

CSS

- -
a::before {
-  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") / " MOZILLA: ";
-  font: x-small Arial, sans-serif;
-  color: gray;
-}
- -

Result

- -

{{EmbedLiveSample('Image_combined_with_text', '100%', 60)}}

- -

Targeting classes

- -

This example inserts additional text after special items in a list.

- -

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>
- -

CSS

- -
.new-entry::after {
-  content: " New!";  /* The leading space creates separation
-                        between the added content and the
-                        rest of the content */
-  color: red;
-}
- -

Result

- -

{{EmbedLiveSample('Targeting_classes', '100%', 160)}}

- -

Images and element attributes

- -

This example inserts an image before each link, and adds its id attribute after.

- -

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>
- -

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;
-}
-
- -

Result

- -

{{EmbedLiveSample('Images_and_element_attributes', '100%', 160)}}

- -

Element replacement

- -

This example replaces an element's content with an image. You can replace the contents of an element with either a {{cssxref("<url>")}} or an {{cssxref("<image>")}} value. Content added with ::before or ::after will not be generated as the contents of the element have been replaced.

- -

HTML

- -
<div id="replaced">Mozilla</div>
-
- -

CSS

- -
#replaced {
-  content: url("https://mdn.mozillademos.org/files/12668/MDN.svg");
-}
-
-#replaced::after { /* will not show if element replacement is supported */
-  content: " (" attr(id) ")";
-}
- -

Result

- -

{{EmbedLiveSample('Element_replacement', '100%', 200)}}

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS3 Content", "#content-property", "content")}}{{Spec2("CSS3 Content")}}Adds support for alt-text
{{SpecName("CSS2.1", "generate.html#content", "content")}}{{Spec2("CSS2.1")}}Initial definition
- -

Browser compatibility

- - - -

{{Compat("css.properties.content")}}

- -

See also

- - -- cgit v1.2.3-54-g00ecf