Die Chancen sind: Hover war der allererste Pseudo-Klassenselektor, den Sie je gelernt haben. Heck, es könnte der einzige sein, den du je gelernt hast. Wir alle lieben dieses hübsche kleine Feature und nutzen es ständig, um bereichernde Benutzererlebnisse zu schaffen.
Meine heutige Frage könnte die Art und Weise, wie Sie über Hover denken, für immer ändern:? Macht die Allgegenwart von Touchscreens Hover-Ereignisse überflüssig? Anders ausgedrückt, hat das iPhone getötet: Schweben? Lesen Sie weiter, um zu erfahren, wie iOS mit einem CSS-Hover-Ereignis umgeht, was das für Sie als Entwickler bedeutet und wie Sie Hover-Ereignisse in Ihren Designs verwenden sollten oder nicht.
Ode zum Schweben
Ich liebe CSS3. Es hat die reine CSS-Entwicklung so viel robuster gemacht und Spaß gemacht. Features wie Übergänge und Keyframe-Animationen führen uns zu einer faszinierenden Interaktion, die wir uns früher mit JavaScript zuwenden mussten.
Wenn Sie jedoch über reines CSS über animierte Ereignisse sprechen, sind Ihre Optionen ziemlich begrenzt. Target gibt uns die Möglichkeit, etwas zu tun, während Benutzer die Maus gedrückt halten, aber das Klicken und Halten ist im Web nicht unbedingt intuitiv. Es gibt andere Möglichkeiten, eine Klick-Interaktion zu fälschen, z. B. das Modifizieren von Optionsfeldern in eine vollwertige Diaschau, aber diese Techniken sind immer noch recht selten.
Mit Keyframes haben wir die Möglichkeit, eine Animation zu starten, sobald die Seite geladen wird, und sie sogar endlos zu schleifen. Dies ist jedoch nicht immer wünschenswert und kann bei komplexen Animationen mit einem ansehnlichen Prozessortakt einhergehen.
Dann gibt es Schwebeflug. Dies ist eine einfache, leicht zu implementierende, leicht verständliche Aktion, die Sie als Entwickler nutzen können, um die Benutzerinteraktion ein wenig zu verbessern. Mit Übergängen können Sie von einer Farbe zu einer anderen überblenden, die Größe eines Objekts schrittweise verkleinern oder vergrößern und sogar im dreidimensionalen Raum drehen, wenn Sie sich darin befinden. Mit hover haben Sie die ideale Möglichkeit, all diese Effekte abzustoßen.
Ich beschäftige mich mit Hover-Effekten und habe mehrere Artikel geschrieben, die kostenlose Beispiele meiner Lieblingstricks enthalten.
Ärger im Paradies
Es gibt ein Problem mit Hover-Ereignissen als primärem Mittel zur Interaktion, oder vielleicht sollte ich Millionen und Abermillionen von Problemen in den Händen von Menschen auf der ganzen Welt sagen: Smartphones.
Seit Jahrzehnten gibt es auf dem Bildschirm Cursor, ein seltsames, aber weithin akzeptiertes Mittel, um mit digitalen Inhalten zu interagieren. Touchscreen-Geräte, egal ob Finger oder Stift, sind schon fast so lange wie der Cursor auf dem Markt, aber das Niveau der Sättigung der Industrie war immer ziemlich niedrig. Netz überall in der Nähe gut genug, um sogar damit zu stören.
Dann kam das iPhone. Es war nicht das erste Smartphone oder das erste Touchscreen-Handy, aber es war definitiv ein Pioniergerät in der Welt eines nicht verwässerten, touchbasierten mobilen Webs. Schneller Vorlauf einige Jahre und die Welt ist voll von iOS- und Android-Geräten, die größtenteils auf das alte, unverfälschte Web zugreifen.
Die meisten von uns sind jetzt mit der berührungsgesteuerten Web-Interaktion genauso vertraut oder sogar besser vertraut wie wir mit ihren Cursor-gesteuerten Gegenstücken. Das große Problem ist natürlich, dass Telefone momentan Ihren Finger nicht schweben sehen. über einem Element. Dies bedeutet, dass die Erfahrung nicht direkt von einer Interaktionsmethode zu einer anderen übersetzt wird.
Das hört sich nach einem kleinen Problem an, aber wisch es nicht ab. Berührungsinteraktionen unterscheiden sich grundlegend von dem traditionellen Modell, und daher müssen viele unserer Lieblingstricks wie Hover-Events überdacht werden. Nicht?
Was macht iOS mit einem Hover?
Offensichtlich stellen Touchscreens ein Problem mit Hover-Ereignissen dar. Eine der Fragen, die mir sofort in den Sinn kamen, war, ob dies mein Problem als Webentwickler ist oder eine Hürde, die Gerätehersteller gezwungen waren, als sie zum ersten Mal ihre touchbasierten Browser entwickelten. Wenn der Schwebeflug ein grundlegender Weg ist, mit dem Internet zu interagieren, möglicherweise die Befugnisse, die in gewisser Weise dafür verantwortlich sind.
Um herauszufinden, was passiert, wenn Sie ein Hover-Ereignis auf einen Touchscreen werfen, sollten Sie es ausprobieren. Lassen Sie uns ein superschnelles und schmutziges Beispiel erstellen, um zu testen, was passiert. Im Grunde habe ich nur ein paar Bilder in ein div geworfen und sie so eingestellt, dass sie sich im Schwebeflug drehen. Hier ist das CSS:
Der Live-Test
Nun, da wir uns selbst zum Testen entschieden haben, schauen wir uns das auf einem Touchscreen-Gerät an. Schnappen Sie sich Ihr iPad oder iPhone und tippen Sie hier oder auf das Bild, um die Demoseite zu starten.
Natürlich wird nichts magisch passieren, wenn Sie Ihren Finger über ein Bild bewegen, aber was passiert, wenn Sie auf ein Bild tippen?
Der Hover-Effekt funktioniert eigentlich ganz gut, er wurde einfach in ein Tap-Event übersetzt. In unseren Demos wird standardmäßig keines der Bilder gedreht. Wenn Sie auf ein Bild tippen, erfolgt die animierte Drehung.
Interessante Beobachtungen
Wir haben also festgestellt, dass Hover-Ereignisse für iOS-Ereignisse in Tap-Events übersetzt werden. Soweit ich das beurteilen kann, tritt ein ähnlicher Effekt auf Android auf (möglicherweise mit gelegentlichem doppeltem Tippen). Es ist wichtig zu beachten, dass diese Ereignisse nicht nur auftreten, sondern auch Wie Sie treten auf und beeinflussen verschiedene Umstände.
Für den Anfang sollten Sie sich der Tatsache bewusst sein, dass nach dem Tippen auf ein Element die einzige Möglichkeit, dieses Hover-Ereignis zu beenden, darin besteht, auf ein anderes Element zu tippen, das ein Hover-Ereignis verursacht.In dieser Demo wird das Hover-Ereignis beispielsweise nicht durch Tippen auf den Absatz oder den Hintergrund beendet, sondern durch Tippen auf ein anderes Bild.
Die bedeutendste Offenbarung kommt, wenn wir erkennen, dass die meisten Hover-Ereignisse auf Elementen auftreten, die auch als Links zu anderen Elementen dienen. Dies bedeutet, dass wir ein Hover- und ein Click-Ereignis für dasselbe Element haben.
Wie wir wissen, verwandeln Touchscreen-Geräte auch Click-Events in Tap-Events. Was passiert also, wenn wir zwei verschiedene Desktop-Events kombinieren, die beide in dasselbe Touchscreen-Event übersetzt werden? Wie wir in dieser Demo sehen können, beginnt die Animation, wenn Sie auf das Element tippen. Das Klickereignis springt jedoch schnell ein und leitet die Seite um, selbst wenn die Animation noch nicht abgeschlossen ist.
Da Hover-Ereignisse häufig verwendet werden, um den Benutzer darüber zu informieren, dass ein Element anklickbar ist, werden sie durch diese Entdeckung in dieser Hinsicht weitgehend unbrauchbar.
Sollten Sie Hover-Events aufgeben?
Die Frage, die im Mittelpunkt dieser Diskussion steht, ist, ob der Hover-Pseudo-Selector in einer Zeit, in der so viele Leute mit Touchscreen-Geräten im Internet surfen, irgendeinen Platz in Ihrem CSS hat. Wie lautet die Antwort?
Für mich ist die Antwort ein klares Ja. obwohl das mit mehreren bestimmungen kommt. Zunächst einmal ist es interessant festzustellen, dass einige Projekte trotz ihrer Abhängigkeit von Hover-Ereignissen auf vielen Touchscreen-Geräten gut funktionieren. Ein Beispiel ist eine animierte Thumbnail-Galerie aus einem kürzlich veröffentlichten Design Shack-Artikel, die auf meinem iPad wunderbar funktioniert. Ein anderes Beispiel könnte ein Dropdown-Menü für die Navigation sein, das im Schwebeflug erscheint. Viele davon funktionieren auf Touchscreen-Geräten gut, obwohl allgemein angenommen wird, dass das Gegenteil der Fall ist.
Trotzdem empfehle ich immer noch absolut, sich nicht auf Hover-Ereignisse als wichtige Interaktionsmethode auf mobilen Geräten zu verlassen. Um dies zu tun, müssen Sie sich auf viele Kopfschmerzen der Benutzer einstellen. In Anbetracht der Palette verschiedener Touchscreen-Browser und -Geräte können Sie ohne ein lächerliches Testniveau nicht sicher sein, dass Hover-Ereignisse bei allen auf dieselbe Weise übersetzt werden.
Daher ist mein Rat, unabhängig von der Wahrheit der Aussage, immer davon auszugehen, dass das Hover-Interaktionsmodell für Smartphone- und Tablet-Benutzer nicht funktioniert. Diese Annahme hindert Sie jedoch nicht daran, den Hover-Selector in all Ihren Arbeiten zu gestalten und gelegentlich sogar einige ausgefallene Hover-Effekte zu verwenden. Denken Sie jedoch daran, dass der Erfolg des Benutzers nicht von dieser Aktion abhängen sollte. Es handelt sich vielmehr um eine fortschreitende Verbesserungssituation, in der jeder Benutzer Ihre Website auf seiner grundlegendsten Ebene nutzen kann und Desktop-Benutzer ein paar visuelle Erlebnisse genießen können, die Touchscreen-Benutzer nicht jemals nutzen können sehen.
Optimierung über Media Query
Wenn Sie die Erlebnisse Ihrer Touchscreen- und Desktop-Benutzer deutlich differenzieren möchten, können Sie ein paar einfache JavaScript-Anweisungen schreiben. Ich bin jedoch ein großer Fan von CSS, wo immer dies möglich ist, sodass mein Geist sofort auf eine medienabfragegesteuerte Lösung zielt.
Sie können Medienabfragen verwenden, um sicherzustellen, dass sowohl mobile Geräte als auch Desktopgeräte eine optimierte Benutzererfahrung bieten. Beispielsweise kann eine Liste von Links einen kleinen anklickbaren Bereich und einen schönen Hover-Effekt auf einem Desktop aufweisen, während sie einen großen anklickbaren Bereich und keinen Hover-Effekt auf einem mobilen Gerät haben.
Angenommen, wir wollten noch weiter gehen und die Großbild-Site tatsächlich vollständig von einem Hover-Ereignis abhängig machen, damit es ordnungsgemäß funktioniert. Dies ist akzeptabel, da unsere Medienabfrage sicherstellen wird, dass für mobile Geräte ein anderes Modell verwendet wird, oder? Vielleicht nicht.
Zukunftssicher
In diesem Artikel habe ich Touchscreen-Geräte ständig mit Desktop-Computern abgeglichen. Die inhärente Annahme ist hier, dass alle Touchscreen-Geräte kleine Bildschirme haben. Mir fällt auf, dass dies zwar bequem in Ordnung ist die meisten Heute ist dies eine völlig falsche Annahme, die insbesondere langfristig zum Erliegen kommt.
Ich persönlich glaube, dass die Touchscreen-Interaktion erst in den kommenden Jahren populärer wird. Ein Touchscreen-PC oder -Laptop ist jetzt eine Seltenheit, aber ich bin nicht sicher, dass dies eine sichere Annahme ist, dass dies langfristig gelten wird. Dies bedeutet, dass die Verwendung einer Medienabfrage zum Erkennen der Bildschirmgröße heutzutage als eine großartige Möglichkeit zur Unterscheidung zwischen Touchscreen- und Cursorbasierten Geräten erscheinen mag, es ist jedoch wahrscheinlich nicht die beste Vorgehensweise, um darauf einzugehen, da die 20-Zoll-Bildschirme von morgen möglicherweise die Interaktion mit Berührung verwenden so viel oder mehr als sie Cursor tun.
Verwenden Sie Hover weise
Ist der Schwebeflug ausgestorben? Nee. Wird es bald aussterben? Wahrscheinlich nicht. Wird es zunehmend gefährlich, sich auf Hover-Ereignisse als primäres Mittel zur Interaktion mit dem Benutzer zu verlassen? Absolut.
Ich werde immer noch Hover-Stile verwenden und auch weiterhin lustige Hover-Effekt-Tutorials verteilen, aber ich möchte auf jeden Fall klarstellen, dass ich glaube, dass die Tage, in denen Ihre Site sich auf Hover-Funktion verlassen kann, längst vorbei sind. Wenn das nächste iPhone nicht erkennt, dass Ihr Finger über dem Display schwebt, wird dieses Interaktionsmodell durch Touchscreens so kompliziert, dass Sie normalerweise davon ausgehen, dass es auf diesen Geräten (egal ob klein oder groß) einfach nicht funktioniert.
Was denkst du? Passen Sie auf, wie Sie Hover-Stile in CSS anwenden? Wo zeichnen Sie die Grenze für die Verwendung von Schwebeflug als Interaktionspunkt? Glauben Sie, dass Touchscreens immer mehr Ubiquität haben werden? Ich würde gerne deine Gedanken hören.