content alt text

[clarfonthey]

What would you want to propose?

CSS content supports adding an alternative text after a slash, like so:

content: "string" / "alt text";

However, since some browsers don't support this, you can emit an extra version of the content property without the slash, as a backup:

content: "string" "alt text";
content: "string" / "alt text";

Suggested solution

A postcss-content-alt-text plugin could perform this transformation and it could be enabled by postcss-preset-env if any supported browsers don't have the feature.

Additional context

CIU page: https://caniuse.com/mdn-css_properties_content_alt_text
MDN page: https://developer.mozilla.org/en-US/docs/Web/CSS/content#browser_compatibility

Validations

• Follow our Code of Conduct
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• I'm willing to open a PR

[romainmenke]

Added to CSSDB : https://cssdb.org/#content-alt-text in csstools/cssdb#405

[romainmenke]

Thank you for opening this issue @clarfonthey!

Shouldn't the fallback be to simply remove the /:

content: "string" "alt text";
content: "string" / "alt text";

This is what MDN suggests: https://developer.mozilla.org/en-US/docs/Web/CSS/content#adding_an_image_with_alternative_text

Erasing the alt text isn't that great for accessibility.

Maybe better if it breaks a bit visually in older browsers versions but that all the content is present?

[clarfonthey]

Ah, I wasn't aware that you could just add two strings in the content tag like that; I like that version better!

[romainmenke]

Thank you again for suggesting this feature @clarfonthey 🙇

This has been released as part of postcss-preset-env v9.6.0

You can also try it out in the playground : https://preset-env.cssdb.org/playground/#JTdCJTIyc291cmNlJTIyJTNBJTIyLmZvbyUyMCU3QiU1Q24lMjAlMjBjb250ZW50JTNBJTIwJTVDJTIyYSU1QyUyMiUyMCUyRiUyMCU1QyUyMmIlNUMlMjIlM0IlNUNuJTdEJTIyJTJDJTIyY29uZmlnJTIyJTNBJTdCJTIyYnJvd3NlcnMlMjIlM0ElNUIlMjIlM0UlMjAwLjIlMjUlMjBhbmQlMjBub3QlMjBkZWFkJTIyJTVEJTJDJTIybWluaW11bVZlbmRvckltcGxlbWVudGF0aW9ucyUyMiUzQTAlMkMlMjJzdGFnZSUyMiUzQTIlMkMlMjJsb2dpY2FsJTIyJTNBJTdCJTIyaW5saW5lRGlyZWN0aW9uJTIyJTNBJTIybGVmdC10by1yaWdodCUyMiUyQyUyMmJsb2NrRGlyZWN0aW9uJTIyJTNBJTIydG9wLXRvLWJvdHRvbSUyMiU3RCUyQyUyMmZlYXR1cmVzJTIyJTNBJTdCJTIybmVzdGluZy1ydWxlcyUyMiUzQSU1QiUyMmF1dG8lMjIlMkMlN0IlMjJlZGl0aW9uJTIyJTNBJTIyMjAyNC0wMiUyMiU3RCU1RCU3RCU3RCU3RA==

---

We also made it possible to strip the alt text entirely through a plugin option : https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-content-alt-text#stripalttext