Lmst

#containerQuery

#tinyCSStip We can have boolean logic in container queries!

And this works cross-browser!

Live test on @codepen: https://codepen.io/thebabydino/pen/QwbNNpz

More info on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/@container#logical_keywords_in_container_queries

#CSS #cssLayout #containerQuery #coding #web #dev #webDev #webDevelopment #code #frontend

.container { container-type: inline-size }

.item {
background: #335c67;

@container ((width > 220px) and (width < 388px)) or (width > 580px) {
background: #e09f3e /* this WORKS cross-browser!!! */
}

/* equivalent to: *
@container (width > 220px) and (width < 388px) { background: #e09f3e }
@container (width > 580px) { background: #e09f3e }/**/
}

In Safari, does anyone know why the existence of a container definition (`container-name`/`container-type`) in a layout results in media queries not getting executed at all or being delayed by 5 to 10 seconds? Like you resize the window and nothing happens, you can still interact with the site and then suddenly the layout flips?! Experienced this for the first time and am a bit stumped.

#webdesign #css #safari #bug #containerQuery #mediaQuery

Haven't been posting much coding stuff this past week as I've found it difficult to focus on it given the state of things in my country 😞

But... I have a new article out!

Using Container Query Units Relative to an Outer Container https://frontendmasters.com/blog/using-container-query-units-relative-to-an-outer-container/

Sparked by a question @mattwilcox asked here.

#CSS #containerQuery #frontend #coding #web #dev #webDev #webDevelopment #code #containerQueryUnits

Here's a quick responsive clover layout on @codepen https://codepen.io/thebabydino/pen/RNwmjEQ?editors=0100

#CSS #layout #cssLayout #containerQuery #cssGrid #code #coding #responsive #web #dev #webDevelopment #webDev #frontend

4 leaf clover layout in the wide screen case. The four leaf items are arranged on a 2⨯2 grid, with a smaller border-radius in the middle of the grid, items on the secondary diagonal smaller and the content aligned depending on row and column.

The narrow screen case layout. All four leaf items are one underneath the other, all using the same border-radius for all corners and the same alignment.

#tinyCSStip

Pretty sure I've posted about this before, but a quick search at the morning hours didn't find it, plus I saw someone ask about it yet again¹, so... fixed aspect-ratio box within variable size container!

Live on @codepen https://codepen.io/thebabydino/pen/ogvZdoZ?editors=1101

¹here https://www.reddit.com/r/css/comments/1hhf4x3/comment/m2s81yr/

#CSS #aspectRatio #code #coding #web #frontend #dev #webDevelopment #webDev #containerQuery #containerQueryUnits #container

.parent {
display: grid; /* for child middle alignment */
container-type: size; /* for child sizing */
/* random ass parent sizing */
width: min(60em, 90%);
height: min(800px, 50vh);
background: dodgerblue /* make its boundary visible */
}

.aspect-ratio-child {
--r: 8/ 5;
place-self: center; /* put it in the middle along both axes */
/* the magic, using container query units */
width: min(100cqw, var(--r)*100cqh);
height: min(100cqh, 100cqw/(var(--r)));
/* or use aspect-ratio: var(--r) instead of height, but... pixel rounding issues */
background: crimson /* make its boundary visible */
}

#tinyCSStip Container queries on the body? Why, when media queries have better support?

Well, container queries make it an IF depending on the width of the body's content-box.

