New Viewports in CSS

In March 2022, the W3C announced the addition of 20 new viewport units to CSS. These units, which are prefixed with sv, lv, and dv, allow developers to more precisely control the layout of their web pages on different devices.

The sv units represent the small viewport, which is typically used on mobile devices. The lv units represent the large viewport, which is typically used on desktop computers. The dv units represent the dynamic viewport, which can change size depending on the device and the user's actions.

For example, the following CSS code would set the width of an image to 100% of the small viewport:

Code snippet

img {
  width: 100sv;
}

This would ensure that the image is always the same width, regardless of the size of the device.

The new viewport units can be used to create more responsive and user-friendly web pages. By using these units, developers can ensure that their web pages look good and function properly on a wide range of devices.

Benefits of Using New Viewport Units

There are several benefits to using the new viewport units in CSS. These benefits include:

• Improved responsiveness: The new viewport units allow developers to create more responsive web pages that adapt to the size of the device being used. This can help to improve the user experience by ensuring that the web page is easy to read and navigate on any device.

• Increased flexibility: The new viewport units give developers more flexibility in how they control the layout of their web pages. This can help to create more visually appealing and user-friendly web pages.

• Reduced development time: The new viewport units can help to reduce the amount of time it takes to develop responsive web pages. This is because developers can use the new units to create a single set of CSS rules that will work on all devices.

How to Use New Viewport Units

The new viewport units are easy to use. To use them, simply add the sv, lv, or dv prefix to the name of the unit you want to use. For example, the following CSS code would set the width of an image to 100% of the small viewport:

Code snippet

img {
  width: 100sv;
}

You can also use the new viewport units in conjunction with other CSS properties, such as max-width and min-width. For example, the following CSS code would set the width of an image to 100% of the small viewport, but would prevent it from being wider than 300 pixels:

Code snippet

img {
  width: 100sv;
  max-width: 300px;
}

The new viewport units in CSS are a powerful tool that can be used to create more responsive and user-friendly web pages. By using these units, developers can ensure that their web pages look good and function properly on a wide range of devices.