css在兼容模式下无法引用

by Frank Lämmer

由FrankLämmer

如何在CSS中使用深色模式 (How to get dark mode working with CSS)

I have been playing around with MacOS Mojave’s dark mode lately. It’s not 100% pleasing to my eyes, yet. But it’s especially useful when nerding out at night time with little ambient light.

最近，我一直在玩MacOS Mojave的黑暗模式。 但是，这还不是100％令我满意的。 但是，当夜间在几乎没有环境光的情况下呆着时，它特别有用。

Dark mode is a design trend. Many reading applications (Medium App, Twitter …) have it already. It’s not only about just inverting all colors, but it’s also about art direction.

暗模式是一种设计趋势。 许多阅读应用程序(Medium App，Twitter…)已经拥有它。 这不仅涉及到反转所有颜色，还涉及艺术指导。

并非所有事物都是黑暗的(还) (Not everything is dark (yet))

One thing that can be a bit shocking when working in dark mode is the flash of light when opening a document with a big white background. This post explores how to deal with dark mode on the web and styling dark mode with CSS.

在黑暗模式下工作时，可能会有些震惊的一件事是打开带有大白背景的文档时的闪光灯。 这篇文章探讨了如何处理Web上的暗模式以及如何使用CSS设置暗模式。

处理暗模式用户设置 (Dealing with dark mode user settings)

So wouldn’t it be nice if documents and websites would respect the current surrounding theme?

那么，如果文档和网站尊重当前的周围主题，那不是很好吗？

自动颜色转换？ (Automatic color conversion?)

At least Safari and Firefox already have a “Reader mode” with support for light text on a dark background. Here, the <article> context gets rendered using custom styles for best readability and removing clutter, and there is a setting for inverting colors. Extending on that, browsers might invert websites automatically with smart styles. Sounds scary! But at least Apple Mail is doing so already. It even inverts colors for some HTML mail.

至少Safari和Firefox已经具有“阅读器模式”，并支持深色背景上的浅色文本。 在这里，<article>上下文使用自定义样式进行呈现，以实现最佳的可读性并消除混乱，并且存在用于反转颜色的设置。 除此之外，浏览器可能会自动以智能样式反转网站。 听起来吓人！ 但是至少Apple Mail已经这样做了。 它甚至可以反转某些HTML邮件的颜色。

Smart-inverting colors might or might not be a solution. What else?

智能反转颜色可能是解决方案，也可能不是解决方案。 还有什么？

媒体查询抢救！ (Media query to the rescue!)

I am not alone. Dark mode for CSS is currently (August 2018) being discussed in “CSS Working Group Editor Drafts”. The idea is to make that available as a media query. Something has already landed in Safari (private), see also here.

我并不孤单。 CSS的深色模式目前(2018年8月) 正在 “ CSS Working Group Editor Drafts”中讨论 。 这个想法是使它作为媒体查询可用。 某些东西已经登陆Safari( 私有 )，请参见此处 。

So in theory you can do this:

因此，理论上您可以执行以下操作：

@media (prefers-color-scheme: dark) {   color: white;   background: black}

Let’s wait until all browsers are ready. I think there is some way to go for standardization. The OS makers might need to agree on something as well.

让我们等到所有浏览器准备就绪。 我认为有一些方法可以标准化。 操作系统制造商可能还需要就某些事情达成共识。

倒不暗模式 (Inverted is not dark mode)

Did you know: There already is a media feature for “inverted-colors” in Media Queries Level 4. That’s not the same as dark mode. A kind of “dark mode” has been around for a while. Windows has also High Contrast mode. There are many different takes on that.

您知道吗：Media Queries Level 4中已经具有“反色”的媒体功能。这与暗模式不同。 一种“黑暗模式”已经存在了一段时间。 Windows还具有“ 高对比度”模式。 有很多不同的看法。

Nevertheless, it would be really cool if website authors could decide if and how to deal with it when a user with enabled “dark mode” visited their site. So you, as the designer, have full control over how your website will look in “lights off mode”. Much more work for you? No, it’s easy. Read on.

但是，如果启用了“暗模式”的用户访问他们的网站时，网站作者可以决定是否以及如何处理它，那真的很酷。 因此，作为设计师，您可以完全控制您的网站在“熄灯模式”下的外观。 还有更多工作要做吗？ 不，很简单。 继续阅读。

隐身模式不是黑暗模式 (Incognito is not dark mode)

When opening an incognito window for private browsing, many browsers will present a dark browser chrome to highlight the difference. That’s also not dark mode, but it’s dark.

当打开隐身窗口进行私密浏览时，许多浏览器会显示深色的浏览器镶边，以突出显示差异。 那也不是暗模式，但它是暗的。

使用CSS var主题化黑暗模式 (Using CSS vars for theming dark mode)

Thanks to “CSS custom properties” (also known as “CSS Vars”), we can now more easily than ever create themes with very little CSS. The most simple invert theme:

多亏了“ CSS自定义属性”(也称为“ CSS Vars”)，我们现在可以比以往更轻松地用很少CSS创建主题。 最简单的反转主题：

root: {  --text-color: DarkBlue;  --back-color: Azure;}

body { color: var(--text-color); background: var(--back-color)}

@media (prefers-dark-interface) {  root: {   --text-color: Azure;   --back-color: DarkBlue;  } }

Shameless plug: My (great new) CSS framework Teutonic CSS already makes use of such simple inverting:

无耻的插件：我的(全新)CSS框架Teutonic CSS已经利用了这种简单的反转：

网站更改浏览器镶边 (Websites changing browser chrome)

This article is about how a user setting can change the appearance of a website. It also works the other way around: a website can change the way the browser looks. There are some proprietary meta tags available, so far only for mobile browsers:

本文是关于用户设置如何更改网站外观的文章。 它也以另一种方式起作用：网站可以更改浏览器的外观。 有一些专有的元标记可用，到目前为止仅适用于移动浏览器：

<meta name="theme-color" content="black"><meta name="msapplication-navbutton-color" content="black"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black">

ARGH!

啊！

进一步阅读 (Further readings)

The article “OS: High Contrast versus Inverted Colors” by Adrian Roselli discusses the differences between “inverted” and “high contrast” in Windows and macOS.

Adrian Roselli的文章“ OS：高对比度与反转色 ”讨论了Windows和macOS中“反转”和“高对比度”之间的区别。

The article “How “invert brightness” can improve accessibility and help us use our devices” by Matthew Atkinson discusses how inverting colors helps with the user experience. You can also find the concept of “smart inverting” colors there.

马修·阿特金森(Matthew Atkinson)的文章“ 如何“反转亮度”如何改善可访问性并帮助我们使用设备 ”讨论了反转颜色如何帮助用户体验。 您还可以在此处找到“智能反转”颜色的概念。

摘要 (Summary)

The nice thing about standards is that you have so many to choose from.

关于标准的好处是您有很多选择。

While “night mode” is definitely a trend, different implementations are floating around. Raise your voice to make that ONE web standard. Get your CSS forward compatible so you can support that without too much hustle.

尽管“夜间模式”无疑是一种趋势，但不同的实现方式四处飘浮。 提高您的声音以建立一个网络标准。 使您CSS向前兼容，以便您无需太多麻烦就可以支持它。

翻译自: https://www.freecodecamp.org/news/how-to-get-dark-mode-working-with-css-740ad31e22e/

css在兼容模式下无法引用