This content originally appeared on Bram.us and was authored by Bramus!
In addition to my first look + demo at Container Queries, both Andy Bell and Ahmad Shadeed have also published posts covering Container Queries.
~
Ahmad starts off with explaining the idea behind them, before digging into a ton of use-cases. I especially like the pagination use-case, something I hadn’t thought of yet myself.
~
In his post, Andy taps into a — not yet existent — cw unit, where 1cw equals 1% of the container. This comes in handy for tweaking the font-size based on the available space.
/* Before */
h1 {
font-size: clamp(
var(--fluid-type-min, 1rem),
calc(1rem + var(--fluid-type-target, 3vw)),
var(--fluid-type-max, 1.3rem)
);
}
/* After */
h1 {
font-size: clamp(
var(--fluid-type-min, 1rem),
calc(1rem + var(--fluid-type-target, 5cw)),
var(--fluid-type-max, 1.3rem)
);
}Yes, we totally need this type of unit!
~
Container Queries are Actually Coming (by Andy) →
Say Hello To CSS Container Queries (by Ahmad) →
This content originally appeared on Bram.us and was authored by Bramus!
Bramus! | Sciencx (2021-04-14T21:22:44+00:00) Container Queries are Actually Coming / Say Hello To CSS Container Queries. Retrieved from https://www.scien.cx/2021/04/14/container-queries-are-actually-coming-say-hello-to-css-container-queries/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.