热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

360浏览器极速模式自动_浏览器正在为网站带来自动暗模式

360浏览器极速模式自动nalyvmeShutterstock.comnalyvmeShutterstock.comDarkmodeisnoweverywhere,includin
360浏览器极速模式自动

360浏览器极速模式自动

Chrome logo over a dark background with dry ice smoke clouds.
nalyvme/Shutterstock.comnalyvme / Shutterstock.com

Dark mode is now everywhere, including in iOS 13 and Android 10. Web browsers like Chrome, Firefox, Safari, and Edge have embraced dark mode, too. Now, browsers are bringing automatic dark mode to websites thanks to a feature called prefers-color-scheme.

深色模式现在无处不在,包括iOS 13和Android10。Chrome,Firefox,Safari和Edge等Web浏览器也采用了深色模式。 现在,由于称为“ prefers-color-scheme”的功能,浏览器为网站带来了自动暗模式。

网站现在可以像应用程序一样检测暗模式 (Websites Can Now Detect Dark Mode Like Apps Can)

YouTube's webside with the dark theme enabled

Some sites offer dark modes today. For example, you can enable dark mode on YouTube, Twitter, or Slack in a few clicks. That’s pretty cool, but who wants to enable this option separately each time they visit a new website?

今天,有些站点提供黑暗模式。 例如,您可以单击几下即可在YouTube , Twitter或Slack上启用暗模式。 这很酷,但是谁愿意在每次访问新网站时分别启用此选项?

When you enable dark mode on Windows 10, macOS, iOS, or Android, the applications you use all know you’ve enabled dark mode and can automatically enable it. Google Chrome doesn’t even have an easy-to-access dark mode option. Chrome just automatically adjusts itself based on your overall operating system choice.

在Windows 10,macOS,iOS或Android上启用暗模式时,所有使用的应用程序都知道您已启用暗模式,并且可以自动启用它。 Google Chrome甚至没有易于访问的深色模式选项 。 Chrome会根据您选择的整体操作系统自动进行自我调整。

In the past, there wasn’t a way for websites to automatically implement dark mode. Even if your browser’s interface goes dark, websites will continue using their bright backgrounds. You have to manually enable dark mode or use a browser extension that forces dark mode.

过去,网站无法自动实施暗模式。 即使您的浏览器界面变暗,网站仍会继续使用其明亮的背景。 您必须手动启用暗模式或使用强制暗模式的浏览器扩展。

It wasn’t web developers’ faults—they had no way of detecting whether dark mode was enabled on your device. That’s changed with a new cascading style sheets (CSS) feature websites can take advantage of.

这不是Web开发人员的错-他们无法检测设备上是否启用了暗模式。 网站可以利用新的级联样式表(CSS)功能对此进行了更改。

它已经在您附近的浏览器中 (It’s Already In a Browser Near You)

Enabling dark mode in Windows 10's Settings app

The answer to this problem is prefers-color-scheme, a CSS feature that websites can use to ask your web browser whether you have dark mode enabled. A web page can use a different theme depending on whether you have dark mode enabled or disabled.

这个问题的答案是preferred-color-scheme ,这是一种CSS功能,网站可以使用它来询问您的Web浏览器是否启用了暗模式。 网页可以使用不同的主题,具体取决于您是启用还是禁用了暗模式。

This feature was only recently added to modern web browsers in 2019.

此功能仅在2019年才添加到现代Web浏览器中。

  • Google Chrome for all platforms (including Android) has supported it since Chrome 76, released on July 30.

    自7月30日发布Chrome 76以来,所有平台(包括Android)的Google Chrome都支持它。

  • Safari for iPhone and iPad gets it with Safari 13 as part of iOS 13 on September 19.

    适用于iPhone和iPad的Safari将于9月19日与Safari 13一起作为iOS 13的一部分提供。
  • Mozilla Firefox has supported it since Firefox 67, released on May 21.

    自5月21日发布Firefox 67以来,Mozilla Firefox就一直支持它。
  • Safari for Mac has supported it since Safari 12.1, released on April 5.

    自4月5日发布Safari 12.1以来,Mac版Safari就支持它。
  • Microsoft Edge doesn’t support it, but the new Chromium-based Edge browser will.

    Microsoft Edge不支持它,但是新的基于Chromium的Edge浏览器将支持。

