CSS updates introduce dynamic viewport units and hover detection

New developments in CSS are providing web developers with more precise tools to handle the diversity of modern device displays and input methods.

To address the challenges posed by mobile browser UI elements—such as URL bars that slide in and out of view—new viewport units have been introduced. These include large (lvh, lvw), small (svh, svw), and dynamic (dvh, dvw) units. These allow designers to define whether an element should occupy the space available when browser chrome is visible, when it is hidden, or adjust dynamically as the UI changes.

Additionally, the CSS Level 5 Media Queries specification introduces the 'hover' feature to better detect user input methods. Rather than relying solely on screen size, developers can now use media queries to determine if a user’s primary pointing device is capable of hovering, such as a mouse, or if they are using touch input. This allows for more sophisticated responsive design that accounts for how users interact with a page regardless of the device's physical dimensions.