Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Editorial review: CSS anchor positioning 5: position try functionality #33609

Open
wants to merge 36 commits into
base: main
Choose a base branch
from
+1,329 −0
Open

Editorial review: CSS anchor positioning 5: position try functionality #33609

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
bbd9ff7
Add position-try-options ref page
chrisdavidmills May 14, 2024
c3fed25
Add inset-area() function page
chrisdavidmills May 15, 2024
eba1966
Add position-try ref page
chrisdavidmills May 15, 2024
b0d56f1
Add @position-try ref page
chrisdavidmills May 15, 2024
f1c980a
Add position-try-order and CSSOM pages
chrisdavidmills May 16, 2024
8ff430d
Merge branch 'main' into css-anchor-positioning-5
chrisdavidmills May 16, 2024
0dc91ca
Merge branch 'main' into css-anchor-positioning-5
chrisdavidmills May 20, 2024
9f1ea3c
Fixes for mfreed7 review comments
chrisdavidmills May 20, 2024
da8bee9
Merge branch 'main' into css-anchor-positioning-5
chrisdavidmills May 21, 2024
e3dfe81
Pertial fix for the review comments so far
chrisdavidmills May 27, 2024
105ac53
Fixes made for rest of estelle comments so far
chrisdavidmills May 28, 2024
37cfbac
Merge branch 'main' into css-anchor-positioning-5
chrisdavidmills May 28, 2024
41fa51c
Update files/en-us/web/api/csspositiontrydescriptors/index.md
chrisdavidmills May 28, 2024
873556c
Update files/en-us/web/css/@position-try/index.md
chrisdavidmills May 28, 2024
aaf8922
Update files/en-us/web/css/@position-try/index.md
chrisdavidmills May 28, 2024
358717d
Update files/en-us/web/api/csspositiontrydescriptors/index.md
chrisdavidmills May 28, 2024
7feac15
Update files/en-us/web/api/csspositiontrydescriptors/index.md
chrisdavidmills May 28, 2024
b1b48fd
Update files/en-us/web/api/csspositiontrydescriptors/index.md
chrisdavidmills May 28, 2024
9a7159d
Update files/en-us/web/api/csspositiontrydescriptors/index.md
chrisdavidmills May 28, 2024
9bb621e
Update files/en-us/web/css/@position-try/index.md
chrisdavidmills May 28, 2024
b4aa225
Update files/en-us/web/api/csspositiontrydescriptors/index.md
chrisdavidmills May 28, 2024
621a4a4
Run prettier to fix linter errors
chrisdavidmills May 28, 2024
5e8d083
Update anchor names to be more distinct and less confusing
chrisdavidmills May 31, 2024
1560f65
Get around weird syntax linter behavior
chrisdavidmills May 31, 2024
b07942d
Update wording and casing for reference links
chrisdavidmills May 31, 2024
265901a
close js
estelle Jun 4, 2024
7b3c65d
remove tick marks
estelle Jun 4, 2024
831334d
Apply suggestions from code review
estelle Jun 4, 2024
205b259
Merge branch 'main' into css-anchor-positioning-5
chrisdavidmills Jun 5, 2024
9806000
Fixes for estelle review comments
chrisdavidmills Jun 5, 2024
b86c777
Update files/en-us/web/css/position-try-order/index.md
chrisdavidmills Jun 5, 2024
3642808
update @position-try example to include inset options
chrisdavidmills Jun 11, 2024
a8c2db9
Update files/en-us/web/css/@position-try/index.md
chrisdavidmills Jun 11, 2024
8b3ce0b
Update syntax section for consistency
chrisdavidmills Jun 14, 2024
e0fbe01
Add <try-size> type to position-try-order page
chrisdavidmills Jun 14, 2024
7e71b29
improve see alsos
chrisdavidmills Jun 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Prev Previous commit
Next Next commit
Add position-try-order and CSSOM pages
  • Loading branch information
