Skip to content

Commit 6d272a2

Browse files
authored
Update container-queries.md (#722)
Fixes a few misspellings and minor grammar mistakes in the description about container queries.
1 parent 843a50f commit 6d272a2

File tree

1 file changed

+7
-7
lines changed

1 file changed

+7
-7
lines changed

docs/basics/user-interface/styling/container-queries.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@ title: Container Queries
55

66
# Container Queries <MinVersion version="11.3" />
77

8-
Container Queries allows styles to be activated for control based on the size of an ancestor, which acts as a container.
8+
Container Queries allow styles to be activated for a control based on the size of an ancestor, which acts as a container.
99

1010
:::tip
11-
Avalonia's Container Queries are similar to CSS's Container Queries, with a more limited functionality to suit platforms and form factors Avalonia supports. They can also behave like media queries if the Toplevel is set as a container.
11+
Avalonia's Container Queries are similar to CSS's Container Queries, with a more limited functionality to suit the platforms and form factors Avalonia supports. They can also behave like media queries if the Toplevel is set as a container.
1212
:::
1313

1414
## How It Works
1515

16-
Container queries rely on there being an ancestor control being set as a container. Changes to the size of the container activate styles based on queries. Those queries can check either the width or height of the container, or both. Any control can be a container, but a control set as a container can not be affected by styles hosted by a container query linked to it. When a query is activated, all styles hosted in the query will also be activated based on their selectors.
16+
Container queries rely on an ancestor control being set as a container. Changes to the size of the container activate styles based on queries. Those queries can check either the width or height of the container, or both. Any control can be a container, but a control set as a container can not be affected by styles hosted by a container query linked to it. When a query is activated, all styles hosted in the query will also be activated based on their selectors.
1717

1818
## How To Use Queries
1919

@@ -65,7 +65,7 @@ They can also be part of a `ControlTheme`'s styles:
6565
The `Name` property defines the name of the container it will attach to. This isn't a unique identifier, and multiple container queries can use the same name.
6666
The `Query` defines the rules to activate the containing size. See [Queries](#queries) below.
6767

68-
This make them quite easy to use in themes targeting difference screen sizes, or themes thathave different forms depending on the space available in its parent. This comes with a few restrictions.
68+
This makes them quite easy to use in themes targeting different screen sizes, or themes that have different forms depending on the space available in its parent. This comes with a few restrictions.
6969
1. Container Queries can't be hosted in a `Style` element.
7070
The following is invalid.
7171
```xml
@@ -97,14 +97,14 @@ Container queries only work if a control that's a descendant of the `ContainerQu
9797

9898
`Container.Name` defines the name of the container. It isn't unique to that container, and multiple controls in the same scope can have the same container name, and they will all be affected by the same container queries.
9999

100-
`Container.Sizing` defines the sizing strategy of the container for queries. The container's final size depends on the value. Its an enum with the following values:
100+
`Container.Sizing` defines the sizing strategy of the container for queries. The container's final size depends on the value. It's an enum with the following values:
101101

102102
* `Normal`: The container's size isn't queried. This is the default value. The control follows normal measurement and arrangement.
103103
* `Width`: The container's width is queried. The container will use the maximum width allowed by its parent, and that value is used in all related container queries. In most cases, the final width is the max width allowed.
104104
* `Height`: Same as `Width`, but only the container's height is queried.
105105
* `WidthAndHeight`: Both width and height of the container is queried.
106106

107-
Depending on the sizing stratedy, the container will use the maximum avialable size as its desired size.
107+
Depending on the sizing strategy, the container will use the maximum available size as its desired size.
108108

109109
### Queries
110110
The following queries are available.
@@ -140,7 +140,7 @@ The following is an example of using multiple container queries with different q
140140
</Style>
141141
</ContainerQuery>
142142
```
143-
Multiple queries can be combine with `,` for OR combination, or `and` for AND combination.
143+
Multiple queries can be combined with `,` for OR combination, or `and` for AND combination.
144144

145145
```xml
146146
<ContainerQuery Name="uniformGrid"

0 commit comments

Comments
 (0)