Skip to content

Instantly share code, notes, and snippets.

@zerobias
Last active May 29, 2024 05:51
Show Gist options
  • Save zerobias/a259681632df7f77fb5682ddb4675fdb to your computer and use it in GitHub Desktop.
Save zerobias/a259681632df7f77fb5682ddb4675fdb to your computer and use it in GitHub Desktop.
Safe body paddings with env() and max() support
/* size variables */
:root {
--md: 8px;
--md-2: calc(var(--md) * 2);
--md-3: calc(var(--md) * 3);
--md-4: calc(var(--md) * 4);
}
/* safe area defaults */
body {
--safeAreaTop: 0;
--safeAreaBottom: 0;
--safeAreaLeft: 0;
--safeAreaRight: 0;
--viewportTargetPadding: var(--md-4);
}
@media only screen and (max-width: 480px) {
body {
--viewportTargetPadding: var(--md-3);
}
}
/* set safeArea vars if supported */
@supports (padding-top: env(safe-area-inset-top, 0)) {
body {
--safeAreaTop: env(safe-area-inset-top, 0);
--safeAreaBottom: env(safe-area-inset-bottom, 0);
--safeAreaLeft: env(safe-area-inset-left, 0);
--safeAreaRight: env(safe-area-inset-right, 0);
}
}
/* define viewportPadding* vars defaults */
body {
--viewportPaddingTop: calc(var(--viewportTargetPadding) + var(--safeAreaTop));
--viewportPaddingBottom: calc(var(--viewportTargetPadding) + var(--safeAreaBottom));
--viewportPaddingLeft: calc(var(--viewportTargetPadding) + var(--safeAreaLeft));
--viewportPaddingRight: calc(var(--viewportTargetPadding) + var(--safeAreaRight));
}
/* use max padding if supported */
@supports (padding: max(0px)) {
body {
--viewportPaddingTop: max(
calc(var(--viewportTargetPadding) / 2),
var(--safeAreaTop)
);
--viewportPaddingBottom: max(
calc(var(--viewportTargetPadding) / 2),
var(--safeAreaBottom)
);
--viewportPaddingLeft: max(
var(--viewportTargetPadding),
var(--safeAreaLeft)
);
--viewportPaddingRight: max(
var(--viewportTargetPadding),
var(--safeAreaRight)
);
}
}
/* assign results to the body */
body {
padding-top: var(--viewportPaddingTop);
padding-bottom: var(--viewportPaddingBottom);
padding-left: var(--viewportPaddingLeft);
padding-right: var(--viewportPaddingRight);
height: calc(100vh - var(--viewportPaddingTop) - var(--viewportPaddingBottom));
margin: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment