That's right, CSS inside HTML 😁

At first, it might throw you off that we are writing CSS media queries inside HTML, but it is a necessity for this setup to work properly. Think about it 🤔 the browser has to choose an image to render, even before any CSS is loaded into the page!

This element is not limited to just dimension based media queries, but rather any media query! So you could do things like

💭 Different images for different orientaations

💭 Different image if user prefers high contrast

💭 Different images for different color schemes (light, dark)

The possibilities are endless 🚀

Have you seen those websites which shows a list of brands or images with a marquee effect, that seem to go on forever? Here is a tutorial on how to implement exactly that 🤩 in CSS