Today I Learned - Rocky Kev

TIL safe areas for mobile browsers

POSTED ON:

TAGS: css mobile mdn

Solution:

/* env(safe-area-inset-bottom) or -top  */

.cookieNotice {
  position: fixed;
  right: 0px;
  left: 0px;
  bottom: 0px;
  padding-bottom: calc( env(safe-area-inset-bottom) + 20px )
}

The problem you quickly encounter is that the visible viewport is not per se the same as the interactive viewport. Mobile browsers tend to prioritize essential UI elements (like the home-bar on IOS) for interactivity at all times.

Browsers do this by implementing something called ‘safe-areas’. Area’s that can’t be touched with user-interactions inside the browser.

To learn more about env()

/* Using the four safe area inset values with no fallback values */
env(safe-area-inset-top);
env(safe-area-inset-right);
env(safe-area-inset-bottom);
env(safe-area-inset-left);

/* Using them with fallback values */
env(safe-area-inset-top, 20px);
env(safe-area-inset-right, 1em);
env(safe-area-inset-bottom, 0.5vh);
env(safe-area-inset-left, 1.4rem);

via You have to start using this CSS property in your websites

Related TILs

Tagged: css

TIL the alternate keyword

If 'alternate' appears along with the stylesheet keyword, the linked file is an alternative stylesheet. It won’t be applied to the document, but it will be ready for when we need it.

TIL Logical Properties

For that sweet sweet Internationalization you want to avoid directional words like 'left', 'right', 'top', and 'bottom'.

TIL Using pseudo-classes in your querySelector!

let notTuna = document.querySelectorAll('.sandwich:not(.tuna)')