env(safe-area-inset) Values Lookup
Use supplied env safe-area top/right/bottom/left values in max(inset, padding), not read browser/device environment or add inset twice. Explicit supplied computed/layout context only; not a browser cascade/layout engine or cross-browser guarantee.
Description
Safe-area insets describe available-edge constraints exposed by the environment.
Safe-area insets describe available-edge constraints exposed by the environment.1
Combining them with desired padding needs explicit side order and a chosen arithmetic policy. Use env(safe-area-inset) Values Lookup to evaluate the supplied inputs under the specific model below.
When to use env(safe-area-inset) Values Lookup
Use env(safe-area-inset) Values Lookup to evaluate the supplied inputs under the specific model below. Define the supplied layout, token or rendering scenario and establish the relevant units and browser context independently.
How to use env(safe-area-inset) Values Lookup and understand its results
- Define the supplied layout, token or rendering scenario and establish the relevant units and browser context independently.
- Enter Caller observed safe area insets px, Caller desired padding px using the field table and validation rules below, then run the tool.
- Read Max inset or padding px and interpret units, signs, ordering and placeholders as explained below.
- If the tool reports an input error, correct that field and rerun. A successful false result, empty match list or unknown-evidence placeholder has the specific meaning described here; check the limitations before applying the result.
| Input field | Meaning | Value type | Requirement |
|---|---|---|---|
| callerObservedSafeAreaInsetsPx | Caller observed safe area insets px | array of number | Required; constraints below |
| callerDesiredPaddingPx | Caller desired padding px | array of number | Required; constraints below |
Enter exactly four nonnegative safe-area insets and four nonnegative base paddings in top/right/bottom/left order and one shared unit. Return the componentwise maximum. The values are not added: this models padding that is at least both the inset and the requested base amount. The tool does not obtain device insets.
padding[i] = max(safeAreaInset[i],basePadding[i]) Field order, units and branch conditions follow the implementation explanation above.
| Output field | Meaning | Value type |
|---|---|---|
| maxInsetOrPaddingPx | Max inset or padding px | array of number |
{
"input": {
"callerObservedSafeAreaInsetsPx": [
10,
0,
20,
0
],
"callerDesiredPaddingPx": [
5,
5,
5,
5
]
},
"output": {
"maxInsetOrPaddingPx": [
10,
5,
20,
5
]
}
}Limitations and assumptions
Combining them with desired padding needs explicit side order and a chosen arithmetic policy. Apply the exact scope and assumptions described above.
All listed fields require explicit values. Unexpected fields, incorrect types, nonfinite numbers and sparse arrays fail validation. Domain-specific bounds, alignments and supported tokens are stated above; extremely large inputs or outputs can also be rejected. These errors differ from successful results such as false, no matches or unknown evidence.
Alternative or Complementary methods
Use dvh/svh/lvh Viewport Variants Lookup for a related task: Small, large and dynamic viewport heights describe different viewport-size bases.
Use Container Query Units cqi/cqw Reference for a related task: Container width and inline size can differ under vertical writing.
References
-
env(safe-area-inset) Values Lookup — tool.io
Similar or alternative tools
- dvh/svh/lvh Viewport Variants Lookup
Small, large and dynamic viewport heights describe different viewport-size bases.
- Container Query Units cqi/cqw Reference
Container width and inline size can differ under vertical writing.