Ich habe gerade die neuesten CSSWG-Protokolle durchgesehen (Sie können sie unter W3C.org abonnieren) und bin auf ein paar interessante Fundstücke gestoßen, die ich für später festhalten wollte. Die Gruppe diskutierte die Module CSS Values, CSS Easing und Selectors, aber was wirklich meine Aufmerksamkeit erregte, war das Hinzufügen von verzögerten Auslösern zu CSS für Dinge wie Hover-, Long-Tap- und Fokus-Zustände.
Die Idee stammt aus einem OpenUI-Vorschlag, derselben Gruppe, der wir Dinge wie die Popover API und anpassbare Select-Elemente zu verdanken haben. Das Konzept, wenn ich es richtig verstehe, ist, dass jedes Mal, wenn jemand zum Beispiel einen `<button>` für eine bestimmte Zeitspanne mit der Maus berührt, tippt oder fokussiert, wir eine Art Ding auslösen können. Ein Tooltip ist die perfekte Illustration. Das Hovern über das Trigger-Element, so die Argumentation, ist ein Ausdruck von Interesse, und als Webautoren können wir etwas mit diesem Interesse tun, wie zum Beispiel einen Tooltip anzeigen.
Wow, oder?! Es gibt schon lange Gerede darüber, dass CSS in das Gebiet von JavaScript eindringt (ist das nicht ironisch, finden Sie nicht?). Das Auslösen von Ereignissen als Reaktion auf Interaktion ist buchstäblich das Einzige, wofür ich JavaScript verwende. Daran gibt es in der CSSWG keinen Zweifel, wie in den Protokollen dokumentiert.
Also. Gehört das zu CSS? Oder sollte es woanders sein? Macht der Ansatz Sinn? Gibt es bessere Ideen? Am meisten interessiert mich die letzte.
[…]
Andere Frage: Gehört das zu CSS oder HTML… vielleicht ist das einfach eine JavaScript-Funktion? In JS kann man den MQ-Status ermitteln und Dinge ändern, daher müsste es nicht unbedingt in CSS sein.
Und kurz darauf
Während Sie gesprochen haben; eine Sache, an die ich immer wieder gedacht habe; sollten Entwickler die Verzögerung überhaupt anpassen können? Der ursprüngliche Anwendungsfall für die Verzögerung ist, dass Hover nicht sofort erfolgen sollte. Aber wenn wir keine Anpassung zulassen, können wir uns an die Verzögerungslängen der Plattform anpassen.
Es gibt jedoch einen ausgezeichneten Punkt bezüglich der Art und Weise, wie viele von uns dies bereits mit CSS-Animationen (animation-delay) und Übergängen (transition-delay) tun. Manchmal werden diese sogar global mit dem Universal Selector oder einer `prefers-*`-Abfrage angewendet.
Die Sache wird noch komplizierter, wenn man bedenkt, wie Werte dafür definiert werden. Sind es explizite Verzögerungen (800ms), generische Schlüsselwörter (none/short/medium/long), eine benutzerdefinierte Eigenschaft, eine Pseudoklasse… etwas anderes? Ich bin froh, dass unglaublich kluge Leute darüber nachdenken.
Ich denke, hier wäre es gut, mit Zeitwerten zu arbeiten. CSS ist ein guter Ort dafür. Wir haben alle Ergonomie. Der richtige deklarative Ort dafür.
Was auch immer der endgültige Fall sein mag
Ich denke, das klingt vernünftig und ich möchte es weiter untersuchen. Ich bin mir nicht sicher, ob es die genaue Form hat, aber dieser Bereich erscheint mir nützlich.