CSS miscellaneous properties

Question 1

quotes CSS property

Answer 1

The CSS quotes property sets how the browser should render quotation marks that are automatically added to the HTML <q> element or added using the open-quotes or close-quotes (or omitted using the no-open-quote and no-close-quote) values of the of the CSS content property.

Browsers insert quotation marks at the opening and closing of <q> elements and for the open-quote and close-quote values of the content property. Each opening or closing quote is replaced by one of the strings from the value of quotes, based on the depth of nesting, or, if quotes is explicity set to or otherwise resolves to auto, the quotation marks used are language dependent.

Syntax

/* Keyword value */
quotes: none;
quotes: auto;

/* <string> values */
quotes: "«" "»"; /* Set open-quote and close-quote to use French quotation marks */
quotes: "«" "»" "‹" "›"; /* Set two levels of quotation marks */

Values

none - The open-quote and close-quote values of the content property produce no quotation marks, as if no-open-quote and no-close-quote were set, respectively.

auto - Quotation marks that are typographically appropriate for the inherited language (i.e. via the lang attribute set on the parent or other ancestor).

[<string> <string>]+ - Defines one or more pairs of quotation mark values for opening and closing quotes. In each pair, the first of each pair of quotes are used as the values for the open-quote and the second of each pair is the close-quote.

The first pair represents the quotation’s outer level. The second pair, if present, represents the first nested level. The next pair is used for doubly nested levels, and so on. If the depth of quote nesting is greater than the number of pairs, the last pair in the quotes value is repeated.

“quotes - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved May 14, 2024.

Question 2

content CSS property

Answer 2

The content CSS property replaces content with a generated value. It can be used to define what is rendered inside an element or pseudo-element. For elements, the content property specifies whether the element renders normally (normal or none) or is replaced with an image (and associated “alt” text). For pseudo-elements and margin boxes, content defines the content as images, text, both, or none, which determines whether the element renders at all.

Objects inserted using the content property are anonymous replaced elements.

Syntax

/* Keywords that cannot be combined with other values */
content: normal;
content: none;

/* <content-replacement>: <image> values */
content: url("http://www.example.com/test.png");
content: linear-gradient(#e66465, #9198e5);
content: image-set("image1x.png" 1x, "image2x.png" 2x);

/* speech output: alternative text after a "/"  */
content: url("../img/test.png") / "This is the alt text";

/* <string> value */
content: "unparsed text";

/* <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(href);

/* <quote> values */
content: open-quote;
content: close-quote;
content: no-open-quote;
content: no-close-quote;

/* <content-list>: a list of content values. 
Several values can be used simultaneously */
content: "prefix" url(http://www.example.com/test.png);
content: "prefix" url("/img/test.png") "suffix" / "Alt text";
content: open-quote counter(chapter_counter);

Values

• One of two keywords — none or normal
<content-replacement> when replacing a DOM node. <content-replacement> is always an <image>.
• A <content-list> when replacing pseudo-elements and margin boxes. A content-list is a list of one or more anonymous inline boxes appearing in the order specified. Each <content-list> item is either contents or of type <string>, <image>, * <counter>, <quote>, <target>, or <leader()>.
  An optional alternative text value of a <string> or <counter>, preceded by a slash (/).

“content - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved May 15, 2024.