Skip to main content

no-always-matching-source

Requires a <source> element to have a usable media and/or type attribute when it has a following sibling <source> or <img> element with a srcset attribute, per the HTML Living Standard. Without one, the <source> "always matches" and shadows the following candidates.

Split out of the former srcset-sizes-constraint rule, alongside no-unpaired-srcset-sizes, no-mixed-srcset-descriptors, and sizes-auto-requires-lazy-loading.

How It Works​

  • Only <source> elements inside <picture> are checked. Elements with spread attributes are skipped.
  • A media attribute counts as distinguishing the source only when its value, after stripping leading and trailing ASCII whitespace, is neither empty nor an ASCII case-insensitive match for all. A type attribute (any value) always counts. Dynamic media/type values are assumed to qualify and are skipped.
  • Whether the current <source> itself has a srcset attribute does not matter — the requirement is about distinguishing it from a following sibling's candidates.

❌ Examples of incorrect code for this rule

<!-- No media/type before a srcset-bearing sibling -->
<picture>
  <source srcset="a.webp" />
  <source srcset="b.jpg" />
  <img src="b.jpg" alt="photo" />
</picture>

<!-- media="all" does not distinguish the source -->
<picture>
  <source srcset="a.webp" media="all" />
  <img src="b.jpg" srcset="b.jpg" alt="photo" />
</picture>

✅ Examples of correct code for this rule

<!-- Distinguished by a media query -->
<picture>
  <source srcset="a.webp" media="(min-width: 600px)" />
  <source srcset="b.jpg" />
  <img src="b.jpg" alt="photo" />
</picture>

<!-- Distinguished by a type -->
<picture>
  <source srcset="a.webp" type="image/webp" />
  <img src="b.jpg" srcset="b.jpg" alt="photo" />
</picture>

References​

Interface​

{
  "no-always-matching-source": boolean
}

Default Severity​

error