Document new svh/svw, lvh/lvw, dvh/dvw etc. viewport-percentage relative length units

[dipikabh]

Summary

• In Firefox release 101, new viewport sizes have been introduced: small (s), large (l), and dynamic (d).
  As a result, the existing viewport-percentage length units (vw, vh, vmin, vmax) can have more variants.
  Each can be of the type s, l, d resulting in:
  svw, lvw, dvw,
  svh, lvh, dvh,
  svmin, lvmin, dvmin,
  svmax, lvmax, dvmax
• vw, vh, vmin, vmax were already documented on this page (these are now considered the browser defaults).
  This PR adds a section to explain small (s), large (l), and dynamic (d) viewport sizes and also adds info about the new variants in the respective vw, vh, vmin, vmax sections.
• Additionally, in this PR:

  • Minor edits have been made to the rest of the page to improve clarity and some more info from the spec has been added like specified and computed lengths

  • The existing page had heading levels going up to <h5> in the Syntax section. This has been fixed to avoid going below the heading level <h3>.
    Current structure:
    ## Syntax
### Units
#### Relative length units
##### Font-relative lengths
##### Viewport-percentage lengths
#### Absolute length units

    New structure in this PR:
    ## Syntax
    The length units can be relative or absolute.
    The relative length units listed here are based on font and viewport.
    ### Relative length units based on font
### Relative length units based on viewport
### Absolute length units

Motivation

https://drafts.csswg.org/css-values/#viewport-relative-lengths

Supporting details

https://bugzilla.mozilla.org/show_bug.cgi?id=1610815

Related issues

Doc issue tracking this work: #15465

Metadata

• Adds a new document
• Rewrites (or significantly expands) a document
• Fixes a typo, bug, or other error

[github-actions]

Preview URLs

• https://pr16679.content.dev.mdn.mozit.cloud/en-US/docs/Web/CSS/length

Flaws

None! 🎉

External URLs

URL: /en-US/docs/Web/CSS/length
Title: <length>
on GitHub

• https://en.wikipedia.org/wiki/X-height (1 time) (Note! This may be a new URL 👀)

(this comment was updated 2022-05-26 20:34:10.491909)

[Rumyra]

Looks great @dipikabh - some really good improvements 👍

[dipikabh]

Looks great @dipikabh - some really good improvements 👍

Thanks for the quick turnaround with the review, @Rumyra!