Topics

To adjust marginsclamp()Implementations that allow the value to vary between a minimum and maximum value are commonly used these days.

It's very useful for responsiveness,Accessibility zoomWith that in mind, there's a bit of a catch.

Common examples of clamp()

For example, the marginsclamp()If you want to adjust it, you would probably write it like this:

:root {
  --clamp-base: 16;
  --clamp-viewport-min: 375;
  --clamp-viewport-max: 1440;

  --spacing-lg-min: 24;
  --spacing-lg-max: 48;

  --spacing-lg-slope: calc(
    (var(--spacing-lg-max) - var(--spacing-lg-min)) / (var(--clamp-viewport-max) - var(--clamp-viewport-min))
  );
  --spacing-lg-intersection: calc(
    (var(--spacing-lg-max) - var(--clamp-viewport-max) * var(--spacing-lg-slope)) / var(--clamp-base)
  );
  --spacing-lg: clamp(
    calc(var(--spacing-lg-min) / var(--clamp-base) * 1rem),
    calc(var(--spacing-lg-intersection) * 1rem + 100 * var(--spacing-lg-slope) * 1vw),
    calc(var(--spacing-lg-max) / var(--clamp-base) * 1rem)
  );
}

I won't go into details, but

• On smartphones--spacing-lg-minSize
• On PC--spacing-lg-maxSize
• During this time, it is variable and expands smoothly.

So it's a very easy to use pattern.

What are the pitfalls of accessibility?

The problem is,WCAG 2.0 Success Criterion 1.4.4 "Resize text"It's time to try to respond.

This standard was originally established before smartphones became commonplace, with the intention of allowing images to be viewed even when enlarged up to 200% on a PC, but the same conditions apply to smartphone browsers.

In fact, this phenomenon tends to occur when you zoom in to 200% on a smartphone.

1. By enlarging (zooming) the text,remUnit-basedExpand to the marginsIt ends up happening.
2. This allows you to create aExcessively wide marginsIt becomes like this.
3. As a result,The content display area is extremely narrow.This can result in a distorted layout and make the page difficult to read.

*However, in reality, even when looking at overseas government websites where WCAG compliance is mandatory, it seems that they are not doing much. This is probably due to cost-effectiveness issues and the fact that there seems to be little need for 200% magnification on smartphones in the first place, so at the field level it may be considered that "it won't be a big problem if we don't do it."

How to solve this problem?

Affected by text enlargementremInstead,vwUse viewport-based units such asDo not make the margins larger than necessary even when zoomedIt is important to do so.

butvwIf you specify onlyclamp()This does not take advantage of the advantage of being able to control the minimum and maximum values.

That's wheremin()It's a function!

min()will use the "smallest value" among the values ​​passed. Use this characteristic to switch the value applied between normal and expanded modes.

Here's how to write it.

--spacing-lg: min(
  calc(var(--spacing-lg-min) / var(--clamp-viewport-min) * 100vw),
  clamp(
    calc(var(--spacing-lg-min) / var(--clamp-base) * 1rem),
    calc(var(--spacing-lg-intersection) * 1rem + 100 * var(--spacing-lg-slope) * 1vw),
    calc(var(--spacing-lg-max) / var(--clamp-base) * 1rem)
  )
);

When this is displayed at 375 CSS px, the first value of min is--spacing-lg-minThe value of 24px is converted to vw, resulting in 6.4vw.

clamp()The minimum value is 1.5rem = 24px, but when enlarged by 200%, it becomes 48px, so the 6.4vw on the left is smaller and will be applied.

In other words,

• Normally (100%):
  • clamp()The value ofvwIt will be smaller than the reference value.
  • min()Since the smaller one is used,clamp()is effective and the display will change depending on the screen width.
• Zoomed in (200%):
  • clamp()Withinrembecomes larger with expansion,vwThe reference value is smaller.
  • vwThe standard value is applied and the margins are fixed as a percentage of the screen width, preventing excessive enlargement.

Now, "Responsive Convenience"and"Accessibility considerations" You can achieve both!

*By the way, when viewing on a PC, it is often better to enlarge the image including the margins to maintain the balance of the design.--clamp-viewport-minThis standard applies only to smartphones.

Compare actual behavior

The top is clamp only, the bottom is min+clamp.

If you zoom in to 200% on your smartphone, you can clearly see the difference.

* You can enlarge the page by clicking the icon on the left of the address bar on iOS Safari, and by clicking the icon on the top right on Android Chrome.

summary

• clamp() is useful for responsive margin adjustments
• However, if you enlarge the image, it may expand to the margins, which may cause layout problems.
• Combined with min(),Variable when normal, controlled when enlargedThis allows for a balanced response.

If you are conscious of WCAG compliance, it is reassuring to incorporate such implementations. Implementations that "pay attention to 200% magnification on smartphones" are still rare, but they reduce accessibility risks without compromising normal readability.

By the way, if you want to make finer adjustments other than margins, you can also specify media queries for narrower breakpoints.

@media (max-width: 239px) {
  /* 拡大時に適用したいCSS */
}

For example, if you enlarge a 375px wide screen to 200%, the browser will calculate the viewport width as "half that size (approximately 188px)" so it can match this narrow condition.

*The value of 239px is just an example. You should decide on a value that leaves room for future screen enlargement while adjusting it so that it does not affect the normal display.

Combining "clamp() + min()" with "narrow breakpoint media queries" allows for more flexible and reliable accessibility support!