CSS Anchor Positioning Polyfill не обрабатывает резервные позицииCSS

Разбираемся в CSS
Ответить
Anonymous
 CSS Anchor Positioning Polyfill не обрабатывает резервные позиции

Сообщение Anonymous »

Я добавил полифилл Oddbird Css Anchor Positioning Polyfill Oddbird Css Anchor Positioning Polyfill для использования в Firefox, и он, кажется, работает хорошо.
index.html

Код: Выделить всё





None



* { margin: 0; padding: 0; }

.anchor { padding: 25px 100px; }

.anchorChild { width: 400px; padding: 25px 0; border: solid 1px black; background-color: grey; }

@position-try --anchor-fallback { top: anchor(bottom); right: anchor(right); left: revert; }



Example A



Example B



Example A Child

Example B Child






index.js

Код: Выделить всё

import polyfill from "@oddbird/css-anchor-positioning/fn";

window.addEventListener("DOMContentLoaded", () => {
if(!("anchorName" in document.documentElement.style)) {
polyfill({
elements: [
document.getElementById("exampleA"),
document.getElementById("exampleAChild"),
document.getElementById("exampleB"),
document.getElementById("exampleBChild")
]
});
}
});
За исключением позиции-try: --anchor-fallback;, похоже, не работает, и я не смог понять, почему. Интересно, есть ли дополнительный шаг для отступлений, который мне не хватает

Подробнее здесь: https://stackoverflow.com/questions/793 ... -fallbacks
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»