<div id="unsafeArea"></div>
    <div id="safeArea"><h1>Safe Area</h1></div>
    <div id="leftInsetIndicator" class="horizontalInsetIndicator"><div class="midline"></div><div class="indicatorLabel">constant(safe-area-inset-left)</div></div>
    <div id="rightInsetIndicator" class="horizontalInsetIndicator"><div class="midline"></div><div class="indicatorLabel">constant(safe-area-inset-right)</div></div>
    <div id="bottomInsetIndicator" class="verticalInsetIndicator"><div class="midline"></div><div class="indicatorLabel">constant(safe-area-inset-bottom)</div></div>
body {
    margin: 0;

    font-family: Helvetica;
    font-size: 16pt;

    -webkit-text-size-adjust: 100%;

    background-color: #eef;
}

* {
    box-sizing: border-box;
}
body {
        height: 10000px;
    }

    #unsafeArea {
        background: repeating-linear-gradient(45deg, #a40000, #a40000 10px, #cc0000 10px, #cc0000 20px);

        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    #safeArea {
        background-color: #4e9a06;

        display: flex;
        align-items: center;
        justify-content: center;
        
        position: fixed;
        top: constant(safe-area-inset-top);
        left: constant(safe-area-inset-left);
        right: constant(safe-area-inset-right);
        bottom: constant(safe-area-inset-bottom);
    }

    .horizontalInsetIndicator {
        border-left: 4px solid white;
        border-right: 4px solid white;

        display: flex;
        align-items: center;
        justify-content: center;

        position: fixed;

        top: 45px;
        height: 25px;
    }

    .horizontalInsetIndicator .midline {
        border-top: 2px solid white;
        border-bottom: 2px solid white;
        width: 100%;
        height: 0px;
    }

    .verticalInsetIndicator {
        border-top: 4px solid white;
        border-bottom: 4px solid white;

        display: flex;
        align-items: center;
        justify-content: center;

        position: fixed;

        left: calc(constant(safe-area-inset-left) + 45px);
        width: 25px;
    }

    .verticalInsetIndicator .midline {
        border-left: 2px solid white;
        border-right: 2px solid white;
        width: 0px;
        height: 100%;
    }

    .indicatorLabel {
        position: fixed;
        font-family: monospace;
        font-size: 12pt;
    }

    #leftInsetIndicator {
        left: 0;
        width: constant(safe-area-inset-left);
    }

    #leftInsetIndicator .indicatorLabel {
        left: calc(constant(safe-area-inset-left) + 12px);
    }

    #rightInsetIndicator {
        right: 0;
        width: constant(safe-area-inset-left);
    }

    #rightInsetIndicator .indicatorLabel {
        right: calc(constant(safe-area-inset-right) + 12px);
    }

    #bottomInsetIndicator {
        bottom: 0;
        height: constant(safe-area-inset-bottom);
    }

    #bottomInsetIndicator .indicatorLabel {
        left: calc(constant(safe-area-inset-left) + 12px);
        bottom: calc(constant(safe-area-inset-bottom) + 12px);
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.