热门标签 | 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浏览器极速模式自动



推荐阅读
  • 基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • HDU 2372 El Dorado(DP)的最长上升子序列长度求解方法
    本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法,通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]
  • 本文讨论了Alink回归预测的不完善问题,指出目前主要针对Python做案例,对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法,以及Maven的相关知识。最后,对Alink回归预测的未来发展提出了期待。 ... [详细]
  • 本文讨论了如何优化解决hdu 1003 java题目的动态规划方法,通过分析加法规则和最大和的性质,提出了一种优化的思路。具体方法是,当从1加到n为负时,即sum(1,n)sum(n,s),可以继续加法计算。同时,还考虑了两种特殊情况:都是负数的情况和有0的情况。最后,通过使用Scanner类来获取输入数据。 ... [详细]
  • 本文介绍了OC学习笔记中的@property和@synthesize,包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • 本文讲述了作者通过点火测试男友的性格和承受能力,以考验婚姻问题。作者故意不安慰男友并再次点火,观察他的反应。这个行为是善意的玩人,旨在了解男友的性格和避免婚姻问题。 ... [详细]
  • 1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ... [详细]
  • 《数据结构》学习笔记3——串匹配算法性能评估
    本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
  • 本文介绍了通过ABAP开发往外网发邮件的需求,并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定,可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度:184字。 ... [详细]
  • 动态规划算法的基本步骤及最长递增子序列问题详解
    本文详细介绍了动态规划算法的基本步骤,包括划分阶段、选择状态、决策和状态转移方程,并以最长递增子序列问题为例进行了详细解析。动态规划算法的有效性依赖于问题本身所具有的最优子结构性质和子问题重叠性质。通过将子问题的解保存在一个表中,在以后尽可能多地利用这些子问题的解,从而提高算法的效率。 ... [详细]
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • 高质量SQL书写的30条建议
    本文提供了30条关于优化SQL的建议,包括避免使用select *,使用具体字段,以及使用limit 1等。这些建议是基于实际开发经验总结出来的,旨在帮助读者优化SQL查询。 ... [详细]
  • 在project.properties添加#Projecttarget.targetandroid-19android.library.reference.1..Sliding ... [详细]
  • macOS Big Sur全新设计大版本更新,10+个值得关注的新功能
    本文介绍了Apple发布的新一代操作系统macOS Big Sur,该系统采用全新的界面设计,包括图标、应用界面、程序坞和菜单栏等方面的变化。新系统还增加了通知中心、桌面小组件、强化的Safari浏览器以及隐私保护等多项功能。文章指出,macOS Big Sur的设计与iPadOS越来越接近,结合了去年iPadOS对鼠标的完善等功能。 ... [详细]
  • ECMA262规定typeof操作符的返回值和instanceof的使用方法
    本文介绍了ECMA262规定的typeof操作符对不同类型的变量的返回值,以及instanceof操作符的使用方法。同时还提到了在不同浏览器中对正则表达式应用typeof操作符的返回值的差异。 ... [详细]
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社区 版权所有