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

relnote(108) Add details about container query length units #22345

Merged
merged 3 commits into from
Nov 17, 2022
Merged

relnote(108) Add details about container query length units #22345

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2bd0246
relnote(108) Add details about container query length units
bsmth Nov 16, 2022
565ca19
Merge branch 'main' into 22119-container-query-length-units
bsmth Nov 16, 2022
bb9915e
Apply suggestions from code review
sideshowbarker Nov 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions files/en-us/mozilla/firefox/experimental_features/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -639,6 +639,47 @@ See {{bug(1715546)}} for more details.
</tbody>
</table>

### Container query length units

The CSS length units `cqw`, `cqh`, `cqi`, `cqb`, `cqmin`, `cqmax` are units of length relative to the size of a query container.
For more information on these units, see the [CSS Container Queries](/en-US/docs/Web/CSS/CSS_Container_Queries#container_query_length_units) documentation ({{bug(1744231)}}).

<table>
<thead>
<tr>
<th>Release channel</th>
<th>Version added</th>
<th>Enabled by default?</th>
</tr>
</thead>
<tbody>
<tr>
<th>Nightly</th>
<td>108</td>
<td>No</td>
</tr>
<tr>
<th>Developer Edition</th>
<td>108</td>
<td>No</td>
</tr>
<tr>
<th>Beta</th>
<td>108</td>
<td>No</td>
</tr>
<tr>
<th>Release</th>
<td>108</td>
<td>No</td>
</tr>
<tr>
<th>Preference name</th>
<td colspan="2"><code>layout.css.container-queries.enabled</code></td>
</tr>
</tbody>
</table>

## SVG

### SVGPathSeg APIs
Expand Down
4 changes: 4 additions & 0 deletions files/en-us/mozilla/firefox/releases/108/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,10 @@ This article provides information about the changes in Firefox 108 that will aff
This allows the use of `sin()`, `cos()`, `tan()`, `asin()`, `acos()`, `atan()`, and `atan2()` functions within the CSS [`calc()`](/en-US/docs/Web/CSS/calc) function.
Additionally, a CSS [`<calc-constant>`](/en-US/docs/Web/CSS/calc-constant) type is implemented to allow for well-known constants such as `pi` and `e` within the `calc()` function ({{bug(1774589)}}, {{bug(1682444)}}).

- Container query length units are now supported via the the `layout.css.container-queries.enabled` preference, which is set to `false` by default.
Setting this preference to `true` allows the use of `cqw`, `cqh`, `cqi`, `cqb`, `cqmin`, and `cqmax` units of length which are relative to the size of a query container.
For more information on these units, see the [CSS Container Queries](/en-US/docs/Web/CSS/CSS_Container_Queries#container_query_length_units) documentation ({{bug(1744231)}}).

#### Removals

### JavaScript
Expand Down