CSS by T. Afif
@css-only.dev
What I am saying is that this is not solving the issue. What most people really want is not a "wrapping detection". They want to "not have wrapping" so they want to avoid the height increase by changing the CSS "before the wrap happens". It's not really about how to implement "wrapping detection"
November 3, 2025 at 9:49 PM
What I am saying is that this is not solving the issue. What most people really want is not a "wrapping detection". They want to "not have wrapping" so they want to avoid the height increase by changing the CSS "before the wrap happens". It's not really about how to implement "wrapping detection"
Your first use case perfectly illustrate my point because, at the end, you don't have any wrapping. Or you have a wrapping and you disable it by changing the CSS and you get back to no wrapping, hence the infinite loop 😐
I am concerned about the implementation of the thing. "wrap detection" means we need to do something that should not disturb the wrapping otherwise we can easily run into infinite loop. And most of the use cases fall into this since they need to update the flex items or any content inside.
November 3, 2025 at 9:43 PM
Your first use case perfectly illustrate my point because, at the end, you don't have any wrapping. Or you have a wrapping and you disable it by changing the CSS and you get back to no wrapping, hence the infinite loop 😐
no one will like this because basically you are saying "when the wrap happens, the container height increase ... let's add some CSS to change the flex items ... they are now in one line again ... but we keep the increased height of container due to wrapping detection ... unwanted free space"
November 3, 2025 at 9:29 PM
no one will like this because basically you are saying "when the wrap happens, the container height increase ... let's add some CSS to change the flex items ... they are now in one line again ... but we keep the increased height of container due to wrapping detection ... unwanted free space"
.. With wrapping, the challenge is a bit different because you cannot have the dissociation since wrapping is closely related to the items. You cannot make it dependent only on the container. If you are able to style anything inside the container you will for sure impact the "wrapping detection".
November 3, 2025 at 9:13 PM
.. With wrapping, the challenge is a bit different because you cannot have the dissociation since wrapping is closely related to the items. You cannot make it dependent only on the container. If you are able to style anything inside the container you will for sure impact the "wrapping detection".
It's not really the same issue. Container query are built using the mechanism of size containment (that existed before) which disable the size contribution of its content. So it's easy to dissociate the container for its content and avoid loops ...
November 3, 2025 at 9:13 PM
It's not really the same issue. Container query are built using the mechanism of size containment (that existed before) which disable the size contribution of its content. So it's easy to dissociate the container for its content and avoid loops ...
I am concerned about the implementation of the thing. "wrap detection" means we need to do something that should not disturb the wrapping otherwise we can easily run into infinite loop. And most of the use cases fall into this since they need to update the flex items or any content inside.
November 3, 2025 at 9:01 PM
I am concerned about the implementation of the thing. "wrap detection" means we need to do something that should not disturb the wrapping otherwise we can easily run into infinite loop. And most of the use cases fall into this since they need to update the flex items or any content inside.
Demo updated with a better approach and article done (coming soon)
October 31, 2025 at 6:36 PM
Demo updated with a better approach and article done (coming soon)
Similar idea: css-tip.com/color-reveal...
Color your image with a sliding hover effect
Reveal the color of a black & white image using a simple code
css-tip.com
October 31, 2025 at 8:45 AM
Similar idea: css-tip.com/color-reveal...
I am also writing a series of articles to explain all the tricks I am using (and more!)
The first one is live 👇
The first one is live 👇
Perfectly Pointed Tooltips: A Foundation
The Anchor Positioning API in CSS is very powerful. This is the beginning of a series where we understand it through the perfect use-case: tooltips.
frontendmasters.com
October 30, 2025 at 6:51 PM
I am also writing a series of articles to explain all the tricks I am using (and more!)
The first one is live 👇
The first one is live 👇
Actually chrome is the correct one. I was just pointed to the Spec describing this: www.w3.org/TR/css-shape...
CSS Shapes Module Level 1
www.w3.org
October 29, 2025 at 9:21 PM
Actually chrome is the correct one. I was just pointed to the Spec describing this: www.w3.org/TR/css-shape...
But it's also following the padding-box, the outline, the box-shadow, etc (and is not following border-image) so it's not really logical at this point.
October 29, 2025 at 7:23 PM
But it's also following the padding-box, the outline, the box-shadow, etc (and is not following border-image) so it's not really logical at this point.
Yes, I get it now. I was doing a slightly different configuration than yours. I started by placing the circle using at 0 50% and from there I did the calculation.
October 29, 2025 at 3:20 PM
Yes, I get it now. I was doing a slightly different configuration than yours. I started by placing the circle using at 0 50% and from there I did the calculation.
I will do it not cross-browser: codepen.io/t_afif/pen/o...
half circle placement
...
codepen.io
October 29, 2025 at 2:47 PM
I will do it not cross-browser: codepen.io/t_afif/pen/o...