CSSPositionTryDescriptors

Ограниченная доступность

Эта функция не является базовой, так как она не работает во всех широко используемых браузерах.

Экспериментально: Это экспериментальная технология
Перед использованием в производственной среде внимательно проверьте таблицу совместимости браузеров.

Интерфейс CSSPositionTryDescriptors определяет свойства, представляющие список описателей CSS, которые можно задать в теле @position-try правила.

Каждый описатель в теле соответствующего @position-try правила можно получить, используя либо имя свойства в скобочной нотации, либо версию имени свойства с верблюжьей нотацией "propertyName" в точечной нотации. Например, вы можете получить доступ к свойству CSS "property-name" как style["property-name"] или style.propertyName, где style — экземпляр CSSPositionTryDescriptors. Свойство с однословным именем, например, height, можно получить с помощью любой из этих нотаций: style["height"] или style.height.

Примечание: Интерфейс CSSPositionTryRule представляет собой @position-try правило, а свойство CSSPositionTryRule.style является экземпляром этого объекта.

Свойства экземпляра

Наследует свойства от своего предка CSSStyleDeclaration.

Следующие имена свойств, в нижнем регистре с дефисами (доступ к ним с помощью скобочной нотации) и верблюжьей нотацией (доступ к ним с помощью точечной нотации), каждое представляет значение описателя в соответствующем @position-try правиле:

align-self или alignSelf Экспериментальная: Строка, представляющая значение описателя align-self.
block-size или blockSize Экспериментальная: Строка, представляющая значение описателя block-size.
bottom Экспериментальная: Строка, представляющая значение описателя bottom.
height Экспериментальная: Строка, представляющая значение описателя height.
inline-size или inlineSize Экспериментальная: Строка, представляющая значение описателя inline-size.
inset Экспериментальная: Строка, представляющая значение описателя inset.
position-area или positionArea Экспериментальная: Строка, представляющая значение описателя position-area.
inset-block или insetBlock Экспериментальная: Строка, представляющая значение описателя inset-block.
inset-block-end или insetBlockEnd Экспериментальная: Строка, представляющая значение описателя inset-block-end.
inset-block-start или insetBlockStart Экспериментальная: Строка, представляющая значение описателя inset-block-start.
inset-inline или insetInline Экспериментальная: Строка, представляющая значение описателя inset-inline.
inset-inline-end или insetInlineEnd Экспериментальная: Строка, представляющая значение описателя inset-inline-end.
inset-inline-start или insetInlineStart Экспериментальная: Строка, представляющая значение описателя inset-inline-start.
justify-self или justifySelf Экспериментальная: Строка, представляющая значение описателя justify-self.
left Экспериментальная: Строка, представляющая значение описателя left.
margin Экспериментальная: Строка, представляющая значение описателя margin.
margin-block или marginBlock Экспериментальная: Строка, представляющая значение описателя margin-block.
margin-block-end или marginBlockEnd Экспериментальная: Строка, представляющая значение описателя margin-block-end.
margin-block-start или marginBlockStart Экспериментальная: Строка, представляющая значение описателя margin-block-start.
margin-bottom или marginBottom Экспериментальная: Строка, представляющая значение описателя margin-bottom.
margin-inline или marginInline Экспериментальная: Строка, представляющая значение описателя margin-inline.
margin-inline-end или marginInlineEnd Экспериментальная: Строка, представляющая значение описателя margin-inline-end.
margin-inline-start или marginInlineStart Экспериментальная: Строка, представляющая значение описателя margin-inline-start.
margin-left или marginLeft Экспериментальная: Строка, представляющая значение описателя margin-left.
margin-right или marginRight Экспериментальная: Строка, представляющая значение описателя margin-right.
margin-top или marginTop Экспериментальная: Строка, представляющая значение описателя margin-top.
max-block-size или maxBlockSize Экспериментальная: Строка, представляющая значение описателя max-block-size.

max-height или maxHeight Экспериментально: Строка, представляющая значение описателя max-height.
max-inline-size или maxInlineSize Экспериментально: Строка, представляющая значение описателя max-inline-size.
max-width или maxWidth Экспериментально: Строка, представляющая значение описателя max-width.
min-block-size или minBlockSize Экспериментально: Строка, представляющая значение описателя min-block-size.
min-height или minHeight Экспериментально: Строка, представляющая значение описателя min-height.
min-inline-size или minInlineSize Экспериментально: Строка, представляющая значение описателя min-inline-size.
min-width или minWidth Экспериментально: Строка, представляющая значение описателя min-width.
place-self или placeSelf Экспериментально: Строка, представляющая значение описателя place-self.
position-anchor или positionAnchor Экспериментально: Строка, представляющая значение описателя position-anchor.
right Экспериментально: Строка, представляющая значение описателя right.
top Экспериментально: Строка, представляющая значение описателя top.
width Экспериментально: Строка, представляющая значение описателя width.

Методы экземпляра

Нет конкретных методов; наследует методы от своего предка CSSStyleDeclaration.

Примеры

CSS содержит правило @position-try с именем --custom-right и тремя описателями.

@position-try --custom-right {
  position-area: right;
  width: 100px;
  margin: 0 0 0 10px;
}

const myRules = document.styleSheets[0].cssRules;
const tryOption = myRules[0]; // a CSSPositionTryRule
console.log(tryOption.style); // "[object CSSPositionTryDescriptors]"
console.log(tryOption.style.margin); // "0 0 0 10px"
console.log(tryOption.style["position-area"]); // "right"

Спецификации

Спецификация
CSS Анкеровка позиционирования # csspositiontrydescriptors

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android

`CSSPositionTryDescriptors`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`align-self`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`alignSelf`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`block-size`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`blockSize`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`bottom`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`height`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`inline-size`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`inlineSize`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`inset`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`inset-block`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`inset-block-end`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`inset-block-start`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`inset-inline`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`inset-inline-end`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`inset-inline-start`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`insetBlock`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`insetBlockEnd`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`insetBlockStart`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`insetInline`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`insetInlineEnd`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`insetInlineStart`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`justify-self`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`justifySelf`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`left`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`margin`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125

`margin-block`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`margin-block-end`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`margin-block-start`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`margin-bottom`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`margin-inline`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`margin-inline-end`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`margin-inline-start`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`margin-left`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`margin-right`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`margin-top`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`marginBlock`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`marginBlockEnd`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`marginBlockStart`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`marginBottom`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`marginInline`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`marginInlineEnd`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`marginInlineStart`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`marginLeft`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`marginRight`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`marginTop`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`max-block-size`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`max-height`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`max-inline-size`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`max-width`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`maxBlockSize`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`maxHeight`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125

`maxInlineSize`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`maxWidth`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`min-block-size`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`min-height`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`min-inline-size`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`min-width`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`minBlockSize`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`minHeight`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`minInlineSize`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`minWidth`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`place-self`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`placeSelf`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`position-anchor`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`position-area`	129125	129125	131	115111	Нет	129125	Нет	8683	Нет	27.0	129125
`positionAnchor`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`positionArea`	129125	129125	131	115111	Нет	129125	Нет	8683	Нет	27.0	129125
`right`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`top`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125
`width`	125	125	131	111	Нет	125	Нет	83	Нет	27.0	125

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CSSPositionTryDescriptors