@chrisdavidmills
chrisdavidmills committed May 16, 2024
commit f1c980a51ecf9a5d37e0a54cd9888cc5d71ccc97
3 changes: 3 additions & 0 deletions files/en-us/web/api/css_object_model/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,11 @@ The values of CSS are represented untyped, that is using {{JSxRef("String")}} ob
- {{DOMxRef("CSSMediaRule")}}
- {{DOMxRef("CSSNamespaceRule")}}
- {{DOMxRef("CSSPageRule")}}
- {{DOMxRef("CSSPositionTryRule")}}
- {{DOMxRef("CSSPositionTryDescriptors")}}
- {{DOMxRef("CSSRule")}}
- {{DOMxRef("CSSRuleList")}}
- {{DOMxRef("CSSStartingStyleRule")}}
- {{DOMxRef("CSSStyleDeclaration")}}
- {{DOMxRef("CSSStyleSheet")}}
- {{DOMxRef("CSSStyleRule")}}
Expand Down
58 changes: 58 additions & 0 deletions files/en-us/web/api/csspositiontrydescriptors/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
---
title: CSSPositionTryDescriptors
estelle marked this conversation as resolved.
Show resolved Hide resolved
slug: Web/API/CSSPositionTryDescriptors
page-type: web-api-interface
status:
- experimental
browser-compat: api.CSSPositionTryDescriptors
---

{{APIRef("CSSOM")}}

The **`CSSPositionTryDescriptors`** interface describes an object representing a {{cssxref("@position-try")}} [at-rule](/en-US/docs/Web/CSS/At-rule).

{{InheritanceDiagram}}

## Instance properties

_Inherits properties from its ancestor {{domxref("CSSStyleDeclaration")}}._

