From 3c91c067a4d36b532a4bce72e5d8a2c5a9279db5 Mon Sep 17 00:00:00 2001 From: Vadim Makeev Date: Fri, 27 Feb 2026 16:24:40 +0100 Subject: [PATCH 1/2] Add font-width property and descriptor (#42935) * Add font-width property and descriptor * Apply suggestions from code review Co-authored-by: Chris Mills * Sync changes across the docs * Update demo, add fallback screenshot * Apply sugestions from code review * Add fallback examples * Apply suggestions from code review Co-authored-by: Chris Mills * Update files/en-us/web/css/reference/properties/font-width/index.md Co-authored-by: Chris Mills * Apply suggestion from the code review * Add automation note --------- Co-authored-by: Chris Mills --- files/en-us/web/css/guides/fonts/index.md | 8 +- .../css/guides/fonts/variable_fonts/index.md | 2 +- .../at-rules/@font-face/font-stretch/index.md | 83 +++-- .../at-rules/@font-face/font-width/index.md | 207 +++++++++++ .../properties/font-stretch/index.md | 104 +++--- .../font-width/font-face-selection.png | Bin 0 -> 25505 bytes .../reference/properties/font-width/index.md | 340 ++++++++++++++++++ 7 files changed, 664 insertions(+), 80 deletions(-) create mode 100644 files/en-us/web/css/reference/at-rules/@font-face/font-width/index.md create mode 100644 files/en-us/web/css/reference/properties/font-width/font-face-selection.png create mode 100644 files/en-us/web/css/reference/properties/font-width/index.md diff --git a/files/en-us/web/css/guides/fonts/index.md b/files/en-us/web/css/guides/fonts/index.md index d377bdb6cf773c4..9a493c10768c578 100644 --- a/files/en-us/web/css/guides/fonts/index.md +++ b/files/en-us/web/css/guides/fonts/index.md @@ -28,7 +28,7 @@ The CSS fonts module also supports variable fonts. Unlike regular fonts, where e - {{cssxref("font-palette")}} - {{cssxref("font-size")}} - {{cssxref("font-size-adjust")}} -- {{cssxref("font-stretch")}} +- {{cssxref("font-width")}} and its legacy alias {{cssxref("font-stretch")}} - {{cssxref("font-style")}} - {{cssxref("font-weight")}} @@ -48,8 +48,6 @@ The CSS fonts module also supports variable fonts. Unlike regular fonts, where e - {{cssxref("font-variant-position")}} - {{cssxref("font-variation-settings")}} -The specification also defines the `font-width` property, which is not yet supported by any browser. - ### At-rules and descriptors - At-rule: {{cssxref("@font-face")}} @@ -59,7 +57,7 @@ The specification also defines the `font-width` property, which is not yet suppo - {{cssxref("@font-face/font-display", "font-display")}} - {{cssxref("@font-face/font-family", "font-family")}} - {{cssxref("@font-face/font-feature-settings", "font-feature-settings")}} - - {{cssxref("@font-face/font-stretch", "font-stretch")}} + - {{cssxref("@font-face/font-width", "font-width")}} and its legacy alias {{cssxref("@font-face/font-stretch", "font-stretch")}} - {{cssxref("@font-face/font-style", "font-style")}} - {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} - {{cssxref("@font-face/font-weight", "font-weight")}} @@ -68,7 +66,7 @@ The specification also defines the `font-width` property, which is not yet suppo - {{cssxref("@font-face/src", "src")}} - {{cssxref("@font-face/unicode-range", "unicode-range")}} -The CSS fonts module also defines the `font-language-override`, `font-named-instance`, `font-width`, `font-size`, `subscript-position-override`, `subscript-size-override`, `superscript-position-override`, and `superscript-size-override` descriptors. Currently, no browsers support these features. +The CSS fonts module also defines the `font-language-override`, `font-named-instance`, `font-size`, `subscript-position-override`, `subscript-size-override`, `superscript-position-override`, and `superscript-size-override` descriptors. Currently, no browsers support these features. - At-rule: {{cssxref("@font-feature-values")}} diff --git a/files/en-us/web/css/guides/fonts/variable_fonts/index.md b/files/en-us/web/css/guides/fonts/variable_fonts/index.md index 826bcb60752dee5..059d8afe750a9bb 100644 --- a/files/en-us/web/css/guides/fonts/variable_fonts/index.md +++ b/files/en-us/web/css/guides/fonts/variable_fonts/index.md @@ -167,7 +167,7 @@ font-stretch: 115%; font-variation-settings: "wdth" 115; ``` -Click "Play" in the code blocks below to edit the example in the MDN Playground. Edit the CSS code to play with font-width values. +Click "Play" in the code blocks below to edit the example in the MDN Playground. Edit the CSS code to play with font width values. ```html hidden live-sample___variable-fonts-width-example
diff --git a/files/en-us/web/css/reference/at-rules/@font-face/font-stretch/index.md b/files/en-us/web/css/reference/at-rules/@font-face/font-stretch/index.md index b4c7d1ba83a8a1e..fab3a804d5fa53b 100644 --- a/files/en-us/web/css/reference/at-rules/@font-face/font-stretch/index.md +++ b/files/en-us/web/css/reference/at-rules/@font-face/font-stretch/index.md @@ -7,11 +7,11 @@ sidebar: cssref --- > [!NOTE] -> The `font-stretch` descriptor was renamed to `font-width` in the [CSS Fonts specification](https://drafts.csswg.org/css-fonts/#font-stretch-desc). To preserve compatibility, the specification retains `font-stretch` as an alias for the `font-width` descriptor. +> The `font-stretch` descriptor was renamed to {{cssxref("@font-face/font-width")}} in the [CSS Fonts specification](https://drafts.csswg.org/css-fonts/#font-stretch-desc). To preserve compatibility, the specification retains `font-stretch` as a legacy alias for the `font-width` descriptor. The **`font-stretch`** [CSS](/en-US/docs/Web/CSS) descriptor allows authors to specify a normal, condensed, or expanded face for the fonts specified in the {{cssxref("@font-face")}} at-rule. -For a particular font family, authors can download various font faces which correspond to the different styles of the same font family, and then use the `font-stretch` descriptor to explicitly specify the font face's stretch. The values for the CSS descriptor is same as that of its corresponding font property. +For a particular font family, authors can download various font faces corresponding to the different styles of the same font family, and then use the `font-stretch` descriptor to specify the font face's stretch explicitly. ## Syntax @@ -30,27 +30,27 @@ font-stretch: 50%; font-stretch: 100%; font-stretch: 200%; -/* multiple values */ +/* Multiple values */ font-stretch: 75% 125%; font-stretch: condensed ultra-condensed; ``` -The `font-stretch` property is described using any one of the values listed below. +The `font-stretch` descriptor can take a single value from the list below. ### Values - `normal` - - : Specifies a normal font face. + - : Specifies a normally condensed font face. - `semi-condensed`, `condensed`, `extra-condensed`, `ultra-condensed` - - : Specifies a more condensed font face than normal, with ultra-condensed as the most condensed. + - : Specifies a more condensed font face than normal, with ultra-condensed being the most condensed. - `semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded` - - : Specifies a more expanded font face than normal, with ultra-expanded as the most expanded. + - : Specifies a more expanded font face than normal, with ultra-expanded being the most expanded. - `` - - : A {{cssxref("<percentage>")}} value between 50% and 200% (inclusive). Negative values are not allowed for this property. + - : A {{cssxref("<percentage>")}} value between 50% and 200% (inclusive). Negative values are not allowed for this descriptor. -In earlier versions of the `font-stretch` specification, the property accepts only the nine keyword values. CSS Fonts Level 4 extends the syntax to accept a `` value as well. This enables variable fonts to offer something more like a continuum of character widths. For TrueType or OpenType variable fonts, the "wdth" variation is used to implement varying widths. +In earlier versions of the `font-stretch` specification, the descriptor accepts only the nine keyword values. CSS Fonts Level 4 extends the syntax to accept a `` value as well. This enables variable fonts to offer a continuous variation of character widths. For TrueType or OpenType variable fonts, the `wdth` variation is used to implement varying widths. -If the font does not provide a face that exactly matches the given value, then values less than 100% map to a narrower face, and values greater than or equal to 100% map to a wider face. +If the font does not provide a face that exactly matches the given value, then values less than `100%` map to a condensed face, and values greater than or equal to `100%` map to an expanded face. ### Keyword to numeric mapping @@ -105,13 +105,13 @@ The table below shows the mapping between keyword values and numeric percentages ### Variable fonts -Most fonts have a particular width which corresponds to one of the keyterm values. However some fonts, called variable fonts, can support a range of stretching with more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight. For this, percentage ranges are useful. +Most fonts have a particular width that corresponds to one of the keyterm values. However, variable fonts can support a range of widths with fine granularity, giving the designer a greater degree of control over the chosen weight. For this, percentage ranges are useful. -For TrueType or OpenType variable fonts, the "wdth" variation is used to implement varying glyph widths. +For TrueType or OpenType variable fonts, the `wdth` variation is used to implement varying glyph widths. ## Accessibility -People with dyslexia and other cognitive conditions may have difficulty reading fonts that are too condensed, especially if the font has a [low contrast color ratio](/en-US/docs/Web/CSS/Reference/Properties/color#accessibility). +People with dyslexia and other cognitive conditions may have difficulty reading fonts that are too condensed, especially if the font has a [low color contrast ratio](/en-US/docs/Web/CSS/Reference/Properties/color#accessibility). - [MDN Understanding WCAG, Guideline 1.4 explanations](/en-US/docs/Web/Accessibility/Guides/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) - [Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) @@ -128,18 +128,48 @@ People with dyslexia and other cognitive conditions may have difficulty reading ### Setting a percentage range for font-stretch -The following find a local Open Sans font or import it, and allow using the font for normal, semi-condensed and semi-expanded states. +The following example uses the [League Mono](https://www.theleagueofmoveabletype.com/league-mono) font. It synthesizes different font families from the same font file using the `font-stretch` descriptor with different keywords and percentages. + +```html +

League Mono

+

League Mono

+

League Mono

+``` ```css @font-face { - font-family: "Open Sans"; - src: - local("Open Sans") format("woff2"), - url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); - font-stretch: 87.5% 112.5%; + font-family: "League Mono Ultra Condensed"; + src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype"); + font-stretch: ultra-condensed; /* same as 50% */ +} + +@font-face { + font-family: "League Mono Normal"; + src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype"); + font-stretch: 100%; /* same as normal */ +} + +@font-face { + font-family: "League Mono Ultra Expanded"; + src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype"); + font-stretch: ultra-expanded; /* same as 200% */ +} + +p:nth-child(1) { + font-family: "League Mono Ultra Condensed", sans-serif; +} + +p:nth-child(2) { + font-family: "League Mono Normal", sans-serif; +} + +p:nth-child(3) { + font-family: "League Mono Ultra Expanded", sans-serif; } ``` +{{EmbedLiveSample("Setting font stretch percentages", "100%", 200)}} + ## Specifications {{Specifications}} @@ -150,11 +180,12 @@ The following find a local Open Sans font or import it, and allow using the font ## See also -- {{cssxref("@font-face/font-display", "font-display")}} -- {{cssxref("@font-face/font-family", "font-family")}} -- {{cssxref("@font-face/font-weight", "font-weight")}} -- {{cssxref("@font-face/font-style", "font-style")}} -- {{cssxref("font-feature-settings", "font-feature-settings")}} -- {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} -- {{cssxref("@font-face/src", "src")}} +- Modern {{cssxref("@font-face/font-width")}} descriptor, replacing `font-stretch` +- {{cssxref("@font-face/font-display")}} descriptor +- {{cssxref("@font-face/font-family")}} descriptor +- {{cssxref("@font-face/font-weight")}} descriptor +- {{cssxref("@font-face/font-style")}} descriptor +- {{cssxref("font-feature-settings")}} descriptor +- {{cssxref("@font-face/font-variation-settings")}} descriptor +- {{cssxref("@font-face/src")}} descriptor - {{cssxref("@font-face/unicode-range", "unicode-range")}} descriptor diff --git a/files/en-us/web/css/reference/at-rules/@font-face/font-width/index.md b/files/en-us/web/css/reference/at-rules/@font-face/font-width/index.md new file mode 100644 index 000000000000000..fd6d17e1e9c3735 --- /dev/null +++ b/files/en-us/web/css/reference/at-rules/@font-face/font-width/index.md @@ -0,0 +1,207 @@ +--- +title: font-width +slug: Web/CSS/Reference/At-rules/@font-face/font-width +page-type: css-at-rule-descriptor +browser-compat: css.at-rules.font-face.font-width +sidebar: cssref +--- + +> [!NOTE] +> The `font-width` descriptor is the modern replacement for the {{cssxref("@font-face/font-stretch")}} descriptor, which is a legacy alias. While `font-width` is the specification's preferred name, `font-stretch` currently has broader browser support. Check the [fallback example](#providing_a_font-stretch_fallback) and [browser compatibility](#browser_compatibility) table for details. + +The **`font-width`** [CSS](/en-US/docs/Web/CSS) descriptor allows authors to specify a normal, condensed, or expanded face for the fonts specified in the {{cssxref("@font-face")}} at-rule. + +For a particular font family, authors can download various font faces corresponding to the different styles of the same font family, and then use the `font-width` descriptor to specify the font face's width explicitly. The available `font-width` descriptor values are the same as those of the corresponding {{cssxref("font-width")}} property. + +## Syntax + +```css +/* Single values */ +font-width: ultra-condensed; +font-width: extra-condensed; +font-width: condensed; +font-width: semi-condensed; +font-width: normal; +font-width: semi-expanded; +font-width: expanded; +font-width: extra-expanded; +font-width: ultra-expanded; +font-width: 50%; +font-width: 100%; +font-width: 200%; + +/* Multiple values */ +font-width: 75% 125%; +font-width: condensed ultra-condensed; +``` + +The `font-width` descriptor can take a single value from the list below. + +### Values + +- `normal` + - : Specifies a normally condensed font face. +- `semi-condensed`, `condensed`, `extra-condensed`, `ultra-condensed` + - : Specifies a more condensed font face than normal, with ultra-condensed being the most condensed. +- `semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded` + - : Specifies a more expanded font face than normal, with ultra-expanded being the most expanded. +- `` + - : A {{cssxref("<percentage>")}} value between 50% and 200% (inclusive). Negative values are not allowed for this descriptor. + +In earlier versions of the `font-width` specification, the descriptor accepts only the nine keyword values. CSS Fonts Level 4 extends the syntax to accept a `` value as well. This enables variable fonts to offer a continuous variation of character widths. For TrueType or OpenType variable fonts, the `wdth` variation is used to implement varying widths. + +If the font does not provide a face that exactly matches the given value, then values less than `100%` map to a condensed face, and values greater than or equal to `100%` map to an expanded face. + +### Keyword to numeric mapping + +The table below shows the mapping between keyword values and numeric percentages: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeywordPercentage
ultra-condensed50%
extra-condensed62.5%
condensed75%
semi-condensed87.5%
normal100%
semi-expanded112.5%
expanded125%
extra-expanded150%
ultra-expanded200%
+ +### Variable fonts + +Most fonts have a particular width that corresponds to one of the keyterm values. However, variable fonts can support a range of widths with fine granularity, giving the designer a greater degree of control over the chosen weight. For this, percentage ranges are useful. + +For TrueType or OpenType variable fonts, the `wdth` variation is used to implement varying glyph widths. + +## Accessibility + +People with dyslexia and other cognitive conditions may have difficulty reading fonts that are too condensed, especially if the font has a [low color contrast ratio](/en-US/docs/Web/CSS/Reference/Properties/color#accessibility). + +- [MDN Understanding WCAG, Guideline 1.4 explanations](/en-US/docs/Web/Accessibility/Guides/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) +- [Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) + +## Formal definition + +{{cssinfo}} + +## Formal syntax + +{{CSSSyntax("font-width")}} + +## Examples + +### Setting a percentage range for font-width + +The following example uses the [League Mono](https://www.theleagueofmoveabletype.com/league-mono) font. It synthesizes different font families from the same font file using the `font-width` descriptor with different keywords and percentages. + +```html +

League Mono

+

League Mono

+

League Mono

+``` + +```css +@font-face { + font-family: "League Mono Ultra Condensed"; + src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype"); + font-width: ultra-condensed; /* same as 50% */ +} + +@font-face { + font-family: "League Mono Normal"; + src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype"); + font-width: 100%; /* same as normal */ +} + +@font-face { + font-family: "League Mono Ultra Expanded"; + src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype"); + font-width: ultra-expanded; /* same as 200% */ +} + +p:nth-child(1) { + font-family: "League Mono Ultra Condensed", sans-serif; +} + +p:nth-child(2) { + font-family: "League Mono Normal", sans-serif; +} + +p:nth-child(3) { + font-family: "League Mono Ultra Expanded", sans-serif; +} +``` + +{{EmbedLiveSample("Setting font width percentages", "100%", 200)}} + +### Providing a font-stretch fallback + +Because `font-width` does not yet have broad browser support, you may want to include the legacy {{cssxref("@font-face/font-stretch")}} descriptor as a fallback. Place `font-stretch` before `font-width` so that supporting browsers use the modern descriptor: + +```css +@font-face { + font-family: "MyFont"; + src: url("myfont.woff2") format("woff2"); + font-stretch: condensed; /* for browsers that don't support font-width */ + font-width: condensed; +} +``` + +> [!NOTE] +> You can automate this fallback pattern using the [postcss-preset-env](https://preset-env.cssdb.org/) plugin for PostCSS, which includes the [postcss-font-width-property](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-font-width-property) transform to convert `font-width` declarations to `font-stretch` automatically. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- Legacy {{cssxref("@font-face/font-stretch")}} alias descriptor with better browser support +- {{cssxref("@font-face/font-display", "font-display")}} descriptor +- {{cssxref("@font-face/font-family", "font-family")}} descriptor +- {{cssxref("@font-face/font-weight", "font-weight")}} descriptor +- {{cssxref("@font-face/font-style", "font-style")}} descriptor +- {{cssxref("font-feature-settings", "font-feature-settings")}} property +- {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} descriptor +- {{cssxref("@font-face/src", "src")}} descriptor +- {{cssxref("@font-face/unicode-range", "unicode-range")}} descriptor diff --git a/files/en-us/web/css/reference/properties/font-stretch/index.md b/files/en-us/web/css/reference/properties/font-stretch/index.md index 2fddbfccd64bf0c..ca39fdd6db870bc 100644 --- a/files/en-us/web/css/reference/properties/font-stretch/index.md +++ b/files/en-us/web/css/reference/properties/font-stretch/index.md @@ -7,7 +7,7 @@ sidebar: cssref --- > [!NOTE] -> The `font-stretch` property was renamed to `font-width` in the [CSS Fonts specification](https://drafts.csswg.org/css-fonts/#font-stretch-prop). To preserve compatibility, the specification retains `font-stretch` as an alias for the `font-width` property. +> The `font-stretch` property was renamed to {{cssxref("font-width")}} in the [CSS Fonts specification](https://drafts.csswg.org/css-fonts/#font-stretch-prop). To preserve compatibility, the specification retains `font-stretch` as a legacy alias for the `font-width` property. The **`font-stretch`** [CSS](/en-US/docs/Web/CSS) property selects a normal, condensed, or expanded face from a font. @@ -55,7 +55,6 @@ font-stretch: 150%; font-family: "League"; font-style: normal; font-weight: normal; - font-stretch: 50% 200%; /* Required by Chrome - allow 50% to 200% */ } section { @@ -67,7 +66,7 @@ section { ## Syntax ```css -/* keyword values */ +/* Keyword values */ font-stretch: normal; font-stretch: ultra-condensed; font-stretch: extra-condensed; @@ -91,22 +90,22 @@ font-stretch: revert-layer; font-stretch: unset; ``` -This property may be specified as a single `` keyword value or a single {{cssxref("<percentage>")}} value. +This property may be specified as a single keyword or {{cssxref("<percentage>")}} value. ### Values - `normal` - - : Specifies a normal font face. + - : Specifies a normally condensed font face. - `semi-condensed`, `condensed`, `extra-condensed`, `ultra-condensed` - - : Specifies a more condensed font face than normal, with `ultra-condensed` as the most condensed. + - : Specifies a more condensed font face than normal, with `ultra-condensed` being the most condensed. - `semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded` - - : Specifies a more expanded font face than normal, with `ultra-expanded` as the most expanded. + - : Specifies a more expanded font face than normal, with `ultra-expanded` being the most expanded. - `` - : A {{cssxref("<percentage>")}} value between 50% and 200% (inclusive). Negative values are not allowed for this property. ### Keyword to numeric mapping -The table below shows the mapping between the `` keyword values and numeric percentages: +The table below shows the mapping between the keyword values and numeric percentages: | Keyword | Percentage | | ----------------- | ---------- | @@ -128,80 +127,88 @@ You can use `font-stretch` to select a condensed or expanded face from such font ### Font face selection -The face selected for a given value of `font-stretch` depends on the faces supported by the font in question. If the font does not provide a face that exactly matches the given value, then values less than 100% map to a narrower face, and values greater than or equal to 100% map to a wider face. +The face selected for a given value of `font-stretch` depends on the faces supported by the font in question. If the font does not provide a face that exactly matches the given value, then values less than `100%` map to a condensed face, and values greater than or equal to `100%` map to an expanded face. -The table below demonstrates the effect of supplying various different percentage values of `font-stretch` on two different fonts: +The table below demonstrates the effect of setting different percentage values of `font-stretch` on two different fonts: ```css hidden @font-face { font-family: "Inconsolata"; src: url("https://fonts.gstatic.com/s/inconsolata/v31/QlddNThLqRwH-OJ1UHjlKENVzlm-WkL3GZQmAwPyya15.woff2") format("woff2"); - font-stretch: 50% 200%; } @font-face { font-family: "Anek Malayalam"; src: url("https://fonts.gstatic.com/s/anekmalayalam/v4/6qLUKZActRTs_mZAJUZWWkhke0nYa-f6__Azq3-gP1W7db9_.woff2") format("woff2"); - font-stretch: 75% 125%; +} + +body { + font-family: system-ui; +} + +table { + border-collapse: collapse; + width: 100%; +} + +tbody th { + text-align: right; +} + +th, +td { + padding: 0.25rem; + font-weight: normal; + text-align: center; } td { border: solid; border-width: 1px; + font-size: 5rem; } -#inconsolata td { - font: - 90px "Inconsolata", - sans-serif; +.inconsolata { + font-family: "Inconsolata", sans-serif; } -#anek-malayalam td { - font: - 90px "Anek Malayalam", - sans-serif; + +.anek-malayalam { + font-family: "Anek Malayalam", sans-serif; } -#inconsolata td:nth-child(2), -#anek-malayalam td:nth-child(2) { + +td:nth-child(2) { font-stretch: 50%; } -#inconsolata td:nth-child(3), -#anek-malayalam td:nth-child(3) { +td:nth-child(3) { font-stretch: 62.5%; } -#inconsolata td:nth-child(4), -#anek-malayalam td:nth-child(4) { +td:nth-child(4) { font-stretch: 75%; } -#inconsolata td:nth-child(5), -#anek-malayalam td:nth-child(5) { +td:nth-child(5) { font-stretch: 87.5%; } -#inconsolata td:nth-child(6), -#anek-malayalam td:nth-child(6) { +td:nth-child(6) { font-stretch: 100%; } -#inconsolata td:nth-child(7), -#anek-malayalam td:nth-child(7) { +td:nth-child(7) { font-stretch: 112.5%; } -#inconsolata td:nth-child(8), -#anek-malayalam td:nth-child(8) { +td:nth-child(8) { font-stretch: 125%; } -#inconsolata td:nth-child(9), -#anek-malayalam td:nth-child(9) { +td:nth-child(9) { font-stretch: 150%; } -#inconsolata td:nth-child(10), -#anek-malayalam td:nth-child(10) { +td:nth-child(10) { font-stretch: 200%; } ``` ```html hidden - +
@@ -217,7 +224,7 @@ td { - + @@ -229,7 +236,7 @@ td { - + @@ -245,10 +252,10 @@ td {
Inconsolata e ee e
Anek Malayalam e e
``` -{{EmbedLiveSample('Font_face_selection', "100%", "300px")}} +{{EmbedLiveSample('Font face selection', "100%", "250px")}} -- [Anek Malayalam](https://fonts.google.com/specimen/Anek+Malayalam) is a variable google font that supports widths from 75% to 125%. Values below and above this range select the closest matching font. - [Inconsolata](https://fonts.google.com/specimen/Inconsolata) is a variable font that offers a continuous range of widths from 50% to 200%. +- [Anek Malayalam](https://fonts.google.com/specimen/Anek+Malayalam) is a variable google font that supports widths from 75% to 125%. Values below and above this range select the closest matching font. ## Formal definition @@ -256,7 +263,7 @@ td { ## Formal syntax -{{csssyntax("font-width")}} +{{csssyntax("font-stretch")}} ## Examples @@ -270,10 +277,9 @@ td { ```css @font-face { - src: url("https://mdn.github.io/shared-assets/fonts/LeagueMono-VF.ttf"); + src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype"); font-family: "LeagueMonoVariable"; font-style: normal; - font-stretch: 1% 500%; /* Required by Chrome */ } p { @@ -307,8 +313,10 @@ p { ## See also -- {{cssxref("font-style")}} -- {{cssxref("font-weight")}} +- {{cssxref("@font-face/font-stretch")}} descriptor for {{cssxref("@font-face")}} +- Modern {{cssxref("font-width")}} property, replacing `font-stretch` +- {{cssxref("font-style")}} property +- {{cssxref("font-weight")}} property - SVG {{SVGAttr("font-stretch")}} attribute - [Learn: Fundamental text and font styling](/en-US/docs/Learn_web_development/Core/Text_styling/Fundamentals) - [CSS fonts](/en-US/docs/Web/CSS/Guides/Fonts) module diff --git a/files/en-us/web/css/reference/properties/font-width/font-face-selection.png b/files/en-us/web/css/reference/properties/font-width/font-face-selection.png new file mode 100644 index 0000000000000000000000000000000000000000..09ece9ed960385ab41274ab41f159f5bf3c6f910 GIT binary patch literal 25505 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 [!NOTE] +> The `font-width` property is the modern replacement for {{cssxref("font-stretch")}}, which is a legacy alias. While `font-width` is the specification's preferred name, `font-stretch` currently has broader browser support. Check the [fallback example](#providing_a_font-stretch_fallback) and [browser compatibility](#browser_compatibility) table for details. + +The **`font-width`** [CSS](/en-US/docs/Web/CSS) property selects a normal, condensed, or expanded face from a font. + +{{InteractiveExample("CSS Demo: font-width")}} + +```css interactive-example-choice +font-width: condensed; +``` + +```css interactive-example-choice +font-width: expanded; +``` + +```css interactive-example-choice +font-width: ultra-expanded; +``` + +```css interactive-example-choice +font-width: 50%; +``` + +```css interactive-example-choice +font-width: 100%; +``` + +```css interactive-example-choice +font-width: 150%; +``` + +```html interactive-example +
+

+ London. Michaelmas term lately over, and the Lord Chancellor sitting in + Lincoln's Inn Hall. Implacable November weather. As much mud in the streets + as if the waters had but newly retired from the face of the earth, and it + would not be wonderful to meet a Megalosaurus, forty feet long or so, + waddling like an elephantine lizard up Holborn Hill. +

+
+``` + +```css interactive-example +@font-face { + src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype"); + font-family: "League"; + font-style: normal; + font-weight: normal; +} + +section { + font-size: 1.2em; + font-family: "League", sans-serif; +} +``` + +## Syntax + +```css +/* Keyword values */ +font-width: normal; +font-width: ultra-condensed; +font-width: extra-condensed; +font-width: condensed; +font-width: semi-condensed; +font-width: semi-expanded; +font-width: expanded; +font-width: extra-expanded; +font-width: ultra-expanded; + +/* Percentage values */ +font-width: 50%; +font-width: 100%; +font-width: 200%; + +/* Global values */ +font-width: inherit; +font-width: initial; +font-width: revert; +font-width: revert-layer; +font-width: unset; +``` + +This property may be specified as a single keyword or {{cssxref("<percentage>")}} value. + +### Values + +- `normal` + - : Specifies a normally condensed font face. +- `semi-condensed`, `condensed`, `extra-condensed`, `ultra-condensed` + - : Specifies a more condensed font face than normal, with `ultra-condensed` being the most condensed. +- `semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded` + - : Specifies a more expanded font face than normal, with `ultra-expanded` being the most expanded. +- `` + - : A {{cssxref("<percentage>")}} value between 50% and 200% (inclusive). Negative values are not allowed for this property. + +### Keyword to numeric mapping + +The table below shows the mapping between the keyword values and numeric percentages: + +| Keyword | Percentage | +| ----------------- | ---------- | +| `ultra-condensed` | 50% | +| `extra-condensed` | 62.5% | +| `condensed` | 75% | +| `semi-condensed` | 87.5% | +| `normal` | 100% | +| `semi-expanded` | 112.5% | +| `expanded` | 125% | +| `extra-expanded` | 150% | +| `ultra-expanded` | 200% | + +## Description + +Some font families offer additional faces in which the characters are narrower than the normal face (_condensed_ faces) or wider than the normal face (_expanded_ faces). + +You can use `font-width` to select a condensed or expanded face from such fonts. If the font you are using does not offer condensed or expanded faces, this property has no effect. + +### Font face selection + +The face selected for a given value of `font-width` depends on the faces supported by the font in question. If the font does not provide a face that exactly matches the given value, then values less than 100% map to a condensed face, and values greater than or equal to 100% map to an expanded face. + +The table below demonstrates the effect of setting different percentage values of `font-width` on two different fonts: + +```css hidden +@font-face { + font-family: "Inconsolata"; + src: url("https://fonts.gstatic.com/s/inconsolata/v31/QlddNThLqRwH-OJ1UHjlKENVzlm-WkL3GZQmAwPyya15.woff2") + format("woff2"); +} + +@font-face { + font-family: "Anek Malayalam"; + src: url("https://fonts.gstatic.com/s/anekmalayalam/v4/6qLUKZActRTs_mZAJUZWWkhke0nYa-f6__Azq3-gP1W7db9_.woff2") + format("woff2"); +} + +body { + font-family: system-ui; +} + +table { + border-collapse: collapse; + width: 100%; +} + +tbody th { + text-align: right; +} + +th, +td { + padding: 0.25rem; + font-weight: normal; + text-align: center; +} + +td { + border: solid; + border-width: 1px; + font-size: 5rem; +} + +.inconsolata { + font-family: "Inconsolata", sans-serif; +} + +.anek-malayalam { + font-family: "Anek Malayalam", sans-serif; +} + +td:nth-child(2) { + font-width: 50%; +} +td:nth-child(3) { + font-width: 62.5%; +} +td:nth-child(4) { + font-width: 75%; +} +td:nth-child(5) { + font-width: 87.5%; +} +td:nth-child(6) { + font-width: 100%; +} +td:nth-child(7) { + font-width: 112.5%; +} +td:nth-child(8) { + font-width: 125%; +} +td:nth-child(9) { + font-width: 150%; +} +td:nth-child(10) { + font-width: 200%; +} +``` + +```html hidden + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
50%62.5%75%87.5%100%112.5%125%150%200%
Inconsolataeeeeeeeee
Anek Malayalameeeeeeeee
+``` + +{{EmbedLiveSample('Font face selection', "100%", "250px")}} + +The following screenshot shows how the above table is rendered, in case your browser doesn't support the `font-width` property: + +![A two-row comparison table showing the lowercase letter e rendered at different widths (50%, 62.5%, 75%, 87.5%, 100%, 112.5%, 125%, 150%, 200%). The top row is labeled Inconsolata and the bottom row Anek Malayalam. Both fonts are sans-serif and Inconsolata's letters are slightly wider compared to Anek Malayalam's.](font-face-selection.png) + +- [Inconsolata](https://fonts.google.com/specimen/Inconsolata) is a variable font that offers a continuous range of widths from 50% to 200%. +- [Anek Malayalam](https://fonts.google.com/specimen/Anek+Malayalam) is a variable google font that supports widths from 75% to 125%. Values below and above this range select the closest matching font. + +## Formal definition + +{{cssinfo}} + +## Formal syntax + +{{csssyntax("font-width")}} + +## Examples + +### Setting font width percentages + +```html +

an elephantine lizard

+

an elephantine lizard

+

an elephantine lizard

+``` + +```css +@font-face { + src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype"); + font-family: "LeagueMonoVariable"; + font-style: normal; +} + +p { + font: + 1.5rem "LeagueMonoVariable", + sans-serif; +} + +.condensed { + font-width: 50%; +} + +.normal { + font-width: 100%; +} + +.expanded { + font-width: 200%; +} +``` + +{{EmbedLiveSample("Setting font width percentages", "100%", 200)}} + +### Providing a font-stretch fallback + +Because `font-width` does not yet have broad browser support, you may want to include the legacy {{cssxref("font-stretch")}} property as a fallback. Place `font-stretch` before `font-width` so that supporting browsers use the modern property: + +```css +p { + font-stretch: condensed; /* for browsers that don't support font-width */ + font-width: condensed; +} +``` + +> [!NOTE] +> You can automate this fallback pattern using the [postcss-preset-env](https://preset-env.cssdb.org/) plugin for PostCSS, which includes the [postcss-font-width-property](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-font-width-property) transform to convert `font-width` properties to `font-stretch` automatically. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{cssxref("@font-face/font-width")}} descriptor for {{cssxref("@font-face")}} +- Legacy {{cssxref("font-stretch")}} alias property with better browser support +- {{cssxref("font-style")}} property +- {{cssxref("font-weight")}} property +- SVG {{SVGAttr("font-stretch")}} attribute +- [Learn: Fundamental text and font styling](/en-US/docs/Learn_web_development/Core/Text_styling/Fundamentals) +- [CSS fonts](/en-US/docs/Web/CSS/Guides/Fonts) module From ffd9f9be1372d988194c6c3a539dedf20ee1b71c Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Fri, 27 Feb 2026 14:13:49 -0500 Subject: [PATCH 2/2] [WebDriver Classic] Add pages for Back, Forward, Refresh, Get Title, and New Session commands (#43109) * adds documentation for back command * adds documentation for forward command * adds documentation for gettitle command * adds documentation for refresh command * adds short-titles and removes links * replaces selenium example with curl and http protocol format * revert page title and intro changes * fixes broken links * fixes return value sections and updates see also * fixes review feedback * adds newsession command page * updates examples to use curl and http * replaces sessionId values with ID * Update intro desc --- .../reference/classic/commands/back/index.md | 66 ++++++++++++++++++ .../classic/commands/forward/index.md | 66 ++++++++++++++++++ .../classic/commands/gettitle/index.md | 59 ++++++++++++++++ .../classic/commands/newsession/index.md | 68 +++++++++++++++++++ .../classic/commands/refresh/index.md | 66 ++++++++++++++++++ 5 files changed, 325 insertions(+) create mode 100644 files/en-us/web/webdriver/reference/classic/commands/back/index.md create mode 100644 files/en-us/web/webdriver/reference/classic/commands/forward/index.md create mode 100644 files/en-us/web/webdriver/reference/classic/commands/gettitle/index.md create mode 100644 files/en-us/web/webdriver/reference/classic/commands/newsession/index.md create mode 100644 files/en-us/web/webdriver/reference/classic/commands/refresh/index.md diff --git a/files/en-us/web/webdriver/reference/classic/commands/back/index.md b/files/en-us/web/webdriver/reference/classic/commands/back/index.md new file mode 100644 index 000000000000000..d0bbdece80964f3 --- /dev/null +++ b/files/en-us/web/webdriver/reference/classic/commands/back/index.md @@ -0,0 +1,66 @@ +--- +title: Back +short-title: Back +slug: Web/WebDriver/Reference/Classic/Commands/Back +page-type: webdriver-command +browser-compat: webdriver.classic.Back +sidebar: webdriver +--- + +The _Back_ [command](/en-US/docs/Web/WebDriver/Reference/Classic/Commands) of the [WebDriver](/en-US/docs/Web/WebDriver) API navigates to the previous page in the browsing history. This is equivalent to clicking the browser's back button or calling {{domxref("History.back()")}} in JavaScript. + +## Syntax + +| Method | URI template | +| ----------------------------------------------------- | ---------------------------- | +| [`POST`](/en-US/docs/Web/HTTP/Reference/Methods/POST) | `/session/{session id}/back` | + +### URL parameters + +- `session id` + - : Identifier of the session. + +### Return value + +`null` if successful. + +### Errors + +- [Invalid session id](/en-US/docs/Web/WebDriver/Reference/Classic/Errors/InvalidSessionID) + - : Session does not exist. +- No such window + - : The [`window`](/en-US/docs/Web/API/Window) object has been discarded, indicating that the tab or window has been closed. +- Timeout + - : The navigation did not complete before its timeout expired. + +## Examples + +### Navigating back in browsing history + +With a WebDriver server running on `localhost:4444`, assume an active session has navigated to at least two pages. To navigate back to the previous page, use the `back` command, replacing `ID` with the `sessionId` from the [New Session](/en-US/docs/Web/WebDriver/Reference/Classic/Commands/NewSession) response: + +```bash +curl -i -H "Content-Type: application/json" -d '{}' http://localhost:4444/session/ID/back +``` + +The server responds with a null value to indicate success: + +```http +HTTP/1.1 200 OK +content-type: application/json; charset=utf-8 + +{"value":null} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [Forward command](/en-US/docs/Web/WebDriver/Reference/Classic/Commands/Forward) +- [Refresh command](/en-US/docs/Web/WebDriver/Reference/Classic/Commands/Refresh) diff --git a/files/en-us/web/webdriver/reference/classic/commands/forward/index.md b/files/en-us/web/webdriver/reference/classic/commands/forward/index.md new file mode 100644 index 000000000000000..94d1260474a8a52 --- /dev/null +++ b/files/en-us/web/webdriver/reference/classic/commands/forward/index.md @@ -0,0 +1,66 @@ +--- +title: Forward +short-title: Forward +slug: Web/WebDriver/Reference/Classic/Commands/Forward +page-type: webdriver-command +browser-compat: webdriver.classic.Forward +sidebar: webdriver +--- + +The _Forward_ [command](/en-US/docs/Web/WebDriver/Reference/Classic/Commands) of the [WebDriver](/en-US/docs/Web/WebDriver) API navigates to the next page in the browsing history. This is equivalent to clicking the browser's forward button or calling {{domxref("History.forward()")}} in JavaScript. + +## Syntax + +| Method | URI template | +| ----------------------------------------------------- | ------------------------------- | +| [`POST`](/en-US/docs/Web/HTTP/Reference/Methods/POST) | `/session/{session id}/forward` | + +### URL parameters + +- `session id` + - : Identifier of the session. + +### Return value + +`null` if successful. + +### Errors + +- [Invalid session id](/en-US/docs/Web/WebDriver/Reference/Classic/Errors/InvalidSessionID) + - : Session does not exist. +- No such window + - : The [`window`](/en-US/docs/Web/API/Window) object has been discarded, indicating that the tab or window has been closed. +- Timeout + - : The navigation did not complete before its timeout expired. + +## Examples + +### Navigating forward in browsing history + +With a WebDriver server running on `localhost:4444`, assume an active session has navigated to at least two pages and gone back. To navigate forward to the next page, use the `forward` command, replacing `ID` with the `sessionId` from the [New Session](/en-US/docs/Web/WebDriver/Reference/Classic/Commands/NewSession) response: + +```bash +curl -i -H "Content-Type: application/json" -d '{}' http://localhost:4444/session/ID/forward +``` + +The server responds with a null value to indicate success: + +```http +HTTP/1.1 200 OK +content-type: application/json; charset=utf-8 + +{"value":null} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [Back command](/en-US/docs/Web/WebDriver/Reference/Classic/Commands/Back) +- [Refresh command](/en-US/docs/Web/WebDriver/Reference/Classic/Commands/Refresh) diff --git a/files/en-us/web/webdriver/reference/classic/commands/gettitle/index.md b/files/en-us/web/webdriver/reference/classic/commands/gettitle/index.md new file mode 100644 index 000000000000000..9533bab555cb3e0 --- /dev/null +++ b/files/en-us/web/webdriver/reference/classic/commands/gettitle/index.md @@ -0,0 +1,59 @@ +--- +title: Get Title +short-title: Get Title +slug: Web/WebDriver/Reference/Classic/Commands/GetTitle +page-type: webdriver-command +browser-compat: webdriver.classic.GetTitle +sidebar: webdriver +--- + +The _Get Title_ [command](/en-US/docs/Web/WebDriver/Reference/Classic/Commands) of the [WebDriver](/en-US/docs/Web/WebDriver) API returns the document title of the current top-level browsing context. This is equivalent to reading the {{domxref("Document.title")}} property in JavaScript. + +## Syntax + +| Method | URI template | +| --------------------------------------------------- | ----------------------------- | +| [`GET`](/en-US/docs/Web/HTTP/Reference/Methods/GET) | `/session/{session id}/title` | + +### URL parameters + +- `session id` + - : Identifier of the session. + +### Return value + +A string containing the title of the current document, equivalent to the value of {{domxref("Document.title")}}. + +### Errors + +- [Invalid session id](/en-US/docs/Web/WebDriver/Reference/Classic/Errors/InvalidSessionID) + - : Session does not exist. +- No such window + - : The [`window`](/en-US/docs/Web/API/Window) object has been discarded, indicating that the tab or window has been closed. + +## Examples + +### Retrieving the page title + +With a WebDriver server running on `localhost:4444`, assume an active session has navigated to `https://example.org`. You can retrieve the document title by using the following command, replacing `ID` with the `sessionId` from the [New Session](/en-US/docs/Web/WebDriver/Reference/Classic/Commands/NewSession) response: + +```bash +curl -i http://localhost:4444/session/ID/title +``` + +The server responds with the document title as shown here: + +```http +HTTP/1.1 200 OK +content-type: application/json; charset=utf-8 + +{"value":"Example Domain"} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/webdriver/reference/classic/commands/newsession/index.md b/files/en-us/web/webdriver/reference/classic/commands/newsession/index.md new file mode 100644 index 000000000000000..871f76f94d90b0e --- /dev/null +++ b/files/en-us/web/webdriver/reference/classic/commands/newsession/index.md @@ -0,0 +1,68 @@ +--- +title: New Session +short-title: New Session +slug: Web/WebDriver/Reference/Classic/Commands/NewSession +page-type: webdriver-command +browser-compat: webdriver.classic.NewSession +sidebar: webdriver +--- + +The _New Session_ [command](/en-US/docs/Web/WebDriver/Reference/Classic/Commands) of the [WebDriver](/en-US/docs/Web/WebDriver) API creates a new WebDriver session with the browser. +The session identifier returned in the response is required for all subsequent commands. + +## Syntax + +| Method | URI template | +| ----------------------------------------------------- | ------------ | +| [`POST`](/en-US/docs/Web/HTTP/Reference/Methods/POST) | `/session` | + +### Payload + +- `capabilities` + - : Used to define the features the driver must satisfy when creating a new session. + See [Capabilities](/en-US/docs/Web/WebDriver/Reference/Classic/Capabilities#list_of_capabilities) for available options. + +### Response + +The response payload is a JSON object with: + +- `sessionId` + - : The unique identifier of the session. +- `capabilities` + - : The negotiated capabilities of the session. + +### Errors + +- Session not created + - : A new session could not be created. + +## Examples + +### Starting a new session + +With a WebDriver server running on `localhost:4444`, the following command starts a new WebDriver session requesting Firefox as the browser: + +```bash +curl -i -H "Content-Type: application/json" -d '{"capabilities": {"alwaysMatch": {"browserName": "firefox"}}}' http://localhost:4444/session +``` + +The output will look similar to the following, where `27c8437e-5e42-43f9-a26f-2db0fd509ec1` is the unique identifier of this session: + +```http +HTTP/1.1 200 OK +content-type: application/json; charset=utf-8 + +{"value":{"sessionId":"27c8437e-5e42-43f9-a26f-2db0fd509ec1","capabilities":{"acceptInsecureCerts":false,"browserName":"firefox","browserVersion":"147.0.4","pageLoadStrategy":"normal","platformName":"mac","proxy":{},"setWindowRect":true,"strictFileInteractability":false,"timeouts":{"implicit":0,"pageLoad":300000,"script":30000}}}} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [Capabilities](/en-US/docs/Web/WebDriver/Reference/Classic/Capabilities) diff --git a/files/en-us/web/webdriver/reference/classic/commands/refresh/index.md b/files/en-us/web/webdriver/reference/classic/commands/refresh/index.md new file mode 100644 index 000000000000000..885ace909857b65 --- /dev/null +++ b/files/en-us/web/webdriver/reference/classic/commands/refresh/index.md @@ -0,0 +1,66 @@ +--- +title: Refresh +short-title: Refresh +slug: Web/WebDriver/Reference/Classic/Commands/Refresh +page-type: webdriver-command +browser-compat: webdriver.classic.Refresh +sidebar: webdriver +--- + +The _Refresh_ [command](/en-US/docs/Web/WebDriver/Reference/Classic/Commands) of the [WebDriver](/en-US/docs/Web/WebDriver) API reloads the current page in the active browsing context. This is equivalent to clicking the browser's reload button or calling {{domxref("Location.reload()")}} in JavaScript. + +## Syntax + +| Method | URI template | +| ----------------------------------------------------- | ------------------------------- | +| [`POST`](/en-US/docs/Web/HTTP/Reference/Methods/POST) | `/session/{session id}/refresh` | + +### URL parameters + +- `session id` + - : Identifier of the session. + +### Return value + +`null` if successful. + +### Errors + +- [Invalid session id](/en-US/docs/Web/WebDriver/Reference/Classic/Errors/InvalidSessionID) + - : Session does not exist. +- No such window + - : The [`window`](/en-US/docs/Web/API/Window) object has been discarded, indicating that the tab or window has been closed. +- Unexpected alert open + - : A modal dialog was open, blocking this operation. + +## Examples + +### Reloading the current page + +With a WebDriver server running on `localhost:4444`, assume an active session has navigated to a page. To reload the current page, use the `refresh` command, replacing `ID` with the `sessionId` from the [New Session](/en-US/docs/Web/WebDriver/Reference/Classic/Commands/NewSession) response: + +```bash +curl -i -H "Content-Type: application/json" -d '{}' http://localhost:4444/session/ID/refresh +``` + +The server responds with a null value to indicate success: + +```http +HTTP/1.1 200 OK +content-type: application/json; charset=utf-8 + +{"value":null} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [Back command](/en-US/docs/Web/WebDriver/Reference/Classic/Commands/Back) +- [Forward command](/en-US/docs/Web/WebDriver/Reference/Classic/Commands/Forward)