CSS-Tricks·1yCompiling CSS With Vite and Lightning CSS
This post discusses how to use Vite and Lightning CSS for compiling and post-processing CSS. It covers the essentials of setting up a Vite project, organizing CSS into cascade layers, and leveraging Lightning CSS for cross-browser compatibility. Instructions on installing and configuring these tools are provided, emphasizing their efficiency and benefits for more complex projects.
CSS-Tricks·1yContainer query units: cqi and cqb
Container query units like `cqi` and `cqb` allow sizing elements based on the size of their container instead of the viewport. `cqi` represents the inline size unit, and `cqb` handles the block size. Additionally, `cqmin` and `cqmax` units evaluate the larger of the container's inline or block size to determine their value, adding flexibility for responsive design.
CSS-Tricks·1yTypecasting and Viewport Transitions in CSS With tan(atan2())
Using the `tan()` and `atan2()` trigonometric functions in CSS, developers can typecast viewport lengths to integers, enabling various responsive design possibilities such as animations and transitions. This technique allows for the creation of dynamic layouts by converting viewport width to an integer variable, which can then be scaled and manipulated to different unit values. Furthermore, the introduction of a `--wideness` variable permits smooth interpolation of properties such as opacity, rotation, and offset-distance based on screen size.