Closed clarfonthey closed 2 months ago
Added to CSSDB : https://cssdb.org/#content-alt-text in https://github.com/csstools/cssdb/pull/405
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?
Ah, I wasn't aware that you could just add two strings in the content tag like that; I like that version better!
Thank you again for suggesting this feature @clarfonthey 🙇
This has been released as part of postcss-preset-env
v9.6.0
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
What would you want to propose?
CSS content supports adding an alternative text after a slash, like so:
However, since some browsers don't support this, you can emit an extra version of the
content
property without the slash, as a backup:Suggested solution
A
postcss-content-alt-text
plugin could perform this transformation and it could be enabled bypostcss-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
Would you like to open a PR for this feature?