@sahand-masoleh
Posted
Mate your solution is bang on placement-wise, must've been a lot of work and pain.
I'm not sure if I understand what you said. I guess you're talking about having multiple sources of truth for breakpoints, correct? If so, yeah it's a bit annoying. But for larger applications which have a build phase you can programmatically inject values into your HTML and CSS so this won't be a problem.
And as for the CSS code you posted, you actually got me thinking. I have never seen defining images in the content property of an actual non-pseudo element. This is definitely not standard and I'm struggling to find examples of it on the internet. But in general, images that have meaning should be in the HTML, decorative images should be in the CSS. I will definitely research more.
Edit: Thinking about it more, this way you're trading one problem for another. You're annoyed by having to define breakpoints in multiple places with srcset, but by doing what you suggested you're defining images in multiple places.
Edit2: Oh you're no defining any image in the HTML at all, I thought you meant just defining alternate resolutions in CSS. So yeah, back to my first point, contextual images should be in the HTML. I think a lot of tools won't even see your CSS images this way.
Marked as helpful
@neenreva
Posted
@sahand-masoleh I guess in this case it's debatable whether or not the images have meaning or are placeholder/background. That said, I wouldn't argue too much in favor of the css determining the image source. It just feels right. In the end, accessibility has to be the first consideration, right? lol
Thanks for your comment.