Container Query Units cqi/cqw Reference
Resolve cqw vs cqi with independently selected eligible query-container sizes, writing-mode inline size distinct from physical width; no ancestor/container selection or fallback inference. Explicit supplied computed/layout context only; not a browser cascade/layout engine or cross-browser guarantee.
Description
Container width and inline size can differ under vertical writing.
Container width and inline size can differ under vertical writing.1
Query units need an independently eligible container before their lengths are computed. Use Container Query Units cqi/cqw Reference to evaluate the supplied inputs under the specific model below.
When to use Container Query Units cqi/cqw Reference
Use Container Query Units cqi/cqw Reference 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 Container Query Units cqi/cqw Reference and understand its results
- Define the supplied layout, token or rendering scenario and establish the relevant units and browser context independently.
- Enter Caller eligible container width px, Caller eligible container inline size px, Observed percent using the field table and validation rules below, then run the tool.
- Read Cqw length px, Cqi length 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 |
|---|---|---|---|
| callerEligibleContainerWidthPx | Caller eligible container width px | number | Required; constraints below |
| callerEligibleContainerInlineSizePx | Caller eligible container inline size px | number | Required; constraints below |
| observedPercent | Observed percent | number | Required; constraints below |
Enter nonnegative container physical width and inline size, and a nonnegative percentage. Return percent/100 times each supplied dimension for cqw and cqi. The two can differ under vertical writing. The tool does not locate an eligible query container or calculate fallback viewport units.
cqwPx = physicalWidth×percent/100; cqiPx = inlineSize×percent/100 Field order, units and branch conditions follow the implementation explanation above.
| Output field | Meaning | Value type |
|---|---|---|
| cqwLengthPx | Cqw length px | number |
| cqiLengthPx | Cqi length px | number |
{
"input": {
"callerEligibleContainerWidthPx": 400,
"callerEligibleContainerInlineSizePx": 200,
"observedPercent": 10
},
"output": {
"cqwLengthPx": 40,
"cqiLengthPx": 20
}
}Limitations and assumptions
Query units need an independently eligible container before their lengths are computed. 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 env(safe-area-inset) Values Lookup for a related task: Safe-area insets describe available-edge constraints exposed by the environment.
References
-
Container Query Units cqi/cqw Reference — tool.io
Similar or alternative tools
- dvh/svh/lvh Viewport Variants Lookup
Small, large and dynamic viewport heights describe different viewport-size bases.
- env(safe-area-inset) Values Lookup
Safe-area insets describe available-edge constraints exposed by the environment.