| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta name="viewport" content="initial-scale=1, viewport-fit=cover"> |
| <title>Designing Websites for iPhone X: Safe area illustration</title> |
| <link rel="stylesheet" type="text/css" href="style.css"> |
| <style> |
| body { |
| height: 10000px; |
| } |
| |
| #unsafeArea { |
| background: repeating-linear-gradient(45deg, rgb(246, 194, 194), rgb(246, 194, 194) 10px, rgb(238, 192, 193) 10px, rgb(238, 192, 193) 20px); |
| |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| } |
| |
| #safeArea { |
| background-color: rgb(187, 251, 198); |
| |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| |
| position: fixed; |
| top: constant(safe-area-inset-top); |
| top: env(safe-area-inset-top); |
| left: constant(safe-area-inset-left); |
| left: env(safe-area-inset-left); |
| right: constant(safe-area-inset-right); |
| right: env(safe-area-inset-right); |
| bottom: constant(safe-area-inset-bottom); |
| bottom: env(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); |
| left: calc(env(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); |
| width: env(safe-area-inset-left); |
| } |
| |
| #leftInsetIndicator .indicatorLabel { |
| left: calc(constant(safe-area-inset-left) + 12px); |
| left: calc(env(safe-area-inset-left) + 12px); |
| } |
| |
| #rightInsetIndicator { |
| right: 0; |
| width: constant(safe-area-inset-left); |
| width: env(safe-area-inset-left); |
| } |
| |
| #rightInsetIndicator .indicatorLabel { |
| right: calc(constant(safe-area-inset-right) + 12px); |
| right: calc(env(safe-area-inset-right) + 12px); |
| } |
| |
| #bottomInsetIndicator { |
| bottom: 0; |
| height: constant(safe-area-inset-bottom); |
| height: env(safe-area-inset-bottom); |
| } |
| |
| #bottomInsetIndicator .indicatorLabel { |
| left: calc(constant(safe-area-inset-left) + 12px); |
| left: calc(env(safe-area-inset-left) + 12px); |
| bottom: calc(constant(safe-area-inset-bottom) + 12px); |
| bottom: calc(env(safe-area-inset-bottom) + 12px); |
| } |
| </style> |
| </head> |
| <body> |
| <div id="unsafeArea"></div> |
| <div id="safeArea"><h1>Safe Area</h1></div> |
| <div id="leftInsetIndicator" class="horizontalInsetIndicator"><div class="midline"></div><div class="indicatorLabel">env(safe-area-inset-left)</div></div> |
| <div id="rightInsetIndicator" class="horizontalInsetIndicator"><div class="midline"></div><div class="indicatorLabel">env(safe-area-inset-right)</div></div> |
| <div id="bottomInsetIndicator" class="verticalInsetIndicator"><div class="midline"></div><div class="indicatorLabel">env(safe-area-inset-bottom)</div></div> |
| </body> |
| </html> |
