[csswg-drafts] [css-values-4] Small/Large/Dynamic Logical CSS Units (#10157)

brandonmcconnell has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-values-4] Small/Large/Dynamic Logical CSS Units ==
### Abstract
This proposal introduces new CSS units that are based on the logical inline and block dimensions of the viewport, rather than the its width and height. This aligns with the growing trend towards logical, layout-agnostic styles in modern web development.

### Motivation
Current CSS units like `vw`/`vh`/`lvw`/`lvh`/`dvw`/`dvh` are based on the width and height of the viewport, which can be problematic when dealing with layouts that are not constrained to a single axis (e.g. responsive designs, rotated screens, internationalization, etc.). This proposal aims to provide a more flexible and logical way to size elements based on the inline and block dimensions of the viewport.

### Proposed Units

|  | block | inline |
|:-------|:-------|:-------|
| **small** | `svb` | `svi` |
| **large** | `lvb` | `lvi` |
| **dynamic** | `dvb` | `dvi` | 

| Unit | Relative to |
|:-------|:-------|
| `svb`, `svi` | 1% of the small viewport's width and height, respectively. |
| `lvb`, `lvi` | 1% of the large viewport's width and height, respectively. |
| `dvb`, `dvi` | 1% of the dynamic viewport's width and height, respectively. | 

### Use Cases
- Sizing elements based on the logical dimensions of the viewport, rather than the viewport's dimensions.
- Creating layout-agnostic styles that work well in both landscape and portrait orientations.
- Designing responsive components that can adapt to changes in the viewport's logical dimensions.

### Conclusion
This proposal aims to introduce a more logical and flexible approach to CSS units, aligning with the growing trend towards layout-agnostic web design. By focusing on the inline and block dimensions of the viewport, rather than the viewport's width and height, developers can create more robust and adaptable styles for a wide range of device and layout scenarios.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10157 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 28 March 2024 20:31:22 UTC