From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/vi/web/css/content/index.html | 296 ++++++++++++++++++++++++++++++++++++ 1 file changed, 296 insertions(+) create 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 new file mode 100644 index 0000000000..188f634136 --- /dev/null +++ b/files/vi/web/css/content/index.html @@ -0,0 +1,296 @@ +--- +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