string-set property CSS Reference



Definition and Usage

The 'string-set' property accepts a comma-separated list of named strings. Each named string is followed by a content list that specifies which text to copy into the named string. Whenever an element with value of 'string-set' different from 'none' is encountered, the named strings are assigned their respective value.

Name: string-set
Value: [[ <identifier> <content-list>] [, <identifier> <content-list>]* ] | none
Initial: none
Applies to: all elements
Inherited: no
Percentages: N/A
Media: all
Computed value: as specified value

Syntax

string-set : [[ <identifier> <content-list>] [, <identifier> <content-list>]* ] | none;

Values

<string>
a string, e.g. "foo"
<counter>
the counter() or counters() function, as per CSS 2.1 section 4.3.5
<content>
the 'content()' function returns the content of elements and pseudo-elements. The functional notation accepts an optional argument:
'content()'
Without any arguments, the function returns the textual content of the element, not including the content of its ::before and ::after pseudo-element. The content of the element's descendants, including their respective ::before and ::after pseudo-elements, are included in the returned content.
'content(before)'
The function returns the textual content of the ::before pseudo-element the content of the element.
'content(after)'
The function returns the textual content of the ::after pseudo-element the content of the element.
'content(first-letter)'
The function returns the first letter of the content of the element. The definition of a letter is the same as for :first-letter pseudo-elements.

The expected use for 'content(first-letter)' is to create one-letter headers, e.g., in dictionaries.

'env()'
This function returns data from the local environment of the user at the time of formatting. The function accepts one of these keywords:
  • env(url): returns the URL of the document
  • env(date): returns the date on the user's system at the time of formatting
  • env(time): returns the time on the user's system at the time of formatting
  • env(date-time): returns the date and time on the user's system at the time of formatting

Information about date and time is formatted according to the locale of the user's system.

Or, should there be a way to specify the locale? Or should we simply format all in ISO format (e.g., 2010-03-30)?

On many systems, preformatted strings in the user's locale can be found through the strftime function. The date, time and date-time strings can be found by using the "%x", "%X" and "%c" conversion strings, respectively.


Examples

/* This example results in the same value being assigned to header as in the previous example.  */
h2:before { content: "Chapter " counter(header) }
h2 {
    string-set: header content(before) content();
    counter-increment: header;
}
dt {
    string-set: index content(first-letter);
}
/* The content is copied regardless of other settings on the element. In HTML, TITLE elements are normally not displayed, but in this examplet the content is copied into a named string:  */
title {
    display: none;
    string-set: header content();
}

Relative articles