quotes

翻译不完整。 请帮助我们翻译这篇文章!

quotes CSS 属性用于设置引号的样式。

语法

/* Keyword value */
quotes: none;

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

/* Global values */
quotes: inherit;
quotes: initial;
quotes: unset;

none
 content 属性的值 open-quote 和 close-quote 将不会展示引号.
auto
用适当的引号,基于在所选元素上设置的任何语言值(例如,通过 lang 属性)。
[<string> <string>]+
一组或者多组 <string> 的值对应 open-quote and close-quote. 第一对表示引号的外层,第二对表示第一个嵌套层,下一对表示第三层,依此类推。

语法格式

none | auto | [ <string> <string> ]+

示例

基本用法

HTML

<q>To be or not to be. That's the question!</q>

CSS

q {
  quotes: '"' '"' "'" "'";
}
q::before {
  content: open-quote;
}
q:after {
  content: close-quote;
}

结果

自动选择引号

HTML

<div lang="fr">
  <q>Ceci est une citation française.</q>
<div>
<hr>
<div lang="ru">
  <q>Это русская цитата</q>
<div>
<hr>  
<div lang="de">
  <q>Dies ist ein deutsches Zitat</q>
<div>
<hr>
<div lang="en">
  <q>This is an English quote.</q>
<div>

CSS

/*q {
  quotes: auto;
}*/

结果

备注

  • 对于大多数浏览器,引号的默认值始终为auto(Firefox 70+),否则浏览器具有此默认行为(Chromiums,Safari,Edge),因此上面的示例可以在不显式设置的情况下工作。
  • 从Firefox 3.5开始,可以使用 -moz-initial读取quotes属性的初始值,这在Firefox的早期版本中是不可能的。

规范

Specification Status Comment
CSS Generated Content Module Level 3
quotes
Working Draft
CSS Level 2 (Revision 1)
quotes
Recommendation Initial definition
初始值depends on user agent
适用元素all elements
是否是继承属性yes
计算值as specified
Animation typediscrete

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
quotesChrome Full support 11Edge Full support 12Firefox Full support 1.5IE Full support 8Opera Full support 4Safari Full support 9WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 14Safari iOS Full support 9Samsung Internet Android Full support 1.0
auto keywordChrome No support No
Notes
No support No
Notes
Notes This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
Edge No support No
Notes
No support No
Notes
Notes This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
Firefox Full support 70IE No support No
Notes
No support No
Notes
Notes This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
Opera No support No
Notes
No support No
Notes
Notes This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
Safari No support No
Notes
No support No
Notes
Notes This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
WebView Android No support No
Notes
No support No
Notes
Notes This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
Chrome Android No support No
Notes
No support No
Notes
Notes This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
Firefox Android No support NoOpera Android No support No
Notes
No support No
Notes
Notes This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
Safari iOS No support No
Notes
No support No
Notes
Notes This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
Samsung Internet Android No support No
Notes
No support No
Notes
Notes This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.

参考