[CSS] Add svh/svw, lvh/lvw, dvh/dvw length units

[Rumyra]

Acceptance Criteria

• The listed features are documented sufficiently on MDN
• BCD is updated
• Interactive example and data repos are updated if appropriate
• The content has been reviewed as needed

For folks helping with Firefox related documentation

• Set bugs to dev-doc-complete
• Add entry to Firefox release notes if feature is enabled in release
  or
• Add entry to Firefox experimental features page if feature is not yet enabled in release

Features to document

Add svh/svw, lvh/lvw, dvh/dvw length units (and *i/*b logical versions)

Related Gecko bugs

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

[manuelmeister]

This has also shipped in Safari 15.4

[dipikabh]

Status:

• The listed features are documented sufficiently on MDN
  Document new svh/svw, lvh/lvw, dvh/dvw etc. viewport-percentage relative length units #16679
• BCD is updated
  Update length BCD table for new viewport-percentage units browser-compat-data#16449
• Interactive example and data repos are updated if appropriate - NA
• The content has been reviewed as needed
• Set bug to dev-doc-complete
• Add entry to Firefox release notes if feature is enabled in release
  Add support for new viewport sizes to FF 101 release note #16700
• Add entry to Firefox experimental features page if feature is not yet enabled in release - NA

[dipikabh]

Hi @queengooborg, I need your help with this feature. The BCD table requires an update.
MDN page: https://developer.mozilla.org/en-US/docs/Web/CSS/length#browser_compatibility
BCD table: https://github.com/mdn/browser-compat-data/blob/main/css/types/length.json

Specifically,

• vb and vi units need to be marked as experimental in the table (they are marked experimental in content). Please let me know if thats not correct so then I will update in the content as well.
• New entries need to be added to the table for:
  dvb, dvh, dvi, dvmax, dvmin, dvw,
  lvb, lvh, lvi, lvmax, lvmin, lvw,
  svb, svh, svi, svmax, svmin, svw
  I'm not sure if these entries can be grouped, such as into dv*, lv*, and sv*, to avoid making the table too long or whether it would be more technically accurate to have separate entries for each of them irrespective of the table length.
  There's also this comment about support in Safari 15.4, though I am not sure if that would make vb, vi, and all their variants standard.

I'd really appreciate your help in updating the table BCD for this feature.
Update: I opened a PR after Hamish's explainer. Check mdn/browser-compat-data#16449

[hamishwillee]

@dipikabh I'll help you get started with this.

vb and vi units need to be marked as experimental in the table (they are marked experimental in content). Please let me know if thats not correct so then I will update in the content as well.

I don't think this is correct. The compat table right now show that vb and vi are supported in Safari 15.4. So normally yes, you'd just set the experimental flag for these to true.

But this fix that you are documenting implements them in Firefox right? (thats' what I see here https://hg.mozilla.org/mozilla-central/rev/d9a19df80e22, and there is no obvious preference hiding it).

So basically this will be implemented in two browser engines and is hence no longer experimental. The actions you need to take (if I am correct in my assumptions above) are:

• remove the experimental tagging from MDN docs.
• add FF version 101 for those two features in BCD

Make sense?

There's also this #15465 (comment) about support in Safari 15.4, though I am not sure if that would make vb, vi, and all their variants standard.

It makes no difference for vi, vb because those are already recorded in the BCD as supported in this version. But as discussed above, those ones are no longer experimental once both FF and Safari support the features.

Quick search on "Safari 15.4 Release notes" brings up https://developer.apple.com/documentation/safari-release-notes/safari-15_4-release-notes#New-Features

"Added support for small (svw, svh, svi, svb, svmin, svmax), large (lvw, lvh, lvi, lvb, lvmin, lvmax), dynamic (dvw, dvh, dvi, dvb, dvmin, dvmax), and logical (vi, vb) viewport units.

You'll need to check the mapping, but that looks like they have 1:1 parity with Firefox - so we need to add entries for these for both Safari and FF.

For due diligence you'd do a basic web search on Chrome too. CanIuse thinks they are implemented behind a flag so worth doing some testing to verify https://caniuse.com/viewport-unit-variants

New entries need to be added to the table for: dvb, dvh, dvi, dvmax, dvmin, dvw, lvb, lvh, lvi, lvmax, lvmin, lvw, svb, svh, svi, svmax, svmin, svw
I'm not sure if these entries can be grouped, such as into dv*, lv*, and sv*, to avoid making the table too long or whether it would be more technically accurate to have separate entries for each of them irrespective of the table length.

BCD is about identifying compatibility differences. If all the browser engines are likely to release the same sets of functionality together they could be grouped. In that case it could be a single feature like viewport_units_large_small_dynamic.
if you're wrong then at some point someone will have to split up the table.

If you don't have a good feel for how the features will be delivered you can split them up a bit finer to start with. If it were me I'd split into subfeatures: viewport_units_large, viewport_units_small, viewport_units_dynamic. The description would list the supported variants like dvb, dvh, dvi, dvmax, dvmin

Enough to get you started?

[dipikabh]

Thanks, @hamishwillee! Yes, that is very very helpful. I can definitely give it a go.