SSF-U - Single Standard for Fullscreen

Definitions

The SSF-U standard defines requirements for the semantics, accessibility, and logic of fullscreen.

Structure and Semantics

Setting Up the Environment

For the HTML file to function correctly, the viewport meta tag with the values width=device-width, initial-scale=1.0, viewport-fit=cover is required.

The content utilizes the entire physical screen area, including the areas below the “notch” and the Home system indicator, containers and panels must scale correctly to fit the entire screen without cropping important content.

Dynamic height

The primary unit of measurement, dvb, helps recalculate the available space when browser panels appear or disappear:

.fullscreen {
  min-block-size: 100dvb; /* dynamic height */
}

Accessibility

On modern smartphones, the bottom part of the screen is reserved for the system gesture bar env(safe-area-inset-bottom), which prevents the app from accidentally closing when the bottom buttons are pressed:

.bottom-action-panel {
  padding-block-end: calc(var(--safe-offset) + env(safe-area-inset-bottom));
}

“Down” icon

This informs the user that content is present below the fold; the variable is used to ensure the icon always remains above the panel:

.scroll-indicator {
  inset-block-end: calc(5px + env(safe-area-inset-bottom));
  inset-inline-start: 50%;
  transform: translateX(-50%);
}

Interactivity and Visual Feedback

Scroll and Keyboard Control

To prevent rubberband scrolling, you can use the following code:

.main-screen {
  overscroll-behavior-block: none;
}

Example of full implementation

:root {
  --safe-offset: 16px; /* default padding for buttons and icons */
}

.fullscreen {
  min-block-size: 100dvb;
  display: flex;
  flex-direction: column;
  overscroll-behavior-block: none;
}

.bottom-action-panel {
  position: fixed;
  inset-block-end: 0;
  inline-size: 100%;
  padding-block-end: calc(var(--safe-offset) + env(safe-area-inset-bottom));
  background-color: #ffffff;
}

.scroll-indicator {
  position: absolute;
  inset-block-end: calc(5px + env(safe-area-inset-bottom));
  inset-inline-start: 50%;
  transform: translateX(-50%);
}