支持悬停的设备的媒体查询

Question

我想为支持悬停的浏览器（例如桌面浏览器）和不支持悬停的浏览器（例如触摸屏设备）提供单独的行为。具体来说，我想在支持它的浏览器上声明一个悬停状态，但不是为不支持它的浏览器声明一个悬停状态，以避免让移动浏览器通过额外的点击来模拟它，因为这会破坏页面上的其他交互 - 通过不定义悬停避免这些浏览器的状态。

我已经阅读了Interaction Media Queries 功能，看起来它应该可以解决问题。我可以这样做：

@media (hover: none) {
  /* behaviour for touch browsers */
}

根据CanIUse，它适用于我需要支持的所有浏览器，除了 IE11 和 Firefox。

所以我想知道我是否可以反过来做 - 因为主要的触摸设备都支持它，然后否定它：

@media not (hover: none) {
  /* behaviour for desktop browsers */
}

但是，这似乎根本不起作用。

我正在尝试做的伪代码示例：

.myelement {
  /* some styling */
  /* note: no hover state here */
}
@media(this device supports hover) {
  .myelement:hover {
    /* more styling */
  }
}

那么，有没有办法让这项工作以预期的方式工作，还是我走错了路？

Answer 1

not 应作为媒体类型（屏幕、打印、全部等）的前缀，而不是媒体功能（悬停、点等）的前缀。

错误：

@media not (hover: none)

正确：

@media not all and (hover: none)

是的，它不直观且奇怪。 Source (see comments).

因此您不需要 javascript 来替代媒体查询的结果。

Answer 2

根据规格：

none

表示主定点系统无法悬停，或者没有定点系统。示例包括使用绘图笔的触摸屏和屏幕。
可以悬停但不方便且不属于正常使用方式的指向系统也匹配此值。

例如，长按被视为悬停的触摸屏将匹配 hover: none。

如果您的浏览器（移动/触摸）支持长按模拟悬停，hover: none 的使用将不起作用。您可以做的只是使用默认值并覆盖它（使用默认 css 优先级）：

body {
    background: red;
}

@media (hover: hover) {
  body {
    background: blue;
  }
}

桌面将具有blue 背景，移动/触控将具有red 背景

检查以下示例：
https://jsfiddle.net/mcy60pvt/1/

要检查手机的长按选项，您可以使用以下示例：
https://jsfiddle.net/mcy60pvt/3/

在上面的示例中，绿色块的桌面和移动设备都有:hover 定义，但是对于桌面设备，背景将更改为yellow，对于移动设备（长按），它将更改为white。

这是最后一个示例的 css：

body {
    background: red;
}
div.do-hover {
  border: 1px solid black;
  width: 250px;
  height: 250px;
  background: green;
}
div.do-hover:hover {
  background: white;
}

@media (hover: hover) {
  body {
    background: blue;
  }
  div.do-hover:hover {
    background: yellow;
  }
}

在此示例中 - 不支持 :hover 的浏览器将查看具有绿色背景的 hover me 框，而在“悬停”（触摸/长按）时 - 背景将发生变化变白。

更新

至于添加的伪代码：

.myelement {
    /* some styling #1 */
    /* note: no hover state here */
}
@media(hover: hover) {
    .myelement {
        /* some styling that override #1 styling in case this browser suppot the hover*/
    }
    .myelement:hover {
        /* what to do when hover */
    }
}

Answer 3

感谢 Dekel 的 cmets，我通过在 JS 中运行逻辑并改为应用类解决了这个问题：

例如

const canHover = !(matchMedia('(hover: none)').matches);
if(canHover) {
  document.body.classList.add('can-hover');
}

然后在样式表中：

.myElement {
  background: blue;
}
.can-hover .myElement:hover {
  background: red;
}

我已经在桌面版 Chrome、Safari 和 Firefox 以及 iOS Safari 上进行了测试，它可以正常工作。

Answer 4

你可以使用这个 Sass mixin 来设置悬停的样式，它将使用推荐的替代品:active 用于触摸设备。适用于所有现代浏览器和 IE11。

/**
 Hover styling for all devices and browsers
 */
@mixin hover() {
    @media (hover: none) {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        &:active {
            @content;
        }
    }

    @media (hover: hover), all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        &:hover {
            @content;
        }
    }
}

.element {
    @include hover {
         background: red;
    }
}

Answer 5

根据Artin´s answer，我们只能使用@media not all and (hover: none) 解决支持纯 CSS 悬停的设备。它看起来很奇怪，但它确实有效。

为了方便使用，我制作了一个 Sass mixin：

@mixin hover-supported {
    @media not all and (hover: none) {
        &:hover {
            @content;
        }
    }
}

对于支持悬停的设备，以下将在悬停时将 .container 的背景颜色从红色更改为蓝色，对于触摸设备没有更改：

.container {
    background-color: red;

    @include hover-supported() {
        background-color: blue;
    }
}

Answer 6

要支持 Firefox（请参阅 https://bugzilla.mozilla.org/show_bug.cgi?id=1035774 ），您可能需要编写一些规则两次。请注意，虽然问题中没有具体说明，但我添加了pointer: coarse，假设这些规则的目的是针对移动屏幕：

/* BEGIN devices that DON'T pinch/zoom */
/* If https://bugzilla.mozilla.org/show_bug.cgi?id=1035774 
is fixed then we can wrap this section in a ...
@media not all and (pointer: coarse) and (hover: none) {
.. and do away with the 'NEGATE' items below */

.myelement {
  /* some styling that you want to be desktop only (style as an anchor on desktop) */
  font-size: 14px;
  text-decoration: underline;
  border: none;
}
/* END devices that DON'T pinch/zoom */

/* BEGIN devices that DO pinch/zoom */   
@media (pointer: coarse) and (hover: none) {
  .myelement {
    /* style as a large button on mobile */
    font-size: inherit;  /* maintain e.g. larger mobile font size */
    text-decoration: none;  /* NEGATE */
    border: 1px solid grey;
  }

  .myelement:hover {
    /* hover-only styling */
  }
}
/* END devices that DO pinch/zoom */

(pointer: coarse) and (hover: none) 的组合对于定位移动设备应该会变得更有用，因为移动屏幕变得越来越大，并且我们失去了像素尺寸与移动设备与台式机之间的相关性（当您希望区分平板电脑和台式机时已经存在这种情况）