• 17630273926

GoogleChrome现在支持暗模式首选项

作者:郑州云优化 / 2019-11-12 16:23 / 浏览次数:
GoogleChrome现在支持暗模式首选项
Google宣布支持“prefers-color-scheme”媒体查询。这意味着,如果用户指示偏好使用深色模式,则Chrome将显示具有深色模式配色方案的网页。此更改始于Chrome76。
从Chrome76开始,如果用户将其设置为默认观看偏好,则网络开发人员现在可以向Chrome访问者展示深色模式。
黑暗模式是一个机会
暗模式允许用户在暗设置下浏览您的网站。创建站点的暗模式版本可以使您以适合他们的方式向这些用户提供内容。这对发布者来说是一件好事,因为它将使该用户感到满意,并使您在网站上的访问时间更长。
某些论坛和WordPress主题模板随附深色模式替代样式表。但是您可能需要更新这些内容,以便针对可读性进行优化。
CSS-Tricks.com上有一篇文章,列出了您可能需要考虑的一些自定义项。例如,有一种方法可以使用CSS使图像变暗,从而使它们在黑暗模式下显示更好。
暗模式和辅助功能
暗模式解决了可访问性问题。某些视力障碍人士在黑暗模式下浏览网页的时间更短。其他人则使用黑暗模式,因为它可以减少眼睛疲劳。
暗模式首选项浏览器兼容性
根据Mozilla的开发人员页面上有关“preferred-color-scheme”媒体查询的浏览器兼容性的信息,许多主流浏览器现在都支持暗模式。
桌面
镀铬76
火狐67
Safari12.1。
移动
AndroidWebview76
适用于Android的Chrome76
适用于Android的Firefox67
iOS13上的Safari
MicrosoftEdge和资源管理器以及Opera目前不支持桌面暗模式。OperaforAndroid不支持Android移动设备的暗模式。
根据Google的说法:
“许多操作系统现在都支持暗模式或暗主题。
preferreds-color-scheme媒体查询使您可以调整网站的外观,以匹配用户的首选模式。
@media(prefers-color-scheme:dark){
body{
background-background:black;
白颜色;
}
}”
Google的材料设计页面
Google的“材料设计”页面讨论了暗模式设计的原理。他们在其中建议:
“材料设计深色主题由以下属性定义:
对比度:深色表面和100%白色文字的对比度至少为15.8:1
深度:在较高的高度下,组件通过显示较浅的表面颜色来表示深度
去饱和度:原色被去饱和度,因此它们在所有海拔高度上均通过至少4.5:1的WebContentAccessibilityGuidelines(WCAG)AA标准。
颜色有限:大表面使用深色表面颜色,且强调的颜色有限(浅色,不饱和色和明亮色,饱和色)”
如您所见,黑暗模式主题不仅是反转颜色,将黑色变成白色,将白色变成黑色。您可能必须选择不太鲜明的对比度才能使文本清晰易读。
您应该转到黑暗模式吗?
添加站点的暗模式版本有很多原因。允许用户以暗模式查看您的网站不仅对用户有利,而且也可能对您的网站和用户满意度指标有利。
【郑州云优化】郑州SEO、网站建设、网站设计、服务器空间租售、网站维护、网站托管、网站优化、百度推广、自媒体营销、微信公众号
如有意向---联系我们
热门栏目
热门资讯
热门标签

网站建设 网站托管 成功案例 新闻动态 关于我们 联系我们 服务器空间 加盟合作 网站优化

备案号:ICP备*********号 网站地图/sitemap 

公司地址:河南省郑州市郑州云优化 咨询QQ:1774525808 手机:17630273926 电话:17630273926