
浏览器中的操作系统暗模式检测
近年来,随着用户对夜间浏览体验的偏好不断提高,操作系统已开始引入暗模式功能。作为一名 web 开发人员,您可能想知道如何检测浏览器中操作系统的暗模式状态,以相应地调整您网站的设计。
新 media queries 水平
w3c 的 media queries level 5 引入了新的查询类型,可让您检测用户的暗模式首选项:prefers-color-scheme。
规则语法:
@media (prefers-color-scheme: light) { /* 浅色模式 */ }
@media (prefers-color-scheme: dark) { /* 深色模式 */ }
@media (prefers-color-scheme: no-preference) { /* 没有偏好 */ }
safari technology preview 支持
目前,此功能仅在 safari technology preview release 68 中可用。如果您安装了它,可以使用一个切换开关来激活对暗模式 css 支持。
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
其他浏览器支持
其他浏览器正在逐步支持 prefers-color-scheme 查询。要查看当前支持状况,请参阅 caniuse.com。
兼容性注意事项:
对于不支持 prefers-color-scheme 查询的浏览器,您可以使用以下回退方法:
@media (prefers-color-scheme: light) {}
@media not (prefers-color-scheme: light) {}
流行度统计
根据 caniuse.com,目前世界范围内约 90% 的用户可以使用 prefers-color-scheme css。这意味着实施暗模式功能对于为您的用户提供最佳浏览体验至关重要。
通过使用 prefers-color-scheme 查询,您可以轻松地检测用户的暗模式首选项并相应地调整您网站的样式。这将为您的用户提供更舒适和身临其境的用户体验。










