a::after
content
", in the chapter entitled "
target-text
attr
href url
))
Result: …which will be discussed later, in the chapter entitled Loomings.
2.7.
Named Strings
This section introduces
named strings
which are the textual equivalent of counters
and which have a distinct namespace from counters.
Named strings follow the same nesting rules as counters.
The
string-set
property accepts values similar to the
content
property,
including the extraction of the current value of counters.
Named strings are a convenient way to pull metadata out of the document
for insertion into headers and footers.
In HTML, for example,
META elements contained in the document HEAD
can set the value of named strings.
In conjunction with attribute selectors,
this can be a powerful mechanism:
meta
author
string-set
author
attr
author
);
head > title
string-set
title contents
@page
:left
@top
text-align
left
vertical-align
middle
content
string
title
);
@page
:right
@top
text-align
right
vertical-align
middle
content
string
author
);
2.7.1.
Naming Strings: the
string-set
property
Name:
string-set
Value:
none


Initial:
none
Applies to:
all elements, but not
pseudo-elements
Inherited:
no
Percentages:
N/A
Computed value:
the keyword
none
or a list, each item an identifier paired with a list of string values
Canonical order:
per grammar
Animation type:
discrete
User agents are expected to support this property on all media, including non-visual ones.
The
string-set
property copies the text content of an element into a
named string
which functions as a variable.
The text content of this named string can be retrieved using the
string()
function.
Since these variables may change on a given page,
an optional second value for the
string()
function
allows authors to choose which value on a page is used.
none
The element does not set any named strings.


The element establishes one or more named strings,
corresponding to each comma-separated entry in the list.
For each entry, the

gives the name of the named string.
It’s followed by one or more

values,
which are concatenated together to form the value of the named string.
If an element has
style containment
the
string-set
property must have no effects on descendants of that element.
The following example captures the contents of H1 elements,
which represent chapter names in this hypothetical document.
H1
string-set
chapter contents
When an H1 element is encountered,
the
chapter
string is set to the element’s textual contents,
and the previous value of
chapter
, if any, is overwritten.
2.7.2.
Inserting Named Strings: the
string()
function
string
()
string

first
start
last
first-except
The
string()
function is used to copy the value of a named string to the document,
via the
content
property.
This function requires one argument,
the name of the named string.
Since the value of a named string may change several times on a page
(as multiple elements defining the string can appear)
an optional second argument indicates which value of the named string should be used.
The second argument of the
string()
function is one of the following keywords:
first
The value of the first assignment on the page is used.
If there is no assignment on the page,
the
entry value
is used.
If no second argument is provided,
this is the default value.
start
If the element is the first element on the page,
the value of the first assignment is used.
Otherwise the
entry value
is used.
The
entry value
may be empty if the
named string
hasn’t yet appeared.
last
The
exit value
of the named string is used.
first-except
This is identical to
first
except that the empty string is used on the page where the value is assigned.
we may need to kill the entire content string. Is this necessary?
The content values of named strings
are assigned at the point when the content box of the element is first created
(or would have been created if the element’s display value is none).
The
entry value
for a page
is the assignment in effect at the end of the previous page.
The
exit value
for a page
is the assignment in effect at the end of the current page.
CSS:
@page
size
15
cm
10
cm
margin
1.5
cm
@top-left
content
"first: "
string
heading
first
);
@top-center
content
"start: "
string
heading
start
);
@top-right
content
"last: "
string
heading
last
);
h2
string-set
heading
content
()
The following figures show the first, start, and last assignments
of the “heading” string on various pages.
The
start
value is empty,
as the string had not yet been set at the start of the page.
Since the page starts with an h2,
the
start
value is the value of that head.
Since there’s not an h2 at the top of this page,
the
start
value is the
exit value
of the previous page.
2.7.3.
The
content()
function
content
()
content
text
before
after
first-letter
marker
text
The string value of the element.
If no value is specified in
content()
it acts as if
text
were specified.
before
The string value of the
::before
pseudo-element
after
The string value of the
::after
pseudo-element
first-letter
The first letter of the element, as defined for the
::first-letter
pseudo-element
marker
The string value of the
::marker
pseudo-element
HTML:

