常用 CSS Media Query 记录

[toFrankie]

• @media 用于基于一个或多个媒体查询的结果来应用样式表中的一部分。
• @supports 指定依赖于浏览器中的一个或多个特定的 CSS 功能的支持声明。

深色模式

@media (prefers-color-scheme: dark) {
  /* some rules */
}

prefers-color-scheme

Safari

Safari for Mac 和 Safari for Mobile（包括 iOS 端的 Chrome 等使用 Webkit 内核的浏览器）。

@supports (-webkit-hyphens: none) {
  /* some rules */
}

-webkit-hyphens

Safari for Mobile

移动端 Safari 浏览器（包括 iOS 端的 Chrome 等使用 Webkit 内核的浏览器），但不包括 Safari for Mac。

@supports (-webkit-touch-callout: none) {
  /* some rules */
}

-webkit-touch-callout