Eine Methode zur Berechnung der Breite und Höhe des Viewports ohne JavaScript, präsentiert von Temani Afif drüben bei CSS Tip
@property --_w {
syntax: '<length';
inherits: true;
initial-value: 100vw;
}
@property --_h {
syntax: '<length';
inherits: true;
Wir haben Viewport-Einheiten (z.B. vw, vh, vmin, vmax) und sie sind meistens ziemlich gut. Es ist cool, immer eine Einheit zur Verfügung zu haben, die sich auf den gesamten Bildschirm bezieht. Aber wenn man Leute fragt, was ...
In der dieswöchigen Zusammenfassung beleuchten wir einen Vorschlag für ein neues <popup>-Element, überprüfen die Verwendung von prefers-reduced-motion auf preisgekrönten Websites, lernen, wie man sich für Cross-Origin-Isolation entscheidet, sehen, wie WhiteHouse.gov Barrierefreiheit angeht, und warnen vor den Gefahren von 100vh. ...
Deep Dive von Ahmad. Mir gefällt die Behandlung von vmin und vmax, die ich meiner Meinung nach nicht so oft verwende, wie ich sollte.
Ich denke, wenn Sie etwas sehr Gerichtetes tun (z.B. einen Full-Bleed-Trick ...
David Chanin hat einen kurzen Artikel verfasst, der ein Problem zusammenfasst, das beim Festlegen der height eines Elements auf 100vh in mobilen Browsern auftritt, und dann auch noch etwas am unteren Rand davon zu positionieren. ...
Nehmen wir an, Sie wollten ein Element um einen Bildschirm hüpfen lassen, so ähnlich wie bei einem altmodischen Bildschirmschoner oder Pong oder so etwas.
Sie würden wahrscheinlich die X-Position des Elements verfolgen und sie in einer Zeitschleife erhöhen oder verringern ...
Viewport-Einheiten waren schon immer umstritten, und das liegt teilweise daran, wie mobile Browser die Dinge komplizierter gemacht haben, indem sie ihre eigenen Vorstellungen über die Implementierung hatten.
Ein Beispiel: Sollte die Scrollleiste mit ...
Viewport-Einheiten gibt es nun schon seit einigen Jahren, mit nahezu perfekter Unterstützung in den wichtigsten Browsern, aber ich finde immer wieder neue und spannende Wege, sie einzusetzen. Ich dachte, es würde Spaß machen, die Grundlagen zu wiederholen und dann …
Viewport-Einheiten sind Dinge wie 10vw (10 % der Viewport-Breite) oder 2vh (2 % der Viewport-Höhe). Manchmal nützlich, da sie sich immer auf den Viewport beziehen. Kein Cascading oder Einfluss durch Elternelemente.
Es gibt auch vmin, das ...