Loomings

"Loomings"
CSS:
section
string-set
header
attr
title
The value of the “header” string will be “Loomings”.
2.8.
Automatic Counters and Numbering
See
CSS Lists 3
§ 4 Automatic Numbering With Counters
Should this move back to CSS Content?
3.
Bookmarks
Some document formats,
most notably PDF,
allow the use of
bookmarks
as an aid to navigation.
Bookmarks provide a list of links to document elements,
as well as text to label the links and a level value.
A bookmark has three properties:
bookmark-level
bookmark-label
, and
bookmark-state
When a user activates a bookmark,
the user agent must bring that reference point to the user’s attention,
exactly as if navigating to that element by fragment URL.
This will also trigger matching the
:target
pseudo-class.
If an element has
style containment
, the
bookmark-level
bookmark-label
, and
bookmark-state
properties
must have no effect on descendants of the element.
3.1.
Setting a Bookmark: the
bookmark-level
property
The
bookmark-level
property determines if a bookmark is created,
and at what level.
If this property is absent,
or has value
none
no bookmark should be generated,
regardless of the values of
bookmark-label
or
bookmark-state
Name:
bookmark-level
Value:
none

Initial:
none
Applies to:
all elements
Inherited:
no
Percentages:
N/A
Computed value:
the keyword
none
or the specified integer
Canonical order:
per grammar
Animation type:
by computed value type

defines the level of the bookmark, with the top level being 1 (negative and zero values are invalid).
none
no bookmark is generated.
section h1
bookmark-level
section section h1
bookmark-level
section section section h1
bookmark-level
Note:
Bookmarks do not need to create a strict hierarchy of levels.
Should a bookmark be created for elements with
display
none
3.2.
Labelling a Bookmark: the
bookmark-label
property
Name:
bookmark-label
Value:

Initial:
content(text)
Applies to:
all elements
Inherited:
no
Percentages:
N/A
Computed value:
specified value
Canonical order:
per grammar
Animation type:
discrete


is defined above, in the section on the
string-set
property. The value of

becomes the text content of the bookmark label.
HTML:

Loomings

CSS:
h1
bookmark-label
content
text
);
bookmark-level
The bookmark label will be “Loomings”.
3.3.
Initial Bookmark Toggle State: the
bookmark-state
property
The
bookmark-state
may be open or closed. The user must be able to toggle the bookmark state.
Name:
bookmark-state
Value:
open
closed
Initial:
open
Applies to:
block-level elements
Inherited:
no
Percentages:
N/A
Computed value:
specified keyword
Canonical order:
per grammar
Animation type:
discrete
open
Subsequent bookmarks with
bookmark-level
greater than the given bookmark are displayed,
until reaching another bookmark of the same level or lower.
If one of subsequent bookmark is closed,
apply the same test to determine if its subsequent bookmarks should be displayed.
closed
Subsequent bookmarks of bookmark-level greater than the given bookmark are not displayed,
until reaching another bookmark of the same level or lower.
Is the initial bookmark state,
or the bookmark state updated by the UA as appropriate?
4.
Changes
Significant changes since the
2 August 2019 Working Draft
consist primarily of:
Updated
auto
to reference the
parent
content language
rather than the
content language
of the element itself.
Issue 5478
Added
match-parent
value to
quotes
Issue 5478
Prevent negative
quote depth
by ignoring excess closing quotes,
consistent with
[CSS2]
Issue 2034
Defined computed value of
content: normal
for
::placeholder
and
::file-selector-button
Issue 6124
Fixed an off-by-one error for the
quote depth
of closing quotes.
Issue 2506
Inlined the definition of
attr()
, since it has been dropped from
[CSS-VALUES-4]
Added Web Platform Tests coverage.
Miscellaneous editorial spec clean up.
See also
previous changes
Acknowledgements
Stuart Ballard,
David Baron,
Bert Bos,
Tantek Çelik
and James Craig
provided invaluable suggestions used in this specification.
Privacy Considerations
No new privacy considerations have been reported on this specification.
Security Considerations
No new security considerations have been reported on this specification.
Conformance
Document conventions
Conformance requirements are expressed with a combination of
descriptive assertions and RFC 2119 terminology. The key words “MUST”,
“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
document are to be interpreted as described in RFC 2119.
However, for readability, these words do not appear in all uppercase
letters in this specification.
All of the text of this specification is normative except sections
explicitly marked as non-normative, examples, and notes.
[RFC2119]
Examples in this specification are introduced with the words “for example”
or are set apart from the normative text with
class=
"example"
like this:
This is an example of an informative example.
Informative notes begin with the word “Note” and are set apart from the
normative text with
class=
"note"
, like this:
Note, this is an informative note.
Advisements are normative sections styled to evoke special attention and are
set apart from other normative text with
"advisement"
, like
this:
UAs MUST provide an accessible alternative.
Tests
Tests relating to the content of this specification
may be documented in “Tests” blocks like this one.
Any such block is non-normative.
Conformance classes
Conformance to this specification
is defined for three conformance classes:
style sheet
CSS
style sheet
renderer
UA
that interprets the semantics of a style sheet and renders
documents that use them.
authoring tool
UA
that writes a style sheet.
A style sheet is conformant to this specification
if all of its statements that use syntax defined in this module are valid
according to the generic CSS grammar and the individual grammars of each
feature defined in this module.
A renderer is conformant to this specification
if, in addition to interpreting the style sheet as defined by the
appropriate specifications, it supports all the features defined
by this specification by parsing them correctly
and rendering the document accordingly. However, the inability of a
UA to correctly render a document due to limitations of the device
does not make the UA non-conformant. (For example, a UA is not
required to render color on a monochrome monitor.)
An authoring tool is conformant to this specification
if it writes style sheets that are syntactically correct according to the
generic CSS grammar and the individual grammars of each feature in
this module, and meet all other conformance requirements of style sheets
as described in this module.
Partial implementations
So that authors can exploit the forward-compatible parsing rules to
assign fallback values, CSS renderers
must
treat as invalid (and
ignore
as appropriate
) any at-rules, properties, property values, keywords,
and other syntactic constructs for which they have no usable level of
support. In particular, user agents
must not
selectively
ignore unsupported component values and honor supported values in a single
multi-value property declaration: if any value is considered invalid
(as unsupported values must be), CSS requires that the entire declaration
be ignored.
Implementations of Unstable and Proprietary Features
To avoid clashes with future stable CSS features,
the CSSWG recommends
following best practices
for the implementation of
unstable
features and
proprietary extensions
to CSS.
Non-experimental implementations
Once a specification reaches the Candidate Recommendation stage,
non-experimental implementations are possible, and implementors should
release an unprefixed implementation of any CR-level feature they
can demonstrate to be correctly implemented according to spec.
To establish and maintain the interoperability of CSS across
implementations, the CSS Working Group requests that non-experimental
CSS renderers submit an implementation report (and, if necessary, the
testcases used for that implementation report) to the W3C before
releasing an unprefixed implementation of any CSS features. Testcases
submitted to W3C are subject to review and correction by the CSS
Working Group.
Further information on submitting testcases and implementation reports
can be found from on the CSS Working Group’s website at
Questions should be directed to the
public-css-testsuite@w3.org
mailing list.
Index
Terms defined by this specification
after
, in § 2.7.3
attr()
, in § 2.1
auto
, in § 2.4.1
before
, in § 2.7.3
bookmark-label
, in § 3.2
bookmark-level
, in § 3.1
bookmarks
, in § 3
bookmark-state
, in § 3.3
closed
, in § 3.3
close-quote
, in § 2.4.2
content
, in § 1
content()
, in § 2.7.3

type for content
, in § 1
value for bookmark-label
, in § 3.2

, in § 1
contents
, in § 2.3
dotted
, in § 2.5.1
entry value
, in § 2.7.2
exit value
, in § 2.7.2
first
, in § 2.7.2
first-except
, in § 2.7.2
first-letter
, in § 2.7.3

, in § 2.2

, in § 3.1
last
, in § 2.7.2
leader()
(function)
, in § 2.5.1
function for content,
, in § 2.5.1

, in § 2.5.1
marker
, in § 2.7.3
match-parent
, in § 2.4.1
named string
, in § 2.7
no-close-quote
, in § 2.4.2
none
value for bookmark-level
, in § 3.1
value for content
, in § 1
value for quotes
, in § 2.4.1
value for string-set
, in § 2.7.1
no-open-quote
, in § 2.4.2
normal
, in § 1
open
, in § 3.3
open-quote
, in § 2.4.2
quotation mark system
, in § 2.4.1

, in § 2.4.2
quote depth
, in § 2.4.2
quotes
, in § 2.4.1
solid
, in § 2.5.1
space
, in § 2.5.1
start
, in § 2.7.2

value for content,
, in § 2.1
value for leader()
, in § 2.5.1
string()
, in § 2.7.2
/ [ | | ]+
, in § 1
string-set
, in § 2.7.1

, in § 2.6
target-counter()
, in § 2.6.1
target-counters()
, in § 2.6.2
target-text()
, in § 2.6.3
text
, in § 2.7.3
Terms defined by reference
[CSS-CASCADE-5]
defines the following terms:
computed value
[CSS-CONTAIN-2]
defines the following terms:
style containment
[CSS-COUNTER-STYLES-3]
defines the following terms:

[CSS-DISPLAY-4]
defines the following terms:
display
[CSS-IMAGES-3]
defines the following terms:

natural dimension
[CSS-IMAGES-4]
defines the following terms:
invalid image
[CSS-LISTS-3]
defines the following terms:

[CSS-PSEUDO-4]
defines the following terms:
::after
::before
::file-selector-button
::first-letter
::marker
::placeholder
[CSS-TEXT-4]
defines the following terms:
content language
white space
[CSS-VALUES-4]
defines the following terms:




CSS-wide keywords
[CSS-VALUES-5]
defines the following terms:
attr()
[CSS3-NAMESPACE]
defines the following terms:
CSS qualified name
[HTML]
defines the following terms:
img
[SELECTORS-4]
defines the following terms:
:target
originating element
pseudo-elements
References
Normative References
[CSS-CASCADE-5]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr..
CSS Cascading and Inheritance Level 5
. URL:
[CSS-CONTAIN-2]
Tab Atkins Jr.; Florian Rivoal; Vladimir Levin.
CSS Containment Module Level 2
. URL:
[CSS-COUNTER-STYLES-3]
Tab Atkins Jr..
CSS Counter Styles Level 3
. URL:
[CSS-DISPLAY-4]
Elika Etemad; Tab Atkins Jr..
CSS Display Module Level 4
. URL:
[CSS-IMAGES-3]
Tab Atkins Jr.; Elika Etemad; Lea Verou.
CSS Images Module Level 3
. URL:
[CSS-IMAGES-4]
Elika Etemad; Tab Atkins Jr.; Lea Verou.
CSS Images Module Level 4
. URL:
[CSS-LISTS-3]
Elika Etemad; Tab Atkins Jr..
CSS Lists and Counters Module Level 3
. URL:
[CSS-PSEUDO-4]
Elika Etemad; Alan Stearns.
CSS Pseudo-Elements Module Level 4
. URL:
[CSS-TEXT-4]
Elika Etemad; et al.
CSS Text Module Level 4
. URL:
[CSS-VALUES-3]
Tab Atkins Jr.; Elika Etemad.
CSS Values and Units Module Level 3
. URL:
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad.
CSS Values and Units Module Level 4
. URL:
[CSS-VALUES-5]
Tab Atkins Jr.; Elika Etemad; Miriam Suzanne.
CSS Values and Units Module Level 5
. URL:
[CSS2]
Bert Bos; et al.
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
. URL:
[CSS3-NAMESPACE]
Elika Etemad.
CSS Namespaces Module Level 3
. URL:
[CSS3-SPEECH]
Léonie Watson; Elika Etemad.
CSS Speech Module Level 1
. URL:
[HTML]
Anne van Kesteren; et al.
HTML Standard
. Living Standard. URL:
[RFC2119]
S. Bradner.
Key words for use in RFCs to Indicate Requirement Levels
. March 1997. Best Current Practice. URL:
[SELECTORS-4]
Elika Etemad; Tab Atkins Jr..
Selectors Level 4
. URL:
Non-Normative References
[CLDR]
Unicode Common Locale Data Repository
. URL:
[CSS-TEXT-3]
Elika Etemad; Koji Ishii; Florian Rivoal.
CSS Text Module Level 3
. URL:
[DOM]
Anne van Kesteren.
DOM Standard
. Living Standard. URL:
Property Index
Name
Value
Initial
Applies to
Inh.
%ages
Anim­ation type
Canonical order
Com­puted value
bookmark-label

content(text)
all elements
no
N/A
discrete
per grammar
specified value
bookmark-level
none |
none
all elements
no
N/A
by computed value type
per grammar
the keyword none or the specified integer
bookmark-state
open | closed
open
block-level elements
no
N/A
discrete
per grammar
specified keyword
content
normal | none | [ | ] [/ [ | | ]+ ]?
normal
all elements, tree-abiding pseudo-elements, and page margin boxes
no
n/a
discrete
per grammar
See prose below
quotes
auto | none | match-parent | [ ]+
auto
all elements
yes
n/a
discrete
per grammar
the keyword none, the keyword auto or match-parent, or a list, each item a pair of string values
string-set
none | [ + ]#
none
all elements, but not pseudo-elements
no
N/A
discrete
per grammar
the keyword none or a list, each item an identifier paired with a list of string values
Issues Index
The above
invalid image
behavior appears to be what Chrome is doing.
Is this okay?
Is there a better behavior we can/should use?
This value has historically been treated as

on
::before
and
::after
Presumably there’s a Web-compat requirement on this,
so these pseudo-elements might need an exception.
[Issue #2889]
Should the contents keyword be replaced with
content()
Start work on an AAM for CSS.
CSS2.1 explicitly allowed the UA to substitute a broken image icon
if the image was invalid.
However, no browser appears to do this.
Is this removal okay?
Should this behave as an empty string on pseudo-elements?
Use cases for suppressing the content on the element and using it in a pseudo-element would be welcome.
Do we need the statement about marker pseudo-elements here? Or is this legacy from the old version of the spec?
Two possible approaches here, currently speccing the latter:
a) this computes to the relevant string values, and inherits as such.
b) this value effectively inherits as a keyword + a language code,
meaning
auto
, but with this language.
Do leaders depend on the assumption that the content after the leader is right-aligned (end-aligned)?
what to do if
after content
is wider than the line box?
Leaders don’t quite work in table layouts. How can we fix this?
what should error handling be?
restrict syntactically to local references for now.
found a compelling example, in CSS specs. Do something.
A simpler syntax has been proposed by fantasai:
we may need to kill the entire content string. Is this necessary?
Should this move back to CSS Content?
Should a bookmark be created for elements with
display
none
Is the initial bookmark state,
or the bookmark state updated by the UA as appropriate?
MDN
content
In all current engines.
Firefox
1+
Safari
1+
Chrome
1+
Opera
4+
Edge
79+
Edge (Legacy)
12+
IE
8+
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
10.1+
MDN
quotes
In all current engines.
Firefox
1.5+
Safari
9+
Chrome
11+
Opera
4+
Edge
79+
Edge (Legacy)
12+
IE
8+
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
37+
Samsung Internet
Opera Mobile