diff options
author | Hsiao Feng <vectorst@foxmail.com> | 2021-09-30 23:26:34 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-09-30 23:26:34 +0800 |
commit | 0269abd6277bfd1e57394fdb1e34b6629a93deb8 (patch) | |
tree | 47c4f37d6ecd6b41f2ff99714ca53cdc5f150f8f /files/zh-cn/web/html | |
parent | 659553be7b16832950bad5a6fca3c0cda3ba0c39 (diff) | |
download | translated-content-0269abd6277bfd1e57394fdb1e34b6629a93deb8.tar.gz translated-content-0269abd6277bfd1e57394fdb1e34b6629a93deb8.tar.bz2 translated-content-0269abd6277bfd1e57394fdb1e34b6629a93deb8.zip |
Added Web/HTML/Element/meta/name/theme-color, zh-CN (#2605)
* 提交对于 theme-color 值的翻译
原文:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
* 更新文件内容
* 补录 theme-color.png
Diffstat (limited to 'files/zh-cn/web/html')
-rw-r--r-- | files/zh-cn/web/html/element/meta/name/theme-color/index.html | 37 | ||||
-rw-r--r-- | files/zh-cn/web/html/element/meta/name/theme-color/theme-color.png | bin | 0 -> 32088 bytes |
2 files changed, 37 insertions, 0 deletions
diff --git a/files/zh-cn/web/html/element/meta/name/theme-color/index.html b/files/zh-cn/web/html/element/meta/name/theme-color/index.html new file mode 100644 index 0000000000..39a04b3798 --- /dev/null +++ b/files/zh-cn/web/html/element/meta/name/theme-color/index.html @@ -0,0 +1,37 @@ +--- +title: theme-color +slug: Web/HTML/Element/meta/name/theme-color +tags: + - 属性 + - HTML + - HTML 文档级元数据 + - 参考 + - 元数据 +metadata browser-compat: html.elements.meta.name.theme-color +translation_of: Web/HTML/Element/meta/name/theme-color +--- +<div>{{HTMLRef}}</div> + +<p>{{htmlelement("meta")}} 中 {{htmlattrxref("name", "meta")}} 属性的值为 <strong><code>theme-color</code></strong> 时,用户的浏览器将根据所设定的建议颜色来改变用户界面。倘若设置了该值,则 {{htmlattrxref("content", "meta")}} 属性必须包含有效的 CSS {{cssxref("<color>")}} 值。</p> + +<h2 id="Example">示例</h2> + +<pre class="brush: html"><meta name="theme-color" content="#4285f4"></pre> + +<p>下图展示了上方所示的 {{htmlelement("meta")}} 元素对于 Android 端 Chrome 浏览器造成的影响。</p> + +<img alt="示 theme-color 对浏览器的影响" src="theme-color.png"> +<p><em>图片来源:<a href="https://developers.google.cn/web/fundamentals/design-and-ux/browser-customization">《图标和浏览器颜色》</a>, 由 <a href="https://developers.google.cn/readme/policies">Google</a> 创作并经<a href="https://creativecommons.org/licenses/by/4.0/deed.zh">署名 4.0 国际 (CC BY 4.0) 许可证</a>共享。</em></p> + +<p>你可以用 {{htmlattrxref("media", "meta")}} 来查询一个媒体类型,如果条件符合则使用对应颜色。比如:</p> + +<pre class="brush: html"><meta name="theme-color" media="(prefers-color-scheme: light)" content="white"> +<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black"></pre> + +<h2 id="Specifications">规范</h2> + +<p>{{Specifications}}</p> + +<h2 id="Browser_compatibility">浏览器兼容性</h2> + +<p>{{Compat}}</p> diff --git a/files/zh-cn/web/html/element/meta/name/theme-color/theme-color.png b/files/zh-cn/web/html/element/meta/name/theme-color/theme-color.png Binary files differnew file mode 100644 index 0000000000..ef9ea7378e --- /dev/null +++ b/files/zh-cn/web/html/element/meta/name/theme-color/theme-color.png |