That is, subtracting the scrollbar IF we have one (we can't know).

**Heavily** commented @codepen demo https://codepen.io/thebabydino/pen/ZEgjpYL

#CSS #container #containerQuery #layout #cssLayout #grid #cssGrid #frontend #code #web #dev #webDev #webDevelopment #coding #containerQueryUnits

/* consider this structure inside the body:
section.item
.text-box
img
... and so on, multiple such sections with 2 children */

/* allows us to use a container query - better than media query
* because it takes into account the scrollbar IF there's one */
body { container-type: inline-size }

.item, .text-box { display: grid }

.item {
/* 1 column for each of the two items, as long as there's room
* for each of them to have at least 150px */
grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
grid-auto-flow: dense /* prevent unoccupied cells in grid */
}

/* 1st, 3rd & so on section have text box on 2nd column
* IF there's enough room to have 2 columns of at least 150px each */
@container (min-width: calc(2*150px)) {
:nth-of-type(odd) > .text-box { grid-column: 2 }
}

#Development #Techniques
Captured custom properties · A noteworthy naming pattern for CSS variables https://ilo.im/15zz5d

_____
#CustomProperty #Naming #FeatureDetection #TypeLimitation #ContainerQuery #StyleQuery #WebDev #Frontend #CSS

#Development #Opportunities
‘Smart’ CSS layouts with container queries · New options we never had with media queries https://ilo.im/15zshu

_____
#ModernCSS #Layout #ContainerQuery #MediaQuery #CssGrid #CssFlexbox #WebDev #Frontend #CSS

#Development #Explorations
What if you used Container Units for… everything? · “Surprise, surprise, that it’s not that easy.” https://ilo.im/15zotb

_____
#Layout #ResponsiveDesign #WebDesign #WebDev #CSS #ContainerQuery #ContainerUnit #CssClamp

#Development #Techniques
Fit-to-width text: A new technique · How modern CSS helps to solve an ancient challenge https://ilo.im/15zk30

_____
#ModernCSS #Layout #Typography #WebDev #Frontend #ARIA #HTML #CSS #ContainerQuery #CustomProperty

#Development #Approaches
How to use CSS Container Queries now · Can Container Queries already be used in production? https://ilo.im/15zdwd

_____
#Layout #ResponsiveDesign #ContainerQuery #BrowserSupport #Browser #WebDev #Frontend #CSS #JavaScript

2⃣ feColorMatrix: swap channels ☆ interactive demo, adaptive layout https://codepen.io/thebabydino/full/QWopRMK

An interactive, responsive demo illustrating how feColorMatrix can be used to swap channels.

#SVG #filter #svgFilter #responsive #filterEffect #code #coding #frontend #webDev #web #dev #cssGrid #containerQuery #webDevelopment

#Development #Approaches
Learn CSS grid now, container queries can wait · “Take your time with new CSS, but don’t sleep on the essentials.” https://ilo.im/15z72q

_____
#Layout #Browser #CssGrid #CssFlexbox #ContainerQuery #Design #ResponsiveDesign #WebDev #Frontend #CSS

If you want a fixed aspect-ratio element that always touches either the horizontal or vertical edges of its flexible size and aspect ratio wrapper *which does not coincide with the viewport*, you can make the wrapper a container and use container query units.

Live test on @codepen https://codepen.io/thebabydino/pen/ExzbVmP

#CSS #cssLayout #layout #container #containerQueries #containerQuery #cssUnits #code #coding #frontend #web #dev #webDev

The CSS code used to achieve this:

```
html, body, div { display: grid }

html { min-height: 100% }

body {
grid-gap: 1em;
grid-template-columns:
repeat(auto-fit,
minmax(min(100%, 16em), 1fr));
font-size: clamp(.625em, 1vw + 1vh, 1.5em)
}

.wrap {
container-type: size;
box-shadow: 0 0 0 1px, inset 0 0 0 1px
}

.box {
--r: 16/9;
place-self: center;
width: min(100cqw, var(--r)*100cqh);
aspect-ratio: var(--r);
background: crimson;
}
```

#Development #Guides
CSS Container Queries · A contemporary approach to responsive web design https://ilo.im/15z5q7

_____
#Browser #ResponsiveDesign #WebDesign #WebDev #Frontend #CSS #MediaQuery #ContainerQuery #StyleQuery

Extremely annoying #CSS gotcha: container query units seem to be relative to the `content-box` dimensions. And there doesn't seem to be any way to make them relative to the `border-box` dimensions... which is what I need to solve other problems caused by container queries. 😭

#cssWTF #gotcha #layout #cssLayout #wtf #code #coding #containerQueries #containerQuery #frontend #webDev #webDevelopment

#tinyCSStip Let's say we want a 90° rotated element (like a range input because rotation is the only way we can make it vertical) to fully cover its flexible size (think `clamp()` using `%` values, grid item on a flexible grid and stuff like that) parent.

We can make this parent a container and use container query units to style our element.

#css #layout #cssLayout #containerQuery #slider #code #coding #frontend #webDev #webDevelopment

.parent { /* flexible dimensions element */
container-type: size
}

[type='range'] {
/* make its width equal to the flexible height of its parent */
width: 100cqh;
/* make its height equal to the flexible width of its parent */
height: 100cqw;
/* get a vertical slider by rotating it */
rotate: -90deg
}

In the final case, when we use the B channel, the only orange parts that aren't almost fully transparent are the white pith and seeds.

#SVG #filter #svgFilter #CSS #layout #cssLayout #cssGrid #containerQuery #cssVariables #code #coding #frontend #webDev #webDevelopment

Screenshot of the case when we use the blue channel as an alpha mask.

When we use the G channel, the white orange pith and seeds, as well as the flesh of the less reddish oranges are the least transparent parts. The aquatic blue background is also less transparent in this case, through still more transparent than when we use the B channel.

#SVG #filter #svgFilter #layout #CSS #cssLayout #cssGrid #containerQuery #cssVariables #code #coding #frontend #webDev #webDevelopment

Screenshot of the case when we use the green channel as an alpha mask.

When we use the R channel, the oranges are the least transparent (darkest) part (R value higher there as orange is mainly R + some G), especially the whitish pith (which almost maxes out all channels), while the aquatic blue (mostly B + G) background is the most transparent.

#SVG #CSS #filter #svgFilter #layout #cssLayout #cssGrid #containerQuery #cssVariables #code #coding #frontend #webDev #webDevelopment

Screenshot of the case when we use the red channel as an alpha mask.

Client Info

Server: https://mastodon.social

Version: 2025.04

Repository: https://github.com/cyevgeniy/lmst