# Bad value X for attribute “sizes” on element “source”: Expected function (one of “calc”, “min”, “max”, “clamp”, “sin”, “cos”, “tan”, “asin”, “acos”, “atan”, “atan2”, “pow”, “sqrt”, “hypot”, “log”, “exp”, “abs”, “sign”) but found no name at Y.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-x-for-attribute-sizes-on-element-source-expected-function-one-of-calc-min-max-clamp-sin-cos-tan-asin-acos-atan-atan2-pow-sqrt-hypot-log-exp-abs-sign-but-found-no-name-at-y
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `sizes` attribute on a `<source>` element contains a media condition or length value with malformed syntax, likely a missing or misspelled CSS function name where one is expected.

The `sizes` attribute tells the browser how wide an image will be displayed under various layout conditions. Its value is a comma-separated list of entries, each consisting of an optional media condition and a length. The length portion must be a valid CSS length, which can include plain values like `50vw` or `100px`, but also CSS math functions like `calc()`, `min()`, `max()`, and `clamp()`.

This error fires when the validator's parser hits a spot in the `sizes` value where it expects a CSS function name but finds something else. Common causes:

- A missing function name, such as writing `(100vw - 2rem)` instead of `calc(100vw - 2rem)`. Parenthesized math expressions require an explicit `calc()` wrapper.
- A typo in a function name, like `clac(...)` instead of `calc(...)`.
- Nesting errors or misplaced parentheses that confuse the parser about where a function should begin.

## Invalid example

```html
<picture>
  <source
    srcset="image-800.jpg 800w, image-1200.jpg 1200w"
    sizes="(min-width: 768px) (100vw - 4rem), 100vw"
    type="image/jpeg">
  <img src="image-800.jpg" alt="A mountain landscape">
</picture>
```

The expression `(100vw - 4rem)` is not a valid CSS length on its own. The validator expects a function name before the opening parenthesis.

## Fixed example

```html
<picture>
  <source
    srcset="image-800.jpg 800w, image-1200.jpg 1200w"
    sizes="(min-width: 768px) calc(100vw - 4rem), 100vw"
    type="image/jpeg">
  <img src="image-800.jpg" alt="A mountain landscape">
</picture>
```

Wrapping the arithmetic in `calc()` makes it a valid CSS length expression and resolves the validation error.