strange issue with css variables and abs and clamp css functions

Question

I am having trouble seeing why the following CSS code involving custom css variables fails to work as expected:

html

<ul class="grid">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

css

.grid > *:nth-child(2n) {
    border-right-width: calc((1 - abs(clamp(-1, var(--columns, 1) - 2, 1))) * 5px);
}
.grid {
    --column-gap: 10px;
    --row-gap: 20px;
    --columns: 5;
}

Output:

jsfiddle

The problem is that every 2n item has a right border width, when by calculation the border-right-width should be zero (since --columns has a value other than 2 and 1 - abs(clamp(-1, var(--columns, 1) - 2, 1)) should evaluate to 0).

What am I missing? And how can the border-right-width calculation activate only when --columns takes the value of 2 and not otherwise (otherwise 0)?

haolt · Accepted Answer · 2023-12-02 08:20:46Z

2

As of now abs() is only supported by Firefox and Safari. Change abs(x) to max(x, 0 - x)

.grid>*:nth-child(2n) {
  border-right-width: calc((1 - max(clamp(-1, var(--columns, 1) - 2, 1),
     0 - clamp(-1, var(--columns, 1) - 2, 1))) * 5px);
}

answered Dec 2, 2023 at 8:20

haolt

9674 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nikos M. Over a year ago

Firefox also produces unexpected output even though it is supposed to support abs (chrome also fails but differently). Nevertheless I will try the max alternative and see.

Anurag · Accepted Answer · 2023-11-29 06:23:49Z

1

To ensure that the border-right-width is only applied when --columns is exactly 2, you need to adjust your calculation. You can use a simpler check:

.grid > *:nth-child(2n) {
border-right-width: calc((var(--columns, 1) == 2) * 5px);

}

However, the equality check (==) is not supported in CSS calc(). As a workaround, you could use JavaScript to dynamically add a class or inline style based on the value of --columns.

If you want a pure CSS solution, check below:

HTML:

<ul class="grid" data-columns="5">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

CSS:

.grid > li {
    text-align: center;
    padding: 30px 0;
    font-size: 20px;
    font-weight: 900;
    border: 1px solid #aaa;
}

/* Apply specific styles when --columns is 2 */
.grid[data-columns="2"] > li:nth-child(2n) {
    border-right-width: 5px;
}

.grid {
    --column-gap: 10px;
    --row-gap: 20px;
    --columns: 5;
}

Here, you manually set the data-columns attribute in your HTML to match the --columns value. Then, you use this attribute in your CSS to selectively apply styles. This method requires updating the HTML whenever you change the --columns value.

answered Nov 29, 2023 at 6:23

Anurag

3283 silver badges13 bronze badges

1 Comment

Nikos M. Over a year ago

yes using js or data properties would work but I do not want that. Why do you think the clamp calculation fails when it should produce correct result in theory?

Collectives™ on Stack Overflow

strange issue with css variables and abs and clamp css functions

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related