Media query für Geräte, die schweben

Ich würde gerne verschiedene Verhalten für Browser, die Unterstützung von hover (z.B. desktop-Browser), und diejenigen, die nicht (z.B. touchscreen-Geräte). Speziell möchte ich erklären, einen hover-Status auf Browsern, die es unterstützen, aber nicht für Browser, die nicht, um so zu vermeiden, dass die mobilen Browser emulieren, mit extra Wasserhähne, da diese Pausen anderen Interaktionen auf der Seite - indem Sie nicht die Definition einer hover-Zustand für diejenigen Browser, die diese vermieden wird.

Ich gelesen habe, bis auf die Interaktion Medien-Anfragen Funktion und es sieht aus wie Sie es tun sollten, die trick. Ich würde in der Lage sein, etwas zu tun:

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

Laut CanIUse es ist auf allen Browsern, die ich unterstützen muss außer IE11 und Firefox.

So, ich fragte mich, ob ich es tun konnte, die andere Weise herum - da die wichtigsten touch-Geräten, die alle unterstützen, dann negieren:

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

Jedoch, dies scheint nicht, überhaupt zu arbeiten.

Pseudocode Beispiel, was ich versuche zu tun:

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

So, gibt es eine Möglichkeit, diese Arbeit zu machen in der Art gedacht, oder bin ich auf der falschen Spur?

InformationsquelleAutor moogal | 2016-11-10

  1. 24

    not sollten Präfix Medientyp (screen, print, usw), und nicht der media-Funktion (bewegen Sie die Maus, Punkt, etc).

    Falsch:

    @media not (hover: none)

    Richtig:

    @media not all and (hover: none)

    Ja, seine unintuitive und seltsam. Quelle (siehe Kommentare).

    So dass Sie nicht brauchen javascript, um alternativen Ergebnis der media-query.

    Upvote. Anders als die oben genannten, dieses funktioniert ohne javascript. Es ist in der Tat widersinnig.
    Toller trick! Beachten Sie, dass nur IE11 erscheint, ignorieren Sie diese Regel insgesamt. Mit einem anderen IE-spezifische Hacks, es erscheint der folgende funktioniert (obwohl es das negierte version der workaround): @media not all and (hover: none), (-ms-high-contrast: none) {
    Weder @media (hover: none) noch die negation @media not all and (hover: none) nichts in Firefox. Dieser browser unterstützt keine hover - bugzilla.mozilla.org/show_bug.cgi?id=1035774, aber sollte es nicht eine Art zu schreiben die not so dass, wenn der Gegenstand der not ist nicht definiert/nicht erkannte, dann ist es zu false ausgewertet wird (und die gesamte Medien-Abfrage als true ausgewertet wird)?
    haben Sie jemals herausfinden? Ich Frage mich, die gleiche Sache.
    not (hover: none) ist nicht, oder zumindest nicht mehr falsch. Es ist korrekt, laut Media-Querys 4. Es ist einfach nicht unterstützt von jeder browser noch, frustrierend. Siehe stackoverflow.com/questions/24455958/...

    InformationsquelleAutor artin

  2. 10

    Aus den specs:

    none

    Zeigt an, dass die primäre pointing system kann nicht schweben, oder es ist kein pointing-system. Beispiele sind touchscreens und Bildschirme mit einer Zeichnung Stift.

    Zeigen Systeme, die schweben, für die aber dies ist umständlich und nicht Teil der normalen Art, wie Sie verwendet werden, auch mit diesem Wert übereinstimmen.

    Zum Beispiel ein touchscreen, wo ein langes drücken wird behandelt, als schweben würde mit hover: keine.

    Wenn Ihr browser (mobile/touch) unterstützt lange drücken, um zu simulieren, hover, die Verwendung von hover: none wird nicht funktionieren. Was Sie tun können ist, verwenden Sie einfach ein Standard-Wert und überschreiben Sie es (mit Standard-css-Rangfolge):

    body {
    background: red;
}

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

    Desktop haben blue hintergrund und mobile/touch haben red hintergrund

    Überprüfen Sie das folgende Beispiel:

    https://jsfiddle.net/mcy60pvt/1/

    Überprüfen, die durch langes drücken auf die option mobile können Sie in diesem Beispiel:

    https://jsfiddle.net/mcy60pvt/3/

    Im obigen Beispiel der grüne block hat :hover definition für beides, desktop und mobile, allerdings für desktop-hintergrund wird sich ändern, um yellow und für mobile (mit lang drücken) Wechsel white.

    Hier ist der css-Code für das Letzte Beispiel:

    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;
  }
}

    In diesem Beispiel - Browser, die nicht unterstützen :hover wird um die schweben mir box mit grünem hintergrund, und zwar "schweben" (touch - /long-press) - der hintergrund wechselt zu weiß.

    update

    Als für die zusätzlichen pseudo-code:

    .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 */
    }
}
    Danke, aber das lässt mich in der gleichen situation, wo Browser unterstützt keine hover-media-query nicht korrekt Verhalten.
    warum nicht? Wenn Sie nicht unterstützen, hove, die Medien, die Sie erhalten hintergrund green (es sei denn, Sie fügen Sie eine neue Hintergrundfarbe innerhalb der hover: hover Teil).
    Ich ' ll fügen Sie es zu der Antwort, 1 minute
    Ich habe ein Beispiel auf die Frage versuchen zu klären. Die Idee wäre, dass ein hover-Zustand ist nur erklärt für die Browser, die Unterstützung schweben, so dass die mobilen Browser nicht versuchen, zu emulieren.
    Ok, das ist also ein bisschen eine andere Frage. Es ist wie zu Fragen "wie kann ich mit css4 tricks mit Browsern, die nur Unterstützung für css3?" 🙂 gut, meist können Sie nicht. Wenn Firefox ignoriert die hover:hover definition - Sie haben nicht wirklich etwas, das man machen kann (rein css). Sie können javascript verwenden, um Sie auf Klasse hinzufügen, um die body - element und css basierend auf dieser Klasse (ist-firefox,-Unterstützung,-schweben,-mobile, etc...)

    InformationsquelleAutor Dekel

  3. 6

    Dank Dekel der Kommentare, die ich lösen dies, indem Sie die Logik in JS und die Anwendung einer Klasse statt:

    z.B.

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

    Dann im stylesheet:

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

    Ich habe getestet dieses auf dem desktop Chrome, Safari und Firefox und iOS-Safari und es funktioniert wie erwartet.

    wie gesagt, js lässt sich (fast) immer helfen Euch da 🙂 +1 von mir auf die Lösung
    Sehr kluge Antwort. Gute Sachen

    InformationsquelleAutor moogal

  4. 0

    Laut Artins Antwort wir können die Adresse nur mit Geräten, die schweben mit reinem css, mit @media not all and (hover: none). Es sieht komisch aber es funktioniert.

    Machte ich ein Sass mixin hat sich für eine einfachere Nutzung:

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

    Folgende würde sich ändern, Hintergrundfarbe (background-color .container von rot auf blau auf hover für Geräte mit Unterstützung der hover-keine änderung bei Geräten mit Touchscreen:

    .container {
    background-color: red;

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

    InformationsquelleAutor Calsal

Schreibe einen Kommentar