Breaking Out of the Box

CSS is primarily used for styling rectangular boxes, but new features are pushing the boundaries of design. The Window Controls Overlay for PWAs allows developers to take advantage of the entire app window, including the title bar area. The feature removes the physical constraint of the title bar and window controls, enabling them to be overlaid on the application's content. To use the feature, add "window-controls-overlay" to the web app's manifest file. New CSS environment variables, such as "titlebar-area-x" and "titlebar-area-width," can be used to position content where the title bar would have been while ensuring it doesn't overlap with the window controls. To prevent the window control buttons from covering content, the app's theme color can be set to match the content background color using the web app manifest file or the "theme-color" meta tag. This feature allows PWAs to create more immersive and integrated experiences on desktop devices.