GitHub Readme Streak Stats 项目中 `<picture>` 标签参数解析问题分析

在 GitHub Readme Streak Stats 项目的使用过程中，开发者发现了一个与 HTML5 <picture> 标签相关的参数解析问题。这个问题特别出现在使用 exclude_days 参数时，当该参数包含逗号分隔的多个值时，在 <picture> 标签中会出现解析异常。

问题现象

开发者尝试在 Markdown 文件中使用 <picture> 标签来实现根据用户系统主题偏好自动切换不同配色的统计图表。代码结构如下：

<picture>
    <source media="(prefers-color-scheme: dark)" srcset="URL?exclude_days=Sat,Sun" />
    <source media="(prefers-color-scheme: light)" srcset="URL?exclude_days=Sat,Sun" />
    <img src="URL?exclude_days=Sat,Sun" />
</picture>

当使用这种写法时，exclude_days 参数似乎只能识别第一个值（Sat），而忽略了逗号后的第二个值（Sun）。相比之下，直接在 <img> 标签中使用相同的 URL 参数则能正常工作。

技术分析

这个问题实际上与 GitHub 的 Markdown 解析器对 <picture> 标签中 URL 参数的处理方式有关。在 HTML 规范中，逗号在 URL 查询参数中具有特殊含义，特别是在 srcset 属性中，它用于分隔不同分辨率或像素密度的图像源。

GitHub 的 Markdown 解析器在处理 <picture> 标签时，可能没有完全遵循标准的 URL 编码规范，导致逗号被错误地解析为分隔符而非参数值的一部分。

解决方案

针对这个问题，开发者可以采用 URL 编码的方式对逗号进行转义：

<picture>
    <source media="(prefers-color-scheme: dark)" srcset="URL?exclude_days=Sat%2CSun" />
    <source media="(prefers-color-scheme: light)" srcset="URL?exclude_days=Sat%2CSun" />
    <img src="URL?exclude_days=Sat%2CSun" />
</picture>

其中 %2C 是逗号的 URL 编码形式。这种写法能够确保参数值被正确传递，不会被解析器误解。

最佳实践建议

1. 始终对特殊字符进行编码：在 URL 参数中包含逗号、空格等特殊字符时，应该使用 URL 编码以确保参数传递的准确性。

2. 测试不同环境：由于不同平台对 HTML5 特性的支持程度不同，建议在各种环境中测试 <picture> 标签的行为。

3. 考虑兼容性：如果目标环境对 <picture> 标签支持不完善，可以考虑使用 JavaScript 方案或纯 CSS 媒体查询来实现类似功能。

这个问题虽然表现为 GitHub Readme Streak Stats 项目的使用问题，但实际上揭示了 Web 开发中 URL 参数处理和 HTML5 标签兼容性的常见挑战，值得开发者注意。