{"componentChunkName":"component---src-templates-tags-js","path":"/tags/css-media-features/","result":{"data":{"allMarkdownRemark":{"totalCount":1,"edges":[{"node":{"id":"aba3b0f4-8b62-51e5-bbdd-4c71f3870a50","html":"

If you have ever tried to add responsiveness to your web application you would know it’s difficult or at least takes a while to get it right. As progressive web apps (PWAs) are the first class citizens on many devices with the ability to get installed, it’s even more important to make sure user’s have the best experience possible. But technology advances in a much faster pace. We have now foldable devices like the shiny new Microsoft Surface Duo which add more complexity to this equation.

\n\n

Problem

\n

What if you wanted to show your page across two screens without hiding the content under the middle edge? At least for now we don’t have any device with bending glass to be able to not worry about what appears where on the screen.

\n

In order to continue with this we need a demo application to make sure we’re on the same page. So let’s create one, say we have an image gallery which has 5 columns and someone is looking at it on their brand new Surface Duo:

\n\r\n
\r\n
\r\n \r\n
\r\n
Card title
\r\n

\r\n This card has supporting text below as a natural lead-in to\r\n additional content.\r\n

\r\n

\r\n Last updated 3 mins ago\r\n

\r\n
\r\n
\r\n
\r\n \r\n
\r\n
Card title
\r\n

\r\n This card has supporting text below as a natural lead-in to\r\n additional content.\r\n

\r\n

\r\n Last updated 3 mins ago\r\n

\r\n
\r\n
\r\n
\r\n \r\n
\r\n
Card title
\r\n

\r\n This card has supporting text below as a natural lead-in to\r\n additional content.\r\n

\r\n

\r\n Last updated 3 mins ago\r\n

\r\n
\r\n
\r\n
\r\n \r\n
\r\n
Card title
\r\n

\r\n This card has supporting text below as a natural lead-in to\r\n additional content.\r\n

\r\n

\r\n Last updated 3 mins ago\r\n

\r\n
\r\n
\r\n
\r\n \r\n
\r\n
Card title
\r\n

\r\n This card has supporting text below as a natural lead-in to\r\n additional content.\r\n

\r\n

\r\n Last updated 3 mins ago\r\n

\r\n
\r\n
\r\n
\r\n \r\n
\r\n
Card title
\r\n

\r\n This card has supporting text below as a natural lead-in to\r\n additional content.\r\n

\r\n

\r\n Last updated 3 mins ago\r\n

\r\n
\r\n
\r\n
\r\n \r\n
\r\n
Card title
\r\n

\r\n This card has supporting text below as a natural lead-in to\r\n additional content.\r\n

\r\n

\r\n Last updated 3 mins ago\r\n

\r\n
\r\n
\r\n
\r\n \r\n
\r\n
Card title
\r\n

\r\n This card has supporting text below as a natural lead-in to\r\n additional content.\r\n

\r\n

\r\n Last updated 3 mins ago\r\n

\r\n
\r\n
\r\n
\r\n`, `19892596453604463000`)\"\n >\n \n Copy\n \n \n
<div class=\"gallery\">\r\n  <div class=\"grid\">\r\n    <div class=\"card\">\r\n      <img\r\n        class=\"card-img-top\"\r\n        src=\"https://picsum.photos/200/200?random=5\"\r\n        alt=\"Card image cap\"\r\n      />\r\n      <div class=\"card-body\">\r\n        <h5 class=\"card-title\">Card title</h5>\r\n        <p class=\"card-text\">\r\n          This card has supporting text below as a natural lead-in to\r\n          additional content.\r\n        </p>\r\n        <p class=\"card-text\">\r\n          <small class=\"text-muted\">Last updated 3 mins ago</small>\r\n        </p>\r\n      </div>\r\n    </div>\r\n    <div class=\"card p-3\">\r\n      <img\r\n        class=\"card-img-top\"\r\n        src=\"https://picsum.photos/200/200?random=4\"\r\n        alt=\"Card image cap\"\r\n      />\r\n      <div class=\"card-body\">\r\n        <h5 class=\"card-title\">Card title</h5>\r\n        <p class=\"card-text\">\r\n          This card has supporting text below as a natural lead-in to\r\n          additional content.\r\n        </p>\r\n        <p class=\"card-text\">\r\n          <small class=\"text-muted\">Last updated 3 mins ago</small>\r\n        </p>\r\n      </div>\r\n    </div>\r\n    <div class=\"card\">\r\n      <img\r\n        class=\"card-img-top\"\r\n        src=\"https://picsum.photos/200/200?random=3\"\r\n        alt=\"Card image cap\"\r\n      />\r\n      <div class=\"card-body\">\r\n        <h5 class=\"card-title\">Card title</h5>\r\n        <p class=\"card-text\">\r\n          This card has supporting text below as a natural lead-in to\r\n          additional content.\r\n        </p>\r\n        <p class=\"card-text\">\r\n          <small class=\"text-muted\">Last updated 3 mins ago</small>\r\n        </p>\r\n      </div>\r\n    </div>\r\n    <div class=\"card\">\r\n      <img\r\n        class=\"card-img-top\"\r\n        src=\"https://picsum.photos/200/200?random=2\"\r\n        alt=\"Card image cap\"\r\n      />\r\n      <div class=\"card-body\">\r\n        <h5 class=\"card-title\">Card title</h5>\r\n        <p class=\"card-text\">\r\n          This card has supporting text below as a natural lead-in to\r\n          additional content.\r\n        </p>\r\n        <p class=\"card-text\">\r\n          <small class=\"text-muted\">Last updated 3 mins ago</small>\r\n        </p>\r\n      </div>\r\n    </div>\r\n    <div class=\"card\">\r\n      <img\r\n        class=\"card-img-top\"\r\n        src=\"https://picsum.photos/200/200?random=1\"\r\n        alt=\"Card image cap\"\r\n      />\r\n      <div class=\"card-body\">\r\n        <h5 class=\"card-title\">Card title</h5>\r\n        <p class=\"card-text\">\r\n          This card has supporting text below as a natural lead-in to\r\n          additional content.\r\n        </p>\r\n        <p class=\"card-text\">\r\n          <small class=\"text-muted\">Last updated 3 mins ago</small>\r\n        </p>\r\n      </div>\r\n    </div>\r\n    <div class=\"card\">\r\n      <img\r\n        class=\"card-img-top\"\r\n        src=\"https://picsum.photos/200/200?random=7\"\r\n        alt=\"Card image cap\"\r\n      />\r\n      <div class=\"card-body\">\r\n        <h5 class=\"card-title\">Card title</h5>\r\n        <p class=\"card-text\">\r\n          This card has supporting text below as a natural lead-in to\r\n          additional content.\r\n        </p>\r\n        <p class=\"card-text\">\r\n          <small class=\"text-muted\">Last updated 3 mins ago</small>\r\n        </p>\r\n      </div>\r\n    </div>\r\n    <div class=\"card\">\r\n      <img\r\n        class=\"card-img-top\"\r\n        src=\"https://picsum.photos/200/200?random=8\"\r\n        alt=\"Card image cap\"\r\n      />\r\n      <div class=\"card-body\">\r\n        <h5 class=\"card-title\">Card title</h5>\r\n        <p class=\"card-text\">\r\n          This card has supporting text below as a natural lead-in to\r\n          additional content.\r\n        </p>\r\n        <p class=\"card-text\">\r\n          <small class=\"text-muted\">Last updated 3 mins ago</small>\r\n        </p>\r\n      </div>\r\n    </div>\r\n    <div class=\"card\">\r\n      <img\r\n        class=\"card-img-top\"\r\n        src=\"https://picsum.photos/200/200?random=9\"\r\n        alt=\"Card image cap\"\r\n      />\r\n      <div class=\"card-body\">\r\n        <h5 class=\"card-title\">Card title</h5>\r\n        <p class=\"card-text\">\r\n          This card has supporting text below as a natural lead-in to\r\n          additional content.\r\n        </p>\r\n        <p class=\"card-text\">\r\n          <small class=\"text-muted\">Last updated 3 mins ago</small>\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>
\n

And in our CSS file we just put a 5 column layout for the card column like so:

\n\n \n Copy\n \n \n
.grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(5, 1fr);\r\n  grid-row: auto;\r\n}
\n

Don’t worry too much about the code, you can view the result here on Glitch. Now to test how this page looks like you either have to have the device handy, or if you don’t have it like me, just use the Surface Duo Emulator which I find really cool. For example, here is how the page looks like at the moment:

\n

\n \n \n \n \n

\n

You can see right away that it’s not a good look, I mean who would be willing to spend a second on this site? So how do we fix it? I think we’re now on the same page, so let’s dive in.

\n

Solution

\n

But don’t you worry, we’ve got you covered by two brand new experimental APIs that will enable you to effectively lay your elements on the screen where you want them to be.

\n\n

The former along with a set of environment variables allows you to be aware of the geometry of the fold. The latter is an API which can be used alongside the media feature to work with non-DOM targets like Canvas 2D and WebGL.

\n

Detecting display regions

\n

As I mentioned earlier, the **screen-spanning** media feature allows you to be aware of the fact that the page is spanned across multiple display regions. But how do we use it? Let’s have a look at the syntax. At its core, you will have the ability to use the below media query:

\n) { }`, `36956363103602770000`)\"\n >\n \n Copy\n \n \n
@media (screen-spanning: <value>) { }
\n

The allowed values are:

\n
    \n
  • single-fold-vertical: which describes the state of the viewport, when it’s spanning across a single fold and the fold’s posture is vertical. This would mean the device is in double portrait mode like below:
    • \n
\n

\n \n \n \n \"double\n \n
\n Image from Microsoft Surface Duo blog\n

\n

The code for this mode would be:

\n\n \n Copy\n \n \n
@media (screen-spanning: single-fold-vertical) { \r\n  /* styles applied in double-portrait (wide) mode */ \r\n}
\n
    \n
  • single-fold-horizontal: which describes the state of the viewport, when it’s spanning across a single fold but this time the posture is horizontal. This would match the double portrait tall mode like below:
    • \n
\n

\n \n \n \n \n \n

\n

Now is the time to fix the two middle columns. One way to fix the middle column problem is to add an empty column which has no content. But it’s easier said than done. If you’re willing to play with the width of the columns, you can get away with something like this:

\n\n \n Copy\n \n \n
@media (screen-spanning: single-fold-vertical) {\r\n  .grid {    \r\n    grid-template-columns: repeat(4, 23%);\r\n    grid-gap: 25px;\r\n  }\r\n  .card:nth-child(4n + 2) {\r\n    margin-right: 5px;\r\n  }\r\n  .card:nth-child(4n + 3) {\r\n    margin-left: 10px;\r\n  }\r\n}
\n

This will result in:

\n

\n \n