The `CSSPositionTryDescriptors` interface defines around 70 properties that represent all of the [possible CSS properties that can be set inside a `@position-try` at rule](/en-US/docs/Web/CSS/@position-try#declaration-list). It wouldn't be practical or useful to create a separate reference page for each of these properties, but you can find a full list in the [Browser compatibility](#browser_compatibility) section below.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are about 35 properties, each presented in camelCase and css-case.

This

Suggested change
The `CSSPositionTryDescriptors` interface defines around 70 properties that represent all of the [possible CSS properties that can be set inside a `@position-try` at rule](/en-US/docs/Web/CSS/@position-try#declaration-list). It wouldn't be practical or useful to create a separate reference page for each of these properties, but you can find a full list in the [Browser compatibility](#browser_compatibility) section below.
The `CSSPositionTryDescriptors` interface defines 70 properties that represent the [CSS properties that can be set inside a `@position-try` at rule](/en-US/docs/Web/CSS/@position-try#declaration-list).
There are 35 CSS properties that can be accessed as CSS property names or camelCase.
- `CSSPositionTryDescriptors.propertyName`
- : Represents the property value set in the `@position-try` at rule using the camel-cased property name.
- `CSSPositionTryDescriptors["property-name"]`
- : Represents the property value set in the `@position-try` at rule using the CSS property name.
The instance properties are listed below:
| CSS property | camelCase | property-name |
|. ---- | ---- | ------ |
| {{cssxref("align-self")}} | `CSSPositionTryDescriptors.alignSelf` | `CSSPositionTryDescriptors["align-self"]` |

list all 35. Don't send people to decipher the BCD table.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was hoping to avoid having to do this ;-)

But yeah, you are right. I'll suck it up.


## Instance methods

_No specific methods; inherits methods from its ancestor {{domxref("CSSStyleDeclaration")}}._

## Examples

The CSS includes a `@position-try` at-rule with a name of `--custom-right` and several declarations in its body.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
The CSS includes a `@position-try` at-rule with a name of `--custom-right` and several declarations in its body.
The CSS includes a `@position-try` at-rule with a name of `--custom-right` and three descriptors.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call; updated


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

```js
let myRules = document.styleSheets[0].cssRules;
let tryOptionStyles = myRules[0].style; // a CSSPositionTryDescriptors object
console.log(tryOptionStyles.margin); // Logs "0 0 0 10px" to the console.
console.log(tryOptionStyles.insetArea); // Logs "right" to the console.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
console.log(tryOptionStyles.insetArea); // Logs "right" to the console.
console.log(tryOptionStyles["inset-area"]); // Logs "right" to the console.

there are 35 properties, each listed two ways, so let's include at least one example of each way of accessing the CSS property.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call; done.

```
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i committed this line so i could read the page


## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{cssxref("@position-try")}}
- {{cssxref("position-try-options")}}
- [CSS Anchor Positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- [CSS Anchor Positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning)
- [CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning) module

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

- [Using CSS Anchor Positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- [Using CSS Anchor Positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using)
- [Using CSS Anchor Positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using)
- {{DOMxRef("CSSPositionTryRule")}}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added

60 changes: 60 additions & 0 deletions files/en-us/web/api/csspositiontryrule/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
---
title: CSSPositionTryRule
slug: Web/API/CSSPositionTryRule
page-type: web-api-interface
status:
- experimental
browser-compat: api.CSSPositionTryRule
---

{{APIRef("CSSOM")}}

The **`CSSPositionTryRule`** interface describes an object representing a {{cssxref("@position-try")}} [at-rule](/en-US/docs/Web/CSS/At-rule).

{{InheritanceDiagram}}

## Instance properties

_Inherits properties from its ancestor {{domxref("CSSRule")}}._

- {{domxref("CSSPositionTryRule.name")}} {{ReadOnlyInline}}
- : Represents the name of the position try option specified by the `@position-try` at-rule's {{cssxref("dashed-ident")}}.
- {{domxref("CSSPositionTryRule.style")}} {{ReadOnlyInline}}
- : Returns a {{domxref("CSSPositionTryDescriptors")}} object representing the declarations set in the body of the `@position-try` at-rule.

## Instance methods

_No specific methods; inherits methods from its ancestor {{domxref("CSSRule")}}._

## Examples

The CSS includes a `@position-try` at-rule with a name of `--custom-right` and several declarations in its body.

```css
@position-try --custom-right {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's make the examples on the various pages a bit different (this exact example is used in each page) so users can learn how to right different @position-trys.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK; I've varied them a bit on the different pages.

inset-area: right;
width: 100px;
margin: 0 0 0 10px;
}
```

```js
let myRules = document.styleSheets[0].cssRules;
let tryOption = myRules[0]; // a CSSPositionTryRule
console.log(tryOption); // Log the CSSPositionTryRule to the console.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
let tryOption = myRules[0]; // a CSSPositionTryRule
console.log(tryOption); // Log the CSSPositionTryRule to the console.
let tryOption = myRules[0];
console.log(tryOption); // [object CSSPositionTryRule]

include the console output after the slashes.

optionally:

Suggested change
let tryOption = myRules[0]; // a CSSPositionTryRule
console.log(tryOption); // Log the CSSPositionTryRule to the console.
let tryOption = myRules[0];
console.log(tryOption); // [object CSSPositionTryRule]
console.log(tryOption.name); // "--custom-right"
console.log(tryOption.style); // [object CSSPositionTryDescriptors]

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've updated the console outputs to be present and consistent on all pages. I've also added more console.log() examples on the main interface page, so you can see the full scope of what is available in this object all in one place.

```

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{cssxref("@position-try")}}
- {{cssxref("position-try-options")}}
- [CSS Anchor Positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning)
- [Using CSS Anchor Positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sentence case. add module after the module link. (for all the pages)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup, done, for all the pages of this interface.

48 changes: 48 additions & 0 deletions files/en-us/web/api/csspositiontryrule/name/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
---
title: "CSSPositionTryRule: name property"
short-title: name
slug: Web/API/CSSPositionTryRule/name
page-type: web-api-instance-property
browser-compat: api.CSSPositionTryRule.name
---

{{APIRef("CSSOM") }}

The **`name`** read-only property of the {{domxref("CSSPositionTryRule")}} interface represents the name of the position try option specified by the `@position-try` at-rule's {{cssxref("dashed-ident")}}.

## Value

A string.

## Examples

The CSS includes a `@position-try` at-rule with a name of `--custom-right` and several declarations in its body.

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

```js
let myRules = document.styleSheets[0].cssRules;
let tryOption = myRules[0]; // a CSSPositionTryRule
console.log(tryOption.name); // Logs "--custom-right" to the console.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
let myRules = document.styleSheets[0].cssRules;
let tryOption = myRules[0]; // a CSSPositionTryRule
console.log(tryOption.name); // Logs "--custom-right" to the console.
let myRules = document.styleSheets[0].cssRules;
let tryOption = myRules[0]; // the CSSPositionTryRule
console.log(tryOption.name); // "--custom-right"

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK, I've updated all the console lines to follow this style, on the different pages.

```

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{cssxref("@position-try")}}
- {{cssxref("position-try-options")}}
- [CSS Anchor Positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning)
- [Using CSS Anchor Positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using)
49 changes: 49 additions & 0 deletions files/en-us/web/api/csspositiontryrule/style/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
---
title: "CSSPositionTryRule: style property"
short-title: style
slug: Web/API/CSSPositionTryRule/style
page-type: web-api-instance-property
browser-compat: api.CSSPositionTryRule.style
---

{{ APIRef("CSSOM") }}

The **`style`** read-only property of the {{domxref("CSSPositionTryRule")}} interface returns a {{domxref("CSSPositionTryDescriptors")}} object representing the declarations set in the body of the `@position-try` at-rule.

## Value

A {{domxref("CSSPositionTryDescriptors")}} object.

## Examples

The CSS includes a `@position-try` at-rule with a name of `--custom-right` and several declarations in its body.

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

```js
let myRules = document.styleSheets[0].cssRules;
let tryOption = myRules[0]; // a CSSPositionTryRule
console.log(tryOption.style.margin); // Logs "0 0 0 10px" to the console.
console.log(tryOption.style.insetArea); // Logs "right" to the console.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
let tryOption = myRules[0]; // a CSSPositionTryRule
console.log(tryOption.style.margin); // Logs "0 0 0 10px" to the console.
console.log(tryOption.style.insetArea); // Logs "right" to the console.
let tryOption = myRules[0]; // a CSSPositionTryRule
console.log(tryOption.style.margin); // "0 0 0 10px"
console.log(tryOption.style["inset-area"]); // "right"

show more than one way of doing it.
only the output after the slashes.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done, and done

```

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{cssxref("@position-try")}}
- {{cssxref("position-try-options")}}
- [CSS Anchor Positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning)
- [Using CSS Anchor Positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using)
3 changes: 2 additions & 1 deletion files/en-us/web/css/position-try-options/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ browser-compat: css.properties.position-try-options

The **`position-try-options`** [CSS](/en-US/docs/Web/CSS) property enables you to specify one or more alternative **position try options** for **anchor-positioned elements** to be placed in relative to their associated **anchor elements**. The browser will try placing the positioned element in these different positions, to stop it from overflowing its container or the viewport.

> **Note:** There is also a shorthand property — {{cssxref("position-try")}}, which can be used to specify `position-try-options` and `position-try-order` values in a single declaration. We've not yet documented `position-try-order`, as there are still ongoing discussions about its specified behavior, which seems likely to change.
> **Note:** There is also a shorthand property — {{cssxref("position-try")}}, which can be used to specify {{cssxref("position-try-order")}} and `position-try-options` values in a single declaration.

For detailed information on anchor positioning, see the [CSS Anchor Positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning) module landing page.

Expand Down Expand Up @@ -328,6 +328,7 @@ Scroll the page and check out the effect of these position try options as the an

## See also

- {{cssxref("position-try-order")}}, {{cssxref("position-try")}}
- The {{cssxref("@position-try")}} at-rule
- [CSS Anchor Positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning)
- [Using CSS Anchor Positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using)