CSS Round Display Level 1 | Responsive Web Design

CSS Round Display Level 1

I feel like I’m a million years behind… Alright, so that’s an exaggeration, but I’m certainly a couple of months behind. CSS Round Display tells the web pages how to behave on a non rectangular screen – or like it is literally called – on a round display. Although this specification was developed by a team at LG Electronics for their smart watches,┬áthis is precisely the specification we’re going to use to get around (pun intended) the notch on the Iphone X and ensure that all of our websites won’t have white bars down the sides on Landscape mode.

CSS Round Display Weather App

Conventionally, web pages have been shown through a rectangular screen such as PC, tablet, and smart phone. The window content area in a web browser is a rectangle. Each HTML element follows the W3C box model and thus is also a rectangle.
Nowadays, devices come in varied shapes of the displays. It needs to consider the shape of the display when implementing web pages on devices. However, current web standards lack some features to support the devices as follows:

  1. Lack of the capability to detect the shape of a display
  2. Lack of layout mechanisms suitable for the shape of a display
An excerpt from CSS Round Display Level 1

View original article

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.