New graphic window units - CSS

Units to improve accessibility and user experience

by Laura Celis Ballesta Date: 22-06-2023 css viewport

''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!

 
by Laura Celis Ballesta Date: 22-06-2023 css viewport hits : 1073  
 
 
 
 

Related Posts

Let's create a Color Picker from scratch with HTML5 Canvas, Javascript and CSS3

HTML5 Canvas is a technology that allows developers to generate real-time graphics and animations using JavaScript. It provides a blank canvas on which graphical elements, such as lines, shapes, images…

Why shouldn't we use black?

Nowadays it is becoming more and more common for web pages to have the option to set them in dark mode, or to base their aesthetics directly on black or…

How to make your own custom cursor for your website

When I started browsing different and original websites to learn from them, one of the first things that caught my attention was that some of them had their own cursors,…

Nesting: future proofing CSS

Although not currently supported by browsers, there is a proposal for CSS nesting to support a feature that would provide better readability to native CSS, so in the future it…

Use the SRCSET attribute to improve your SEO

There is a new standard HTML attribute that can be used in conjunction with IMG called SRCSET. It is new and important as it allows webmasters to display different images…

Starting with Bootstrap-Vue step by step

Today we will show you how to use BootstrapVue, describe the installation process and show basic functionality. The project’s based on the world's most popular CSS framework - Bootstrap, for building…

Bootstrap 5 beta2. What offers?

Since the release of the Bootstrap 4 is three years, in this article we will present what is new in the world’s most popular framework for building responsive, mobile-first sites.…

Creating simple CSS spinner-loader

In today's article we will show you how to animate a basic loader that spins when some predefined action is defined, such as loading an image. That can be used…

How to use Parallax.js effect on your website

Today, we're going to write about the parallax effect, similar to parallax scrolling, and how to implement it to improve your landing page. In webdev, they say mobile first -…

How to make the website's dark mode persistent with Local Storage, CSS and JS

Recently we wrote about how to do a switchable alternative color mode or theme, a very useful and popular feature to websites. Today’s article is going to be about how…

The easiest way to align items using flexbox

With the release of flexbox in CSS, it has become an essential tool when placing elements next to each other, since, by default, the children of a display: flexare stacked…

Dark Mode on website using CSS and JavaScript

In today’s article we are going to learn how to build pretty much standard these days on the web pages and that is the alternative color mode and switching between…

Clicky