Ankerpositionierungs -Macken

Die CSS-Tricks Almanac bietet nun umfassende Berichterstattung über die neue Ankerpositionierungs-API, wobei jede Eigenschaft, Funktion, Funktion und AT-Rule detailliert werden. Mein jüngster Tauchgang in dieses Modul hat einige faszinierende Macken und potenziellen Fehler enthüllt, die ich hier untersuchen werde, um Ihnen einige Kopfkratzer zu sparen.

Der eingelassene Block (IMCB)

Während der enthaltende Block für statische Elemente unkompliziert ist (der Inhaltsbereich des Elternteils), führen absolut positionierte Elemente Komplexität ein. Ihr enthaltender Block ist in der Regel das Ansichtsfenster oder der nächste positionierte Vorfahr. Der -Ineins-modifizierte Block

(IMCB) fügt jedoch eine Nuance-Schicht hinzu, die für die Ankerpositionierung besonders relevant ist.

inset Das IMCB wird in der Spezifikation als den enthaltenden Block definiert, der durch die top -Abeigenschaften (right, bottom, left,

) des absolut positionierten Elements effektiv geschrumpft ist.

zum Beispiel:

.absolute {
  position: absolute;
  top: 80px;
  right: 120px;
  bottom: 180px;
  left: 90px;
}

position-area Hier ist der IMCB kleiner als das Ansichtsfenster, reduziert durch die angegebenen Einschubwerte. Das Verständnis der IMCB ist entscheidend für die Beherrschung der Ankerpositionierung, insbesondere die Eigenschaften position-try-order und position-area. position-try-order teilt den enthaltenden Block in ein Netz, und das IMCB definiert den Positionierungsbereich in diesem Netz. verwendet IMCB -Dimensionen, um die Fallback -Positionierung zu bestimmen. Una Kravets 'visuelles Tool unter https://www.php.cn/link/7e77e4a1b051ec0a510b48eaec2f3a3c

bietet eine hervorragende Visualisierung.

Spezifikation vs. Implementierung: Eine Geschichte der schnellen Evolution

Während die Spezifikation als wertvolle Anleitung diente, ergab die reale Browser-Implementierung Diskrepanzen. Die schnelle Entwicklung und Bereitstellung der Ankerpositionierung (erster Entwurf im Juni 2023, Chrome 125) führte zu einigen anfänglichen Inkonsistenzen zwischen Spezifikations- und Browserverhalten. Änderungen, die nach der ersten Browser -Implementierung vorgenommen wurden, umfassen:

• inset-area Umbenannt in position-area: inset-area wird veraltet, verwenden Sie position-area.
• position-try-options Umbenannt in position-try-fallbacks: Verwenden Sie position-try-fallbacks.
• inset-area() Funktion entfernt: Die Wrapper -Funktion wird für position-try-fallbacks nicht mehr benötigt.
• anchor(center) Vereinfachung: Eine prägnantere Syntax für die Zentrierung ist jetzt verfügbar.
• Fehler: Es gibt mehrere Fehler, insbesondere in Bezug auf position-area Verhalten, wenn ein Standardanker fehlt, und position-visibility Standardverhalten.

Überlegungen zur Zugänglichkeit

Während Ankerpositionierung Excels für Tooltips und Popovers, kann es die Zugänglichkeit beeinträchtigen. Bildschirmleser verstehen die Beziehung zwischen visuell verknüpften, aber semantisch nicht verwandten Elementen möglicherweise nicht. Die Verwendung von Aria -Attributen wie aria-describedby und role wird empfohlen, eine klare semantische Beziehung herzustellen, um die Zugänglichkeit für assistive Technologien zu gewährleisten.

Schlussfolgerung

Mastering -Ankerpositionierung erfordert die Navigation seiner Komplexität. Während der CSS-Tricks Almanac wertvolle Ressourcen bereitstellt, denken Sie daran, dass sich die API immer noch weiterentwickelt und weitere Lernmöglichkeiten und potenzielle zukünftige Verfeinerungen verspricht.

Das obige ist der detaillierte Inhalt vonAnkerpositionierungs -Macken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!