css - 您可以在媒体查询表达式中放入什么？

Question

在以下媒体查询中，样式声明中定义的样式将在通过屏幕查看且最小宽度为 480 像素宽时应用(正确？):

@media screen and (min-width: 480px) {
    #leftsidebar {width: 200px; float: left;}
    #main {margin-left:216px;}
}

您还可以在该表达式语句中添加什么？

例如，我想以 URL 片段为条件:

@media screen and (document.location.hash=="#about") {
    #leftsidebar {width: 200px; float: left;}
    #main {margin-left:216px;}
}

@media screen and (document.location.hash=="#services") {
    #leftsidebar {width: 200px; float: left;}
    #main {margin-left:216px;}
}

@media screen and (document.location.hash=="#contact") {
    #leftsidebar {width: 200px; float: left;}
    #main {margin-left:216px;}
}

Answer 1

What can you put into a media query expression?

您只能放置一个媒体功能。规范中记录了唯一可用的媒体功能(MQ3、MQ4)。

For example, I would like to condition on the URL fragment:

不幸的是，这对于媒体查询来说是不可能的，尽管这听起来像是一个有趣的用例，而不必求助于将 URL 片段应用于 html 或 body 或某些其他任意包装元素。不过，鉴于 URL 片段不是设备媒体的一部分本身，而是 URL 的一部分，我不确定它与媒体查询的匹配度如何。此功能更适合在其自己的规则中(例如现已消失的 @document)或作为选择器的一部分。

我能想到的最接近的纯选择器替代方案(前置 :root:has(#about:target)、:root:has(#services:target) , etc to every selector) 在 Selectors 4 中，甚至不能用于 CSS，所以这真是太糟糕了。