The current env(viewport-segment-* x y) syntax only supports zero‑based left‑to‑right / top‑to‑bottom indexing. Referencing segments from the right or bottom is cumbersome and non‑semantic.
For example, to get the width of the rightmost viewport segment, authors must:
Query horizontal-viewport-segments.
Calculate the index as horizontal-viewport-segments - 1.
Write separate @media blocks for each possible segment count:
@media (horizontal-viewport-segments: 4) {
.item { width: env(viewport-segment-width 3 0); }
}
@media (horizontal-viewport-segments: 3) {
.item { width: env(viewport-segment-width 2 0); }
}
/* …and so on */
This forces enumeration instead of direct, logical referencing. It becomes unwieldy for responsive layouts that should adapt to any segment count without hard‑coded per‑count rules.
The lack of a straightforward way to address segments from the right or bottom limits the utility and readability of the feature. Consider extending the indexing mechanism to support more intuitive right‑to‑left and bottom‑to‑top references.
The current
env(viewport-segment-* x y)syntax only supports zero‑based left‑to‑right / top‑to‑bottom indexing. Referencing segments from the right or bottom is cumbersome and non‑semantic.For example, to get the width of the rightmost viewport segment, authors must:
Query
horizontal-viewport-segments.Calculate the index as
horizontal-viewport-segments - 1.Write separate
@mediablocks for each possible segment count:This forces enumeration instead of direct, logical referencing. It becomes unwieldy for responsive layouts that should adapt to any segment count without hard‑coded per‑count rules.
The lack of a straightforward way to address segments from the right or bottom limits the utility and readability of the feature. Consider extending the indexing mechanism to support more intuitive right‑to‑left and bottom‑to‑top references.