Breaking Out of the Box

CSS is about styling boxes. In fact, the whole web is made of boxes, from the browser viewport to elements on a page. But every once in a while a new feature comes along that makes us rethink our design approach. Round displays , for example, make it fun to play with circular clip areas. Mobile screen notches and virtual keyboards offer challenges to best organize content that stays clear of them. And dual screen or foldable devices make us rethink how to best use available space in a number of different device postures . Sketches of a round display, a common rectangular mobile display, and a device with a foldable display. These recent evolutions of the web platform made it both more challenging and more interesting to design products. They’re great opportunities for us to break out of our rectangular boxes. I’d like to talk about a new feature similar to the above: the Window Controls Overlay for Progressive Web Apps (PWAs). Progressive Web Apps are blurring the lines between apps an