Der Komfort des neuen @position-try von CSS

Die CSS-Ankerpositionierung wurde vor einiger Zeit veröffentlicht. Wenn Sie, wie ich, nicht gerne CSS schreiben, würde diese neue API die Dinge definitiv verbessern.

Ankerpositionierung

Die CSS-Ankerpositionierungs-API ermöglicht Entwicklern die einfache Positionierung von Elementen relativ zu anderen (sogenannten Ankern), ohne dass zusätzliche Bibliotheken oder komplexes JavaScript erforderlich sind. Diese Funktion eignet sich perfekt zum Erstellen von Menüs, Tooltips, Dialogen und anderen mehrschichtigen Schnittstellen.

Mit dieser API können Sie sicherstellen, dass sich die Größe/Position eines Elements basierend auf seinem Anker anpasst. Dadurch entfällt die Notwendigkeit manueller Anpassungen und sorgt für ein reibungsloseres, reaktionsschnelleres Erlebnis beim Erstellen dynamischer, interaktiver Layouts.

Was ist Positionsversuch?

Anchor CSS hat außerdem eine neue CSS-at-rule namens position-try herausgebracht. Damit können Sie Fallback-Positionen für verankerte Elemente definieren, wenn diese nicht in den Bildschirm oder Container passen. Wenn ein Element überläuft, wählt der Browser automatisch die nächste alternative Position und stellt so sicher, dass es vollständig sichtbar und funktionsfähig bleibt. Mit der Eigenschaft position-try-fallbacks können mehrere Fallback-Positionen definiert werden, die der Browser versuchen soll. Früher wurde dies dadurch erreicht, dass ein Listener ausgeführt wurde, der nach jeder Änderung des Ansichtsfensters prüft, ob die Dinge in Ordnung sind.

Dies könnte viele Kopfschmerzen beim Arbeiten mit Dropdowns, Tooltips usw. verhindern, da wir jetzt keine benutzerdefinierte Logik schreiben müssen, um auf Überlaufbedingungen zu prüfen.

Eine Demo

Hier ist eine kurze Demo des Codes, den ich mit den oben genannten CSS-Eigenschaften geschrieben habe:

Das Untermenü in meiner schrecklich aussehenden Navigationsleiste ändert seine Position basierend auf der Breite des Ansichtsfensters.

Der Code ist in React geschrieben. Früher hätte ich dazu einen Effekt nutzen müssen. In meinem Effekt hätte ich überprüft, ob das Untermenüelement die Grenze des Ansichtsfensters überschreitet. Wenn ja, hätte ich ein weiteres erneutes Rendern ausgelöst, um die Stile des Untermenüs zu aktualisieren. Da useEffect nach dem Paint ausgeführt wird und wir nicht möchten, dass der Benutzer das Untermenü an der falschen Stelle sieht, hätte ich dafür useLayoutEffect verwenden müssen.

Jetzt muss ich nur noch ein CSS wie dieses schreiben:

.button-anchor {
  anchor-name: --anchorButton;
}

@position-try --bottom {
  position-area: bottom;
}

.menu-list {
  position-anchor: --anchorButton;
  border: 1px solid #000;
  font-family: sans-serif;
  width: 60px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  row-gap: 4px;
  padding: 8px;
  position: fixed;
  position-area: right span-y-end;
  position-try-fallbacks: --bottom;
}

@position-try – erstellt die Regel namens --bottom.
Ankername – legt die Schaltfläche als Ankerelement fest.
position-anchor – ermöglicht der Menüliste die Verwendung von --anchorButton als Ankerelement.
position-try-fallbacks – hilft beim Auflisten der mehreren auszuprobierenden Fallbacks. Dies bedeutet, dass es mehr Positionen geben kann, selbst wenn --bottom fehlschlägt.

Zusammenfassung

Anchor CSS ist gekommen und hat einige sehr interessante Anwendungsfälle für einen Entwickler gelöst. Darüber hinaus wird die kabelgebundene Positionierung sehr einfach. Alles basiert ausschließlich auf CSS, daher ist auch die Leistung großartig. Im Moment ist die Browserunterstützung nicht besonders gut, aber ich hoffe, dass sie bald mehr Akzeptanz findet.

Das obige ist der detaillierte Inhalt vonDer Komfort des neuen @position-try von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!