Definition and Usage
The quotes CSS property indicates how user agents should render quotation marks.
- Initial user agent specific
- Applies to all elements
- Inherited yes
- Media visual
- Computed Value as specified
- Animatable no
- Canonical order the unique non-ambiguous order defined by the formal grammar
Syntax
Formal syntax: [<string> <string>]+ | none
quotes: none
quotes: "«" "»" /* Set open-quote and close-quote to the French quotation marks */
quotes: "«" "»" "‹" "›" /* Set two levels of quotation marks */
quotes: inherit
Values
- none
- The open-quote and close-quote values of the content property produce no quotation marks.
- [<string> <string>]+
- One or more pairs of <string> values for open-quote and close-quote. The first pair represents the outer level of quotation, the second pair is for the first nested level, next pair for third level and so on.
Examples
q { quotes: '"' '"' "'" "'" }
q:before { content: open-quote }
q:after { content: close-quote }
Compatibility
Desktop browsers
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|
Basic support | 11 | 1.5 | 8.0 | 4.0 | NA |
Mobile browsers
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|
Basic support | NA | NA | NA | NA | NA |