Update safe area inset demo pages to use env()
[WebKit-https.git] / Websites / webkit.org / demos / safe-area-insets / 3-safe-area-constants.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <meta name="viewport" content="initial-scale=1, viewport-fit=cover">
5     <title>Designing Websites for iPhone X: Respecting the safe areas</title>
6     <link rel="stylesheet" type="text/css" href="style.css">
7     <style>
8     #topBar {
9         background-color: #729fcf;
10         padding: constant(safe-area-inset-top) constant(safe-area-inset-right) 0 constant(safe-area-inset-left);
11         padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
12     }
13
14     #topBar a {
15         display: inline-block;
16
17         height: 100%;
18         padding: 12px;
19
20         border-right: 3px solid rgba(255, 255, 255, 0.5);
21
22         color: white;
23         text-decoration: none;
24         font-weight: bold;
25         font-size: 18pt;
26     }
27
28     #topBar a:last-child {
29         border-right: none;
30     }
31
32     #bottomBar {
33         position: fixed;
34
35         left: 0;
36         right: 0;
37         bottom: 0;
38
39         background-color: #3465a4;
40
41         text-align: center;
42
43         padding: 8px;
44         padding-left: constant(safe-area-inset-left);
45         padding-left: env(safe-area-inset-left);
46         padding-right: constant(safe-area-inset-right);
47         padding-right: env(safe-area-inset-right);
48         padding-bottom: constant(safe-area-inset-bottom);
49         padding-bottom: env(safe-area-inset-bottom);
50     }
51
52     #bottomBar a {
53         padding: 0 24px;
54
55         color: white;
56         font-size: 12pt;
57         text-decoration: none;
58     }
59
60     h1 {
61         margin: 12px 0 0 0;
62     }
63
64     h2 {
65         color: #aaa;
66         font-size: 12pt;
67         text-align: left;
68
69         margin: 0;
70     }
71
72     .post {
73         width: 100%;
74
75         margin-bottom: 50px;
76
77         padding: 12px;
78         padding-left: constant(safe-area-inset-left);
79         padding-left: env(safe-area-inset-left);
80         padding-right: constant(safe-area-inset-right);
81         padding-right: env(safe-area-inset-right);
82     }
83
84     .post p:first-child {
85         margin: 0;
86     }
87     </style>
88 </head>
89 <body>
90     <div id="topBar"><a href="#">Blog</a><a href="#">Photos</a><a href="#">Projects</a></div>
91     <div class="post">
92     <h1>Welcome</h1>
93     <h2>two hours ago</h2>
94     <p>Hi!</p>
95     <p>Welcome to my sample blog!</p>
96     <p>This post is here to help demonstrate how easy it is to take an existing site, along with full-width bars and fixed-position elements, and make it take full advantage of iPhone X's edge-to-edge display.</p>
97     <p>The actual post describing how to adopt the new API is over on the <a href="https://webkit.org/blog/7929/designing-websites-for-iphone-x/">WebKit blog</a>.</p>
98     <p>There, you will learn all about new WebKit features, including <code>viewport-fit</code>, <code>env()</code>, safe area insets, and <code>min()</code> and <code>max()</code>.</p>
99     <p>I hope that it helps you adopt these new features in your websites.</p>
100     </div>
101     <div id="bottomBar"><a href="#">About Me</a><a href="#">Contact</a><a href="#">Site Map</a></div>
102 </body>
103 </html>