This isn’t an option you select in your browser itself. Just choose between light and dark modes in your operating system, your browser will obey the change, and websites can follow along and automatically enable dark mode if they like.

您不能在浏览器中选择此选项。 只需在操作系统的亮和暗模式之间进行选择,您的浏览器便会接受更改,网站可以跟进并根据需要自动启用暗模式。

那么暗模式网站在哪里? (So Where Are the Dark Mode Websites?)

While this feature is live today and working in all the popular browsers, it’s very new. Dark mode comes to iPhone and iPad with the new iOS 13. On the Android side, only Android phones with the new Android 10 have dark mode support. Even Google Chrome on desktop has only supported prefers-color-scheme for a few weeks.

虽然此功能现已启用,并且可以在所有流行的浏览器中使用,但它是非常新的。 新的iOS 13在iPhone和iPad上采用了暗模式。 在Android方面,只有搭载新Android 10的 Android手机才支持暗模式。 甚至连台式机上的Google Chrome浏览器也仅支持偏好的颜色方案几周了。

It’s just so new. You likely won’t encounter many websites that use prefers-color-scheme to automatically enable dark mode yet.

太新了。 您可能不会遇到许多使用Preferred-Color-Scheme自动启用暗模式的网站。

That will hopefully change in the future. Websites can now respect your dark mode preference and automatically follow it. Web developers have a new option they can take advantage of.

希望将来会有所改变。 网站现在可以尊重您的黑暗模式首选项并自动遵循它。 Web开发人员有一个可以利用的新选择。

We love dark mode. Now that it’s an option on all the latest operating systems, we’ll be excited to see it spread across the web.

我们喜欢黑暗模式 。 现在,它是所有最新操作系统上的一个选项,我们很高兴看到它在网络上传播。

翻译自: https://www.howtogeek.com/440920/browsers-are-bringing-automatic-dark-mode-to-websites/

360浏览器极速模式自动



推荐阅读
  • V8不仅是一款著名的八缸发动机,广泛应用于道奇Charger、宾利Continental GT和BossHoss摩托车中。自2008年以来,作为Chromium项目的一部分,V8 JavaScript引擎在性能优化和技术创新方面取得了显著进展。该引擎通过先进的编译技术和高效的垃圾回收机制,显著提升了JavaScript的执行效率,为现代Web应用提供了强大的支持。持续的优化和创新使得V8在处理复杂计算和大规模数据时表现更加出色,成为众多开发者和企业的首选。 ... [详细]
  • Java环境中Selenium Chrome驱动在大规模Web应用扩展时的性能限制分析 ... [详细]
  • 七款高效编辑器与笔记工具推荐:KindEditor自动换行功能解析
    本文推荐了七款高效的编辑器与笔记工具,并详细解析了KindEditor的自动换行功能。其中,轻笔记QingBiJi是一款完全免费的记事本软件,用户可以通过其简洁的界面和强大的功能轻松记录和管理日常事务。此外,该软件还支持多平台同步,确保用户在不同设备间无缝切换。 ... [详细]
  • TypeScript 实战分享:Google 工程师深度解析 TypeScript 开发经验与心得
    TypeScript 实战分享:Google 工程师深度解析 TypeScript 开发经验与心得 ... [详细]
  • Win10 S系统与Chrome浏览器兼容性问题分析
    2017年5月2日,微软在美国推出了最新的Windows 10 S操作系统,专为教育领域设计,旨在为教师和学生提供一系列高效的产品和服务。该系统的最大特点是其简洁的设计和快速的响应速度,然而在与某些应用的兼容性方面,特别是Chrome浏览器,仍存在一些问题。本文将深入分析这些兼容性问题,并探讨可能的解决方案。 ... [详细]
  • 使用 Firefox Developer Edition 70.0 数日后,体验令人满意 ... [详细]
  • 利用爬虫技术抓取数据,结合Fiddler与Postman在Chrome中的应用优化提交流程
    本文探讨了如何利用爬虫技术抓取目标网站的数据,并结合Fiddler和Postman工具在Chrome浏览器中的应用,优化数据提交流程。通过详细的抓包分析和模拟提交,有效提升了数据抓取的效率和准确性。此外,文章还介绍了如何使用这些工具进行调试和优化,为开发者提供了实用的操作指南。 ... [详细]
  • C++ 开发实战:实用技巧与经验分享
    C++ 开发实战:实用技巧与经验分享 ... [详细]
  • 本文深入探讨了Ajax的工作机制及其在现代Web开发中的应用。Ajax作为一种异步通信技术,改变了传统的客户端与服务器直接交互的模式。通过引入Ajax,客户端与服务器之间的通信变得更加高效和灵活。文章详细分析了Ajax的核心原理,包括XMLHttpRequest对象的使用、数据传输格式(如JSON和XML)以及事件处理机制。此外,还介绍了Ajax在提升用户体验、实现动态页面更新等方面的具体应用,并讨论了其在当前Web开发中的重要性和未来发展趋势。 ... [详细]
  • 如何高效利用Hackbar插件提升网页调试效率
    通过合理利用Hackbar插件,可以显著提升网页调试的效率。本文介绍了如何获取并使用未包含收费功能的2.1.3版本,以确保在不升级到最新2.2.2版本的情况下,依然能够高效进行网页调试。此外,文章还提供了详细的使用技巧和常见问题解决方案,帮助开发者更好地掌握这一工具。 ... [详细]
  • 本文探讨了如何通过检测浏览器类型来动态加载特定的npm包,从而优化前端性能。具体而言,仅在用户使用Edge浏览器时加载相关包,以提升页面加载速度和整体用户体验。此外,文章还介绍了实现这一目标的技术细节和最佳实践,包括使用User-Agent字符串进行浏览器识别、条件加载策略以及性能监控方法。 ... [详细]
  • CSS中的pointer-events属性详解与应用
    在CSS中,`pointer-events`属性是一个非常实用但常被忽视的功能。它主要用于控制元素是否响应鼠标事件。当一个元素覆盖在其他元素之上时,通过设置`pointer-events`属性,可以决定该元素是否能够接收鼠标点击、悬停等交互操作,从而实现更灵活的用户界面设计。例如,将`pointer-events`设置为`none`可以使元素透明地传递鼠标事件,方便实现复杂的叠加效果和交互逻辑。 ... [详细]
  • 如何在Ubuntu系统中直接使用Snap安装软件
    Canonical与Opera Software近日宣布,基于Chromium的Opera浏览器现已作为Snap包提供给Ubuntu用户,显著提升了在Linux操作系统上的安装便捷性和兼容性。通过Snap,用户可以在Ubuntu系统中轻松安装和更新Opera浏览器,享受更流畅的浏览体验。此外,Snap的容器化特性还确保了应用的安全性和稳定性,为用户提供更加可靠的软件环境。 ... [详细]
  • 软件测试工程师必备:全面解析Web应用的浏览器兼容性测试方法与工具
    随着市场上浏览器种类的不断增多,特别是在平板和移动设备上的普及,确保网站在各种浏览器中都能正常运行变得尤为重要。本文将深入探讨Web应用的浏览器兼容性测试方法与工具,帮助软件测试工程师全面掌握这一关键技能,以提高应用的用户体验和可靠性。 ... [详细]
  • 在 Go 开发环境中,通过使用 iTerm 和 Oh My Zsh,可以显著提升终端操作的效率和体验。Oh My Zsh 是一个强大的 Zsh 配置管理框架,提供了丰富的插件支持,如代码高亮、自动补全和多种编程语言支持,同时还拥有众多美观的主题,使终端界面更加个性化和高效。Zsh 作为一种高度可定制的 shell,不仅适用于交互式应用,还可用作脚本解释器,集成了 bash、ksh 和 tcsh 等其他 shell 的诸多优点,并具备独特的功能特性。 ... [详细]
author-avatar
白羊浅蓝色
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有