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

docs(relnote): FF127 - Experimental support for color components in calc() #34042

Merged
merged 8 commits into from
Jun 12, 2024
Merged

docs(relnote): FF127 - Experimental support for color components in calc() #34042

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
843872d
adds release notes for color support in calc()
dipikabh Jun 10, 2024
4c2d58f
fixes nit
dipikabh Jun 10, 2024
782ca94
fixes a macro flaw
dipikabh Jun 10, 2024
52f92ae
adjust wording to match reference page
dipikabh Jun 10, 2024
75fed38
Merge branch 'main' into ff127-calc-color
bsmth Jun 11, 2024
90e3ad5
Apply suggestions from code review
dipikabh Jun 11, 2024
9e32c71
Update text to match experimental page
dipikabh Jun 11, 2024
f4a8638
Merge branch 'main' into ff127-calc-color
dipikabh Jun 11, 2024
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
44 changes: 42 additions & 2 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 @@ -1046,7 +1046,7 @@ The `<h1>` heading doesn't decrease in font size now when nested within [section

### `shape()` function

The CSS [`shape()`](/en-US/docs/Web/CSS/basic-shape/shape) function is a [`<basic-shape>`](/en-US/docs/Web/CSS/basic-shape) data type that enables you to define a shape in the {{cssxref("clip-path")}} and {{cssxref("offset-path")}} properties using one or more "shape commands". These commands are very similar to the [SVG path commands](/en-US/docs/Web/SVG/Attribute/d#path_commands). The `shape()` function is similar in some respects to the `{{cssxref("path","path()")}}` function, but unlike `path()`, which uses the [SVG path](/en-US/docs/Web/SVG/Element/path) syntax, `shape()` uses standard CSS syntax. This enables you to easily create and edit shapes and also allows the use of CSS math functions.
The CSS [`shape()`](/en-US/docs/Web/CSS/basic-shape/shape) function is a [`<basic-shape>`](/en-US/docs/Web/CSS/basic-shape) data type that enables you to define a shape in the {{cssxref("clip-path")}} and {{cssxref("offset-path")}} properties using one or more "shape commands". These commands are very similar to the [SVG path commands](/en-US/docs/Web/SVG/Attribute/d#path_commands). The `shape()` function is similar in some respects to the `{{cssxref("basic-shape/path","path()")}}` function, but unlike `path()`, which uses the [SVG path](/en-US/docs/Web/SVG/Element/path) syntax, `shape()` uses standard CSS syntax. This enables you to easily create and edit shapes and also allows the use of CSS math functions.
For more details, see [Firefox bug 1823463](https://bugzil.la/1823463) for the `shape()` function support in `clip-path`, [Firefox bug 1884424](https://bugzil.la/1884424) for the function's support in `offset-path`, and [Firefox bug 1884425](https://bugzil.la/1884425) for its interpolation support.

<table>
Expand Down Expand Up @@ -1127,7 +1127,7 @@ The CSS [`@starting-style`](/en-US/docs/Web/CSS/@starting-style) at-rule allows

### Symmetrical `letter-spacing`

The CSS `letter-spacing` property now splits the specified letter spacing evenly on both sides of each character. This is unlike the current behavior where spacing is added primarily to one side. This approach can improve text spacing, especially in mixed-directional text [Firefox bug 1891446](https://bugzil.la/1891446).
The CSS {{cssxref("letter-spacing")}} property now splits the specified letter spacing evenly on both sides of each character. This is unlike the current behavior where spacing is added primarily to one side. This approach can improve text spacing, especially in mixed-directional text [Firefox bug 1891446](https://bugzil.la/1891446).

<table>
<thead>
Expand Down Expand Up @@ -1165,6 +1165,46 @@ The CSS `letter-spacing` property now splits the specified letter spacing evenly
</tbody>
</table>

### `calc()` color channel support in relative colors

The CSS [`calc()`](/en-US/docs/Web/CSS/calc) function can now parse color channels in [relative colors](/en-US/docs/Web/CSS/CSS_colors/Relative_colors#using_math_functions), allowing you to correctly calculate changes to colors in different color spaces or while using different functional notations [Firefox bug 1889561](https://bugzil.la/1889561).

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

## SVG

### transition-behavior property
Expand Down
6 changes: 5 additions & 1 deletion files/en-us/mozilla/firefox/releases/127/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,11 @@ These features are newly shipped in Firefox 127 but are disabled by default. To

- **Symmetrical spacing with CSS `letter-spacing`:** `layout.css.letter-spacing.model`.

The CSS `letter-spacing` property now splits the specified letter spacing evenly on both sides of each character. This is unlike the current behavior where spacing is added primarily to one side. [Firefox bug 1891446](https://bugzil.la/1891446).
The CSS {{cssxref("letter-spacing")}} property now splits the specified letter spacing evenly on both sides of each character. This is unlike the current behavior where spacing is added primarily to one side [Firefox bug 1891446](https://bugzil.la/1891446).

- **`calc()` color channel support in relative colors:** `layout.css.relative-color-syntax.enabled`.

The CSS [`calc()`](/en-US/docs/Web/CSS/calc) function can now parse color channels in [relative colors](/en-US/docs/Web/CSS/CSS_colors/Relative_colors#using_math_functions) [Firefox bug 1889561](https://bugzil.la/1889561).

## Older versions

Expand Down