[JoergB]

Guten Morgen liebe CSS Profis,

ich suche nach einer Möglichkeit, für touchfähige Endgeräte andere CSS Anweisungen bereit zu halten als für nicht-touchfähige.

Ich habe das gefunden:
https://blog.kulturbanause.de/2017/0...zept-abfragen/

Hier scheint es an der mangelnden Browserunterstützung zu scheitern.

Gibt es eine stabile Möglichkeit zur Feature Detection von touchfähigen Endgeräten?

Über euren Rat würde ich mich sehr freuen!
Viele Grüße von Jörg

[JoergB]

Beim Durchforsten der Möglichkeiten über Modernizrr bin ich auf diesen Artikel gestossen:

"You Can't Detect A Touchscreen"
You Can't Detect A Touchscreen | Blog | Stu Cox

Aber: Dieser Artikel ist von 2013 - Ist das wirklich der letzte Stand zu diesem Thema?

[cloned]

Was ist, wenn jemand ein touch fähiges Eingabegerät in Kombination mit Maus + Tastatur verwendet, wie soll das bei deiner Umsetzung berücksichtig werden? Also zB ein ipad/surface book?
Was ist, wenn man eine Blutooth Tastatur / Maus mit seinem Tablet/Smartphone verwendet, erkennt der Browser dies?

Anders gefragt: Was willst du denn genau mit deiner Anforderung erreichen, dass du das so spezifisch unterscheiden willst/musst?

[JoergB]

Hallo cloned, vielen Dank für deine Reaktion.

Es wird unbedingt eine mehrstufige "Hover" Navigation gewünscht. Diese ist auf touch Geräten eine echte Plage.

Ich hatte mir das so gedacht, dass mir Modernizrr die Klasse "touch" bzw. "no-touch" ausgibt und ich das CSS für die Aufklappnavi mit der Klasse .no-touch schreibe und den Rest eben als Navigation für mobile Endgeräte.

Wenn ein Touch Geräte auch Maus kann, ist das egal. Eine Touch Navi mit der Maus zu bedienen ist immer kein Problem. Nur umgekehrt..

Viele Grüße!

[cloned]

Wieso wird das nicht so gelöst, dass es einen pfeil (oder ähnliches) zum anklicken gibt, womit die Navigation eingeblendet werden kann? Zusätzlich zum "hovern"? Dann kann auch mit der maus geklickt werden, falls das jemand wünscht.

Sehe da jetzt nicht so das Problem, dass man hier speziell touch Geräte ansprechen muss.

[JoergB]

Weil das auf touch Geräten nicht so richtig viel Spaß macht, so eine Navigation zu bedienen.

Beispiel: Der Hauptnavigationspunkt ist nicht nur eine "Überschrift", sondern auch gleichzeitig eine Verlinkung auf eine Inhaltsseite.

Beim Desktop: Hovern = Ausklappen des Untermenüs, Klicken = Seite wird geladen

Nun beim Touchen: Man toucht auf den Hauptnavigationspunkt und es wird gleich die Seite geladen. Gleichzeitig wird das Untermenü aufgeklappt und überlagert den Content der neu geladenen Seite. Erst die Auswahl einer Unterseite bringt das Menü dazu, wieder einzuklappen.

Geht zwar, aber so richtig super ist das nicht.

Außerdem kann man für die Mausbedienung anders gestalten und zierliche, moderne Navigationselemente mit Hoveranimationen versehen.

Auf Touchgeräten müssen die Links ordentlich groß sein und Abstand haben. Niemand möchte mit seinen Wurstgeräten irgendwelche winzigen Toggles treffen müssen

[cloned]

Du sprichst lauter wichtige Punkte an: Das ganze muss natürlich durchdacht und bedienbar sein.

Gibt auch verschiedene Herangehensweisen dafür: Sieh zB bootstrap-Navigation an, dort wird das so gelöst, dass es kein :hover Zustand gibt. Das ist accessible, aber wird auch nicht immer gewünscht. Dort wird, soweit ich das sehe, davon ausgegangen, dass der Punkt, der etwas aufklappt, kein Link ist (auch wenn es in der Doku noch ein Link ist)

https://getbootstrap.com/docs/4.0/co...ts/navbar/#nav <- weiter nach unten scrollen, der Punkt vor "Forms"

Was ich sagen will: Eine Lösung, touch geräte gezielt anzusprechen wie du es willst, gibt es, soweit ich weiß, nicht. Man muss sich eine Struktur überlegen, wie man beides unter einen Hut bekommt.
Am einfachsten zu implementieren ist nun mal das zusätzliche Toggle-Icon (groß genug, dass es mit Wurstfingern zu treffen ist)

[JoergB]

Ja, du hast Recht, das muss wirklich gut durchdacht werden.

Ich bin erstaunt, wie schlecht sich viele Sites bedienen lassen, wenn man ein Touch Gerät mit großer Auflösung hat und daher die Desktop Variante präsentiert bekommt.

Erinnert mich an die Geduldspiele aus Plastik aus meiner Kindheit.

Ich werde versuchen, das mal so umzusetzen - die eierlegende Wollmilchsau unter den Navigationen...

Danke für deine Geduld!

[cloned]

Zitat von JoergB

Ja, du hast Recht, das muss wirklich gut durchdacht werden.

Idealerweise gleich zu Beginn des Projekts. Bei vielen Navigationen scheint es für mich so, als ob eine Version zwar gut funktioniert (desktop, mit der Maus zb), die touch-Navigation dann aber nur zu der funktionierenden desktop-Version dazugebastelt wurde. (Oder anders herum)
Auch kann man sich einiges an Arbeit ersparen, wenn man die Navigation besser aufteilt, bzw. nicht so sehr verschachtelt ist. Da muss aber auch der Kunde mitspielen, was leider nicht immer möglich ist.

Zitat von JoergB

Ich werde versuchen, das mal so umzusetzen - die eierlegende Wollmilchsau unter den Navigationen...

Viel Erfolg!