Units to improve accessibility and user experience
''Intercop 2022' is a project announced by Google, Microsoft, Apple and the Mozzilla Foundation to make all browsers offer the same web experience.
The project has 15 focus areas and one of them is to add more graphic window size units, for better compatibility between browsers and mobile devices.
New units
Before we only had "vh" and "vw" to set the size of the graphic window, now we have three more units that will help us a lot to facilitate the creation of designs for any device, especially for mobile devices since today is the devices with which we navigate the most.
Large viewport (lvh y lvw)
The large window is the one that does not show any dynamic browser interface.
On a mobile device, 100lvh and 100lvw would be equivalent to the entire screen size without any browser elements..
Small viewport (svh y svw)
The small window is where all browser interfaces are displayed, so 100svh and 100svw will be sized exactly to fit inside the interface.
This unit is ideal when trying to maintain a relative size to the graphic window and at the same time take into account the active elements of the browser.
Dynamic viewport (dvh y dvw)
It works as a combination of the above.
The window is resized when browser interface elements appear or are hidden. This set of units is very useful for the elements to adapt automatically according to the navigation.
Compatibility
More than 85% of browsers support these units of measurement, so they can be applied to almost any case without any problems.
You can see it in: caniuse.com
Conclusion
It is undeniable that these new size measurements are and will be increasingly useful because they will facilitate the creation of designs that fill the visible window on mobile devices taking into account the address bar.
I hope you found it useful, thank you very much!
