davidsgrogan.github.io/env.html at master · davidsgrogan/davidsgrogan.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!doctype html>
<meta name="viewport" content="width=device-width, initial-scale=1" />

<style>
:root {
  --mittens: env(preferred-text-scale);
  /* Disable the autosizer */
  text-size-adjust: none;
}

#safe-area::after {
  content: "env(preferred-text-scale): " var(--x-text);
  color: blue;
}

#scaled-text {
  text-size-adjust: calc(100% * env(preferred-text-scale));
}

</style>

<script>
  const mittens = getComputedStyle(document.documentElement).getPropertyValue('--mittens');
  document.documentElement.style.setProperty('--x-text', JSON.stringify(mittens));
  console.log('preferred-text-scale:', mittens);

  /**
 * Retrieves the computed values of specified CSS env() variables.
 *
 * @param {string[]} envVarNames An array of env() variable names (e.g., 'safe-area-inset-top').
 * @returns {Object} An object where keys are the env() variable names and values are their computed string values.
 */
  function getCssEnvVariableValues(envVarNames) {
    const results = {};
    if (!document.body) {
      console.error("Cannot get env() values: document.body is not yet available.");
      return results;
    }

    const tempElement = document.createElement('div');

    // Style to make it non-intrusive and ensure it's part of the layout tree for getComputedStyle
    tempElement.style.position = 'absolute';
    tempElement.style.visibility = 'hidden';
    tempElement.style.width = '1px'; // Needs some dimension to be computed
    tempElement.style.height = '1px';
    tempElement.style.top = '-100px'; // Move off-screen
    tempElement.style.left = '-100px';

    document.body.appendChild(tempElement);

    // It's good practice to get computedStyle once if possible,
    // but styles are set iteratively, so we get it after setting all properties
    // OR get it inside the loop if setting one property might affect others (not typical for this case).
    // For simplicity and clarity, we'll set all properties first, then read.

    const tempPropToEnvVarMap = {};

    for (const varName of envVarNames) {
      // Create a unique temporary CSS custom property name
      const tempCustomPropName = `--temp-env-${varName.replace(/[^a-zA-Z0-9-]/g, '_')}`;
      tempPropToEnvVarMap[tempCustomPropName] = varName;

      // Set the custom property using the env() variable with a fallback.
      // The fallback (e.g., '0px') is important:
      // 1. If env(varName) is not supported/set, the custom property gets the fallback value.
      // 2. This makes getComputedStyle().getPropertyValue() return the fallback,
      //    instead of an empty string or an unresolvable value.
      tempElement.style.setProperty(tempCustomPropName, `env(${varName}, 5)`);
    }

    const computedStyle = window.getComputedStyle(tempElement);

    for (const tempCustomPropName in tempPropToEnvVarMap) {
      if (Object.prototype.hasOwnProperty.call(tempPropToEnvVarMap, tempCustomPropName)) {
        const originalVarName = tempPropToEnvVarMap[tempCustomPropName];
        const value = computedStyle.getPropertyValue(tempCustomPropName).trim();
        results[originalVarName] = value;
      }
    }

    document.body.removeChild(tempElement);
    return results;
  }

  // --- How to use it ---

  // Define a list of common/known env() variables you want to check.
  // You cannot get "all" env() variables because there's no API to list them.
  // You must specify the ones you're interested in.
  const knownEnvVariables = [
    // Safe area insets (for notches, rounded corners, etc.)
    'safe-area-inset-top',
    'safe-area-inset-right',
    'safe-area-inset-bottom',
    'safe-area-inset-left',

    // PWA window controls overlay (title bar geometry)
    // These are relevant when display_override: ["window-controls-overlay"] is in manifest
    'titlebar-area-x',
    'titlebar-area-y',
    'titlebar-area-width',
    'titlebar-area-height',

    // Experimental: Virtual keyboard insets (support varies)
    'keyboard-inset-top',
    'keyboard-inset-right',
    'keyboard-inset-bottom',
    'keyboard-inset-left',
    'keyboard-inset-width',
    'keyboard-inset-height',

    'preferred-text-scale',

    // A non-existent one to see the fallback in action
    'my-custom-nonexistent-env-variable'
  ];

  // Get the values (ensure this runs after the DOM is ready, or at least document.body is available)
  // For example, call this inside a DOMContentLoaded listener or at the end of your body.
  document.addEventListener('DOMContentLoaded', () => {
    const envValues = getCssEnvVariableValues(knownEnvVariables);

    console.log("--- CSS env() Variable Values ---");
    if (Object.keys(envValues).length === 0 && knownEnvVariables.length > 0) {
      console.log("Could not retrieve env() values. Ensure document.body was available.");
    } else {
      for (const [key, value] of Object.entries(envValues)) {
        // The value will be the actual env() value if set, or '0px' (the fallback we used) otherwise.
        console.log(`env(${key}): ${value}`);
      }
    }
    console.log("-------------------------------");
    console.log("Full results object:", envValues);
  });

</script>

This is normal text.

<p id="safe-area"></p>
<p id="scaled-text">
  This text should be env scaled.
</p>
(On Desktop, if you see a number in blue above but no text size differences,
change to mobile emulation mode in chrome devtools -- cmd-shift-m from
devtools.)

<!-- <iframe src="https://davidsgrogan.github.io/iframe.html"></iframe> -->