quotes (CSS property)

Spec
Inherited Initial Version
Yes CSS2
Browser support (more…)
IE8+ FF1+ SA4 OP9.2+ CH2
Full Full None Buggy None

Syntax

quotes: { string string1 or more pairs | none | inherit }  …;

Description

This property specifies the quote characters to use for generated content.

The quote characters specified for this property are those used for the open-quote and close-quote values of the content property.

Quotes can be specified for a number of nesting levels. Each use of open-quote or no-open-quote increments the nesting level, while each use of close-quote or no-close-quote decrements the nesting level.

Note that the nesting level has nothing to do with the markup; it’s only the use of the aforementioned content values that affect the nesting level.

Example

These style rules define the traditional sequence of quote characters for q elements in American and British English.

For American English, quotes are normally surrounded by double quotation marks, while nested quotes use single quotation marks. For British English, it’s the other way around.

:lang(en-us)>q {
  quotes: "\201c" "\201d" "\2018" "\2019";
}
:lang(en-gb)>q {
quotes: "\2018" "\2019" "\201c" "\201d";
}

Value

If specified as none, the values open-quote and close-quote won’t insert any quote character when they’re used with the content property.

If the values are specified as string pairs, each pair represents a nesting level. The first pair is used for the outermost quotation level, the second pair for the first embedded quote, and so on through nesting levels. The first string in each pair is the open quote, and the second string is the close quote.

The initial value for this property depends on the user agent.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
None None None Full Full Full Full Full Full None None None None Buggy Buggy Buggy None

Internet Explorer for Windows versions up to and including 7 don’t support generated quotes.

Safari versions up to and including 4 and Chrome versions up to and including 3 don’t support this property.

In Opera versions up to and including 10.0, when the quote nesting level isn’t represented by the number of pairs defined for the quotes property, open-quote inserts the last defined close quote character, while close-quote inserts the default close quote character.

User-contributed notes

